入门 Nuxt.js（二）
在前一篇文章中，我已经介绍了 Nuxt.js 的一些特点和简单的安装使用，这篇文章主要用来介绍这个框架的目录结构和最为重要的服务端渲染。
目录结构
目录概要
--| assets/
--| components/
--| layouts/
--| middleware/
--| modules/
--| pages/
--| plugins/
--| server/
--| static/
--| store/
--| nuxt.config.js
上面这份清单已经包含了绝大部分 nuxt.js 提供的目录了，我们主要围绕这些进行讲解。
目录详解
assets
这个目录主要放置一些资源文件，像样式、脚本、图片以及字体文件等。一般是放置全局通用文件，如果是模块自己的资源文件我个人的习惯是放在当文件中，这样便于维护。当然你也可以在 assets 目录下再建一些文件夹，对模块进行分类。
如果是全局的文件可以在 nuxt.config.js 中进行引入。如 css 文件，
module.exports = {
/*
** Global CSS
*/
css: [
'element-ui/lib/theme-chalk/index.css'
]
}
components
这里可以放置全局的公共组件，注意这里不能使用服务端渲染的方法 asyncData 和 fetch，如果你对这两个方法不熟悉，没关系，后面会介绍。
layouts
这里可以放置一些模板文件，比如一般网站多个页面都会共用一个头部或者侧栏，这个时候我们可以使用模板的方式。
我们可以创建任意文件名，并以 .vue 为后缀。
在页面中，如果需要使用某个模板，只需要在 script 中加上 layout 属性，值写相应的文件名即可。
middleware
中间件，这有点类似 koa 中的中间件概念，在每次进行路由切换的时候，就会调用中间件。如果我们想在路由切换时做些什么事情，我们就可以使用中间件。
比如在该目录下写一个文件 stats.js
import axios from 'axios'
export default function({ route }) {
return axios.post('http://localhost:3000/api/stats?url=' + route.fullPath)
}
然后需要在 nuxt.config.js 中配置一下
module.exports = {
router: {
middleware: 'stats'
}
}
modules
模块本质就是一些函数，有时候我们需要对某一块功能进行封装，然后再使用。这个时候就可以采用模块。
或者有时候我们需要引入一些插件，这个时候我们可以把这些事情放到一个模块里面去做。
同时在 nuxt.js 社区，很多小伙伴也开源了自己的模块，我们可以找到符合我们需求的模块然后引入进来。
pages
这个就是页面了，我们之间放置文件在里面，nuxt.js 就会自动帮我们配置好路由，可以说是非常方便了。
plugins
一些插件文件我们可以放在这里进行引入。比如引入 element-ui 组件，
import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
还需要在 nuxt.config.js 中配置一下
module.exports = {
/*
** Plugins to load before mounting the App
*/
plugins: [
{
src: '~/plugins/element-ui',
ssr: false
}
]
}
server
这一块是服务端文件目录，在创建 nuxt.js 项目时，你可以选择你熟悉的后端框架，如 express 或者 koa 等等。
static
该目录可以放置一些能直接访问的静态资源，比如网站 icon，或者一些协议说明之类。
之前我做微信开发时，就需要放置一些 txt 文本在根目录下，以便微信服务器进行校验。
store
一般来说复杂的应用使用 vuex 时比较方便的，当你的页面复杂时，你的组件也会复杂，这个时候你就会遇到组件间相互传值的问题，毫无疑问 vuex 是最好的选择。
在该目录下，建一个 index.js 文件，如
const state = () => ({
count: 0
})
const getters = {
getCount(state) {
return state.count
}
}
const mutations = {
setCount(state, data) {
state.count = data
}
}
const actions = {
fetchCount({commit, state}) {
commit('setCount', 101)
}
}
export {state, getters, mutations, actions}
服务端渲染
服务端渲染是 nuxt.js 最重要的特性，主要是两个方法，asyncData 和 fetch。
渲染生命周期
请求在到 Render 这一步时，数据才返回给浏览器。在此之前我们可以看到，他执行了 asyncData 和 fetch 方法。
SSR 方法
asyncData 和 fetch 方法都是在服务端进行请求数据的方法，那么他们两又有啥区别呢？其实在我一开始接触 nuxt.js 时，就觉得很奇怪，为什么有两个方法呢？
在后面了解和使用了这两个方法才知道作者这样设计的目的。
asyncData
这个方法主要是获取组件内部的数据。一般来说只有子组件间需要传递的数据，我们才会放到 store 中，否则是没有必要的。如果某个数据只在当前组件中使用，那么我们就可以使用该方法来获取。
export default {
layout: 'footer',
data() {
return {
activities: []
};
},
async asyncData({ $axios }) {
const { data } = await $axios.$get('http://localhost:3000/api/about')
return {
activities: data
}
}
}
注意：在服务端时，还没有 vue 实例。所以不要在 asyncData 方法中使用 this 去获取 data 中的变量。
fetch
该方法主要是获取 store 中的数据。用法和 asyncData 差不多，他是一个异步方法。
export default {
async fetch({store, $axios}) {
const {data} = await $axios.$get('http://localhost:3000/api/stats')
store.commit('setCount', data)
}
}
小结
关于 nuxt.js 的介绍就到这里，这份简单的入门教程主要是给新手提供一个学习的途径，如果是有经验的开发人员，推荐直接到官网学习（可选中文语言）。
这里提供了一份 demo，供大家进一步学习，Git 传送门。
相关推荐：
- 入门 Nuxt.js（一）