Nuxt.js教程（初识篇）

目录
一、定义
二、安装
三、项目结构
四、配置文件

系列教程
Nuxt.js教程（入门篇）

---

一、定义

1、Nuxt.js是什么

一个集成了多个Vue应用的SSR（服务器端渲染）框架。

//集成应用结构
Nuxt.js
├──Vue 2
├──Vue-Router
├──Vuex
├──Vue-SSR
└──Vue-meta

2、SSR的优缺点

（1）优点

• 更好的SEO
• 更快的网页内容呈现速度

（2）缺点

• 开发麻烦
• 占用更多的服务器CPU资源

3、Nuxt.js流程图（请求到渲染）

（1）当一个客户端请求进入的时候，服务端有通过nuxtServerInit这个命令执行在Store的action中，在这里接收到客户端请求的时候，可以将一些客户端信息存储到Store中，也就是说可以把在服务端存储的一些客户端的一些登录信息存储到Store中。
（2）之后使用了中间件机制，中间件其实就是一个函数，会在每个路由执行之前去执行，在这里可以做很多事情，或者说可以理解为是路由器的拦截器的作用。
（3）然后再validate执行的时候对客户端携带的参数进行校验。
（4）在asyncData与fetch进入正式的渲染周期，asyncData向服务端获取数据，把请求到的数据合并到Vue中的data中。

---

二、安装

1、模板搭建项目

//（1）
yarn create nuxt-app myProject
//（2）随后一路回车确认（迎合习惯，选择了yarn），搭建好项目后，按需手动补充所需的应用
//（3）
cd myProject
//（4）
yarn dev
//（5）localhost:3000打开项目

2、无模板搭建项目

//（1）
yarn init -y
//（2）
//package.json
"scripts": {
  "dev": "nuxt"
},
//（3）
//根目录下，新建pages文件夹，添加index.vue
//Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序
<template>
    <h1>Hello world!</h1>
</template>
//（4）
yarn dev
//（5）localhost:3000打开项目

PS：后续内容，以模板搭建项目展开。

三、项目结构

myProject
├──assets    //未编译文件
├──components    //组件
├──layouts    //布局文件
├──middleware    //中间件
├──pages    //页面，并自动生成对应的路由配置
├──plugins    //根vue实例创建前，需要运行的插件
├──static    //静态资源
├──store    //vuex
└──nuxt.config.js    //配置文件

---

四、配置文件

// 在官网api页,查看更多配置项
export default {
    // 服务器渲染模式
  mode: 'universal',
    // meta标签
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
    // 加载组件
  loading: { color: '#fff' },
    // 全局css
  css: [],
    // 根vue实例创建前，需要运行的插件
  plugins: [],
    // Nuxt模块
  modules: [],
    // 第三方模块
  build: {
    extend(config, ctx) {
    }
  }
}