Vue服务器渲染Nuxt

安装

第一步：

确保已安装yarn

yarn create nuxt-app <project-name>

它会问你一些问题（名称、Nuxt 选项、UI 框架、TypeScript、linter、测试框架等）。要了解有关所有选项的更多信息，请参阅create-nuxt-app 文档，回答完所有问题后，它将安装所有依赖项。

第二步：
导航到项目文件夹,并启动它：

cd <project-name>
yarn dev

该应用程序现在在http://localhost:3000 上运行。做得好！

目录结构

Nuxt.js 帮我们配置好了所有东西，我们只需要按照它的要求在相应目录下创建文件写代码即可。

1. assets 需要编译的资源文件，如 JavaScript、SASS、LESS 等。
2. static 不需要编译的静态资源文件，如图片资源。
3. components 顾名思义，存放 *.vue 组件的地方。常规 vue 组件写法。
4. layouts 布局目录，设置布局的地方，其中 <nuxt/> 标签是我们写的页面内容。可用作添加导航栏、底部栏等截面。
5. middleware 中间件目录，所谓中间件，就是在页面与页面跳转中执行的函数方法。如页面跳转时验证用户信息操作。
6. pages 页面目录。重点来了~这就是我们存放展示页面的地方。该目录下的文件会转换成相应的路由路径供浏览器访问。另外呢，该目录下的 *.vue 页面文件中 Nuxt.js 提供了一些特殊的方法用于处理服务器渲染中的事件。具体关于路由和特殊方法列举在下面了。
   1. pages 路由
   2. 页面组件的简单介绍，具体特殊配置项的用法请查阅API。
7. plugins 插件目录，像 mint-ui 这种第三方插件就放在这里啦~具体用法看这里。
8. store vuex 状态管理器目录，如果该目录是空的， Nuxt.js 将不启用 vuex。当我们在该文件夹下创建 index.js 文件后即可使用 vuex 状态管理器。用法在此！
9. nuxt.config.js 该文件是 Nuxt.js 的唯一配置项，之前提过 Nuxt.js 将 Webpack 等一众配置都封装好了，所以如果需要特殊配置，只需要修改该文件来覆盖默认配置即可。具体配置参数请查阅API。
10. package.json 不解释

 资源加载

我在 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 页面中使用。

2 3 4 5 6 7 8 9 10 11 12

<template>  <avatar/> </template> <script> import avatar from '~/components/Avatar' export default {   ...   components: {     avatar   } }; </script>

布局

在 layouts 目录中，default 是默认布局。我们可以修改默认布局也可以新建布局来使用。

在布局文件中 </nuxt> 标签是我们要服务器渲染的区域。

下面我们来创建个布局玩玩。

// layouts/page.vue

<template>

<div>

  <mt-header fixed title="标题2"></mt-header>

  <nuxt/>

</div>

</template>

然后我们来使用布局，在 pages 页面中配置 layout 选项（如果不配置默认就是 default）。

export default {

  ...

  layout: 'page' // 默认是 'default'

};

中间件

所谓中间件，就是在两个页面跳转之间执行的行为。比如我定义一个中间件 add.js

export default function ({ store }) {
  store.commit('increment')
}

然后在 nuxt.config.js 中进行配置：

module.exports = {

 ...

 router: {

  middleware: 'add'

 },

 ...

}

这样，在每次页面跳转的时候都会执行一次中间件方法了。当然，也可以单独定义某个页面的中间件，具体看官网啦~

页面

页面，就是在pages目录下的 *.vue 文件，Nuxt.js 将目录结构配置为 vue-router 路由系统，所以我们可以直接通过文件名来访问到相应页面（先不提特殊路由）。

比如 pages/app.vue 文件就可以通过 http://localhost:3000/app 来进行访问。