直接使用 Vue 构建前端单页面应用，页面源码时只有简单的几行 html，这并不利于网站的 SEO，这时候就需要服务端渲染@H_301_1@
2016 年 10 月 25 日，zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js@H_301_1@
几小时后，一个基于 Vue.js 的服务端渲染应用框架应运而生，与 Next.js 异曲同工，这就是Nuxt.js @H_301_1@
一、快速模板
@H_301_1@在已经安装了 vue-cli 的前提下，可以快速创建一个 nuxt 的项目模板@H_301_1@
其中 MyProject 是项目文件夹名称，可自定义@H_301_1@
通过 npm install （似乎用
yarn install
更顺利） 安装依赖之后，可以直接 npm run dev 在开发环境
启动项目@H_301_1@默认启动的地址为 http://localhost:3000/，可以在
package.json
中添加以下配置来修改主机端口号@H_301_1@开发完成后执行 npm run build 打包代码，最后 npm start 启动服务@H_301_1@
二、重要目录
@H_301_1@
@H_都是 nuxt 默认保留的，不可修改
@H_301_1@其中比价比较关键的目录有三个：@H_301_1@
1. components 组件目录
@H_301_1@
@H_一般用来存放
非页面级别
的组件，如 header、footer 等公共组件@H_301_1@该目录下的组件具有常规 vue 组件的方法和特性，不会被 nuxt.js 扩展特性@H_301_1@
2. layouts 布局目录
@H_301_1@
@H_可以修改该目录下的 default.vue 来修改默认布局@H_301_1@
其中
此外还可以在目录下新增 error.vue 作为错误页面，具体的写法可以参考官方文档 @H_301_1@
3. pages 页面目录
@H_301_1@
@H_用于存放页面级别的组件，nuxt 会根据该目录下的页面结构生成路由 @H_301_1@
比如上图中的页面结构，会生成这样的路由配置：@H_301_1@
此外，该目录下的 vue 组件还具备一些Nuxt.js 提供的特殊功能特性 @H_301_1@
其中
asyncData
方法比较常用，支持异步数据处理@H_301_1@这个方法会在
页面组件
每次加载之前被调用，然后获取数据并返回给当前组件@H_301_1@asyncData 方法的第一个参数为上下文对象 context，具体属性可以 查看这里@H_301_1@
由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象@H_301_1@
三、使用插件
@H_301_1@如果项目中还需要引入其他的第三方插件，可以直接在页面中引入，这样在打包的时候，会将插件打包到页面对应的 js 里面@H_301_1@
但要是别的页面也引入了同样的插件，就会重复打包。如果没有需要分页打包的需求，这时候可以配置 plugins@H_301_1@
以 element-ui 为例，在安装了 element-ui 之后，在 plugins 目录下创建 elementUI.js@H_301_1@
@H_然后在根目录的 nuxt.config.js 中添加配置项 build.vendor 和 plugins@H_301_1@
这里的 plugins 属性用来配置 vue.js 插件，也就是
可以用 Vue.user() 方法
的插件@H_301_1@默认只需要 src 属性，另外还可以配置 ssr: false，让该文件只在客户端被打包引入@H_301_1@
如果是像 axios 这种第三方 （不能 use） 插件，只需要在 plugins 目录下创建 axios.js@H_301_1@
import axios from 'axios'
const service = axios.create({
baseURL: '/api'
})
Vue.prototype.$ajax = axios
export default service
然后在 build.vendor 中添加配置 （不需要配置plugins）@H_301_1@
这样在打包的时候，就会把 axios 打包到 vendor.js 中@H_301_1@
四、Vuex 状态树
@H_301_1@如果在 store 目录下创建了 index.js，nuxt.js 会根据该目录下的文件创建 Vuex 状态树@H_301_1@
import Vuex from 'vuex'
import Axios from '~/plugins/axios.js';
Vue.use(Vuex)
const store = () => new Vuex.Store({
state: {
author: 'WiseWrong',info: ''
},mutations: {
setInfo (state,val) {
state.info = val
}
},actions: {
loadAboutMeInfo ({commit,state}) {
return Axios.get(/about)
.then(res => {
console.log('ajax is success')
console.log(res.data.info)
commit('setInfo',res.data.info)
})
.catch(err => {
console.log('error')
})
}
}
})
export default store
Nuxt.js 内置引用了 vuex 模块，不需要额外安装@H_301_1@
上面的代码中，我在 actions 中写了一个 loadAboutMeInfo() 方法，用来请求 /api/about 接口@H_301_1@
{{$store.state.info}}
成果演示：@H_301_1@
@H_301_1@