然后建议不要使用cnpm，我用cnpm安装运行老报错，感觉有坑。
目录结构
Nuxt.js 花了很大的篇幅讲它的目录结构，其实了解了目录结构就了解了 Nuxt.js 的大概。Nuxt.js 帮我们配置好了所有东西，我们只需要按照它的要求在相应目录下创建文件写代码即可。
- assets 需要编译的资源文件，如 JavaScript、SASS、LESS 等。
- static 不需要编译的静态资源文件，如图片资源。
- components 顾名思义，存放 *.vue 组件的地方。常规 vue 组件写法。
- layouts 布局目录，设置布局的地方，其中 <nuxt/> 标签是我们写的页面内容。可用作添加导航栏、底部栏等截面。
- middleware 中间件目录，所谓中间件，就是在页面与页面跳转中执行的函数方法。如页面跳转时验证用户信息操作。
- pages 页面目录。重点来了~这就是我们存放展示页面的地方。该目录下的文件会转换成相应的路由路径供浏览器访问。另外呢，该目录下的 *.vue 页面文件中 Nuxt.js 提供了一些特殊的方法用于处理服务器渲染中的事件。具体关于路由和特殊方法列举在下面了。
- pages 路由
- 页面组件的简单介绍，具体特殊配置项的用法请查阅API。
- plugins 插件目录，像 mint-ui 这种第三方插件就放在这里啦~具体用法看这里。
- store vuex 状态管理器目录，如果该目录是空的， Nuxt.js 将不启用 vuex。当我们在该文件夹下创建 index.js 文件后即可使用 vuex 状态管理器。用法在此！
- nuxt.config.js 该文件是 Nuxt.js 的唯一配置项，之前提过 Nuxt.js 将 Webpack 等一众配置都封装好了，所以如果需要特殊配置，只需要修改该文件来覆盖默认配置即可。具体配置参数请查阅API。
- package.json 不解释……
Demo演示
好消息，VueStudyDemos又更新啦！欢迎Star~本文Demo已收入到VueStudyDemos中。
下面我们来简单实现下各文件夹所提到的功能。
资源加载
我在 assets 文件夹下添加了 font-awesome 字体库，在 static 文件夹中放了张 Vue 的 logo 图片。然后对资源进行调用。
<i class="fa fa-address-book" aria-hidden="true"></i> <img src="~/static/logo.png" />
这里需要将 font-awesome 的 css 变为全局 css，避免每个用到的页面中都 import 字体库的css。所以我们在 nuxt.config.js 中添加如下配置。
module.exports = {
...
css: [
'~/assets/font-awesome/css/font-awesome.min.css'
],
...
}
组件定义
组件存放在 components 文件夹下，这个我们讲目录的时候提到过。组件的用法和常用 vue 组件用法一致。 定义组件 Avatar，然后在 Page 页面中使用。