nuxt 简单介绍

NUXTJS框架是一个易于使用的Vue框架，他之于Vue框架搭建了一套便于开发的框架生态。

在使用Vue框架搭建项目时常常会遇到这些问题：

• 如何整合js库和vue文件？
• 如何能够更好的去组织代码文件和目录？
• 如何能够解决项目的搜索引擎优化问题？
• 如何能够加速首屏打开速度？

当然有些问题是老生常谈了，但如果有一个框架能够同时帮我们解决以上问题，还是非常有实践需求的。

选取一个项目框架有诸多考虑，是否使用nuxt框架来搭建项目也要有一定考量，下面我会罗列一些使用Vue框架时，你会遇到的问题以及Nuxt是如何解决这些问题的，如果你也有相似困惑，不妨开始尝试用nuxt搭一个项目吧！

Problems	How nuxt solve them?
虽然vue提供了一些生态周边，例如Vuex:状态管理器，vue Router路由器等等，但搭建一个完整的项目，这远远不够，你需要不断试错以找到最佳实践，该用什么包管理器，css管理器，是否使用UI框架，以及lint工具，测试框架，渲染模式，编程语言（js/ts）等等。 （如果你不知道如何搭建完整的项目生态，new一个nuxt app会是非常好的选择）	试错帮你做了！直接提供最佳实践的配置，供你选择 （具体配置后面会介绍） 与此同时，nuxt整合了Vuex， Vue Router， vue-meta ，开箱即用！
没有标准的目录结构，仅为你提供了asseets 和 components两个目录（如果你的项目体量较大，未来可能有迁移的需求，选他选他-->nuxt）	为你开辟了更多的文件目录，pages，layouts，store，middleware，static，plugins等等，让你的文件合理的归类
Vue需要配置每个页面的路由，当你的应用页面很多，二级页很多，路由配置会变得十分繁琐	为你自动配好了路由，只需要将你的vue component放在pages目录下，就自动为你生成对应的页面
vue框架无法将所有的配置都放在一块，比如说router的配置，store的配置，webpack构建配置，模块配置等，一般来说这些配置分布在不同文件中，最后整合在main.js文件中或者webpack.config.js中	这些都在nuxt.config.js中，并且为你配好了默认值，只要你想，随时可以override默认设置
SEO问题	通过服务端渲染帮你实现了
首屏渲染速度问题	服务端渲染+按需加载，提升用户体验++
vue很难改变框架的底层行为（如果你开发的是production level 的vue应用，且有可能会涉及到底层行为的更改，不妨试试nuxt）	nuxt提供了更高阶的模块系统，这使得你可以轻松的去自定义nuxt底层行为的各方面

nuxt项目的搭建，初始化及配置

搭建

想要搭建一个nuxt项目并不难，你只需要：

npm init nuxt-app@latest <my-project>

接下来，像我上面提到的那样，nuxt提供了各类配置选择，我会在下面为大家介绍具体有哪些配置选择，他们分别是什么，以及你应该如何去选择。

初始化

Step 1:

定义nuxt项目名称。

Step 2:

选择js或ts语言作为项目的开发语言，不同选择nuxt会生成不同的config文件：tsconfig.json / jsconfig.json。

除此之外会为不同语言配备不同的构建工具，可以起完项目后，在nuxt.config.js文件buildModules配置中看到。

Step 3:

选择包管理器，这个可按个人喜好选择，如果没有特定惯用的包管理器，可以选择npm。

Step 4:

选择UI库，nuxt框架提供了许多的UI设计语言（UI库）供选择，比如常见的Ant Design，Bootstrap等，他们提供了一套规范的交互视觉和交互能力。

这里按需取用即可，如果你不想用UI库，就要写原生CSS，那也可以。这种情况下选择none，后续可以添加一些css扩展包比如说Scss，提高开发效率。

Step 5:

选择nuxt扩展模块，在上面表格里提到了nuxt提供了更高阶的模块系统。模块之于nuxt只是引导 Nuxt 时按顺序调用的函数。

这里nuxt框架提供了三个可选模块，这三个模块是基于不同类型的应用而生成的模块，从下表可以看到一个对应关系。

选择	对应的nuxt官方模块	模块功能概述	对应的应用类型
Axios	@nuxtjs/axios	安全且简单的axios和nuxt.js集成，用于Http请求	Base HTTP/HTTPS请求的Web App
PWA（渐进式应用程序）	@nuxtjs/pwa	稳定的PWA解决方案用于增强Nuxt对PWA的支持	渐进式应用程序
content（无头内容管理系统）	@nuxtjs/content	允许在content / dictionary 中写入内容，并通过像API一样的MongoDB来获取Markdown，JSON，YAML，XML和CSV文件	无头式内容管理系统（headless CMS）

你可以根据自己的不同需求去选择对应的扩展模块，从上面的图可以看得出来这是一个多选的配置，选错了也不要紧，因为nuxt的模块系统支持随时自定义模块扩展，只需要等到项目初始化后，在nuxt.config.js文件中修改引用的模块即可。

Step 6:

添加上我们所需要的linting tools，这一步尤为重要，代码规范和开发体验有很大部分依赖这些lint tools。

下面列出了这些工具的作用，大家可以按需选用，一般来说不妨全部选上。

Linting tools	作用介绍
Eslint	js代码检查工具
Prettier	代码格式化工具
Lint-Staged	staged是git 中待提交区的概念，lint-staged则是可以在代码提交前对待提交区代码进行一些自定义操作的工具，包括执行eslint检查等等
StyleLint	css代码检查工具
Commitlint	commit命令检查工具

Step 7:

配置需要的测试框架，按需要选用即可，如果你不清楚是否未来有单元测试的需求，可以先不选或者选用当前比较多用的jest框架。

Step 8：

选择渲染模式，nuxt提供了两种渲染模式，第一种Universal（SSR / SSG）是服务端渲染，第二种是单页面应用渲染模式。

为了更好的帮助你选择渲染模式，下面列表将会列出这两种渲染模式的各自较明显的优缺点。

渲染模式	优点	缺点
服务端渲染模式	1. 首屏加载速度快 2. 利于SEO	1. 学习成本高，前后端耦合 2. 库的支持性，兼容性不能保证 3. 有一些客户端的方法不适用（代码兼容性）
单页面应用渲染模式	1. 良好交互体验：交互通过js动态变换页面内容，无需重新加载页面 2. 减轻服务器压力	1. 首屏加载慢 2. 不利于SEO

单页面应用渲染模式的优缺点并非是基于服务端渲染模式而得出的，反观服务端渲染模式创建的nuxt应用也是单页面应用，但是他能够解决单页面应用渲染模式的缺点，开发同学只需要根据自己的需求进行渲染模式的选择即可。

Step 9：

选择部署目标，这里之所以可以选择部署目标是因为nuxt支持静态网页的生成，一般我们选服务端部署即可。

Step 10：

选择开发工具，按照指引，VS Code编辑器，js开发语言的推荐选择jsconfig.json，如果是ts开发语言，这里不选也行。

Step 11：

选择持续集成工具，按需选用即可。

Step 12：

选择版本控制系统，一般来说我们选择git版本控制系统，如果有别的需要，则选none按需引入即可。

---

到这里，一个nuxt项目就创建完毕了，然后按照git reposity指引将这个仓库绑定到git上去

通过以上这12步我们仅仅是创建了最简单的nuxt项目，为了使我们的项目有更好的开发体验，未来提交的代码符合相关代码规范，以及能够进行后续的部署操作，我们还需要进行一系列配置操作，请继续往下看。

配置

配置package.json

一个业务项目需要包含以下package.json配置

{
    "private": true,
    "scripts": {},
    "husky": {},
    "lint-staged": {},
    "dependencies": {},
    "devDependencies": {}
}

一个一个来讲解：

private字段：这个属性是用来防止意外的发布，当我们执行npm publish发布一个npm包时，private为true的项目会提示不能发布。

scripts字段：npm脚本命令集合，scripts对象中每一个属性对应一个脚本，通过npm run 属性来执行脚本，如npm run dev，即可执行scripts中的dev属性对应的脚本。

husky字段：用于配置git hook的字段，git hook 是用于在特定的重要动作发生时触发自定义脚本，比如在开发人员提交代码之前检查脚本。

lint-statged字段： 首先staged是git中的概念，表示的是待提交区的代码，如果项目很大，每次提交前都检查一遍所有代码，会十分耗时且做无用功，lint-staged配置只检查待提交区的代码，省时且高效。

注意： husky和lint-staged可以结合，这样在pre-commit阶段自动执行lint-staged里对应的命令行。这个操作提高了开发效率，提交代码自动检查确保了开发人员提交的代码质量。配置示例代码如下：

"lint-staged": {
    "*.{js,vue}": "eslint",
    "*.{css,vue}": "stylelint"
  },
"husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  },

上述示例代码表达的含义是：对commit-msg进行hook，并执行后面的命令进行检查，用于检查commit message是否符合规范，对pre-commit进行hook，并对待提交区的代码执行检查，针对.js 和 .vue文件执行eslint命令，针对.css 和 .vue文件执行stylelint检查。

如果你在nuxt项目初始化时选择了husky和lint-staged，nuxt会自动在package.json里添加相关配置，如果没有，自己手动下载下依赖包然后按照package.json官方文档按需要配置即可。

npm i husky -D
npm i lint-staged -D

dependencies字段：需要发布到生产环境的依赖包，即项目运行时需要的依赖，比如说数据请求需要用到axios，没有这个依赖 包，线上的应用就会出错，无法发送请求，这种依赖包就写在dependencies中。

npm i package_name --save / npm i package_name -d

devDependencies字段：仅在开发中使用的包，即开发时需要的依赖，比如说一些lint tools，一些构建的工具包，一些测试工具，以及一些css语法扩展包，可视化工具包之类的，这种写在devDependencies中。

npm i package_name --save-dev / npm i package_name -D

添加一些实用依赖包

有一些比较实用的依赖包，是开发时会用到的，但是nuxt app初始化时没有下载，在这里简单的介绍一些实用依赖包及他们的用途。

eslint-plugin-import： import文件的规范

@nuxtjs/axios：nuxt app请求依赖包

sass & sass loader：css扩展包，如果你没有使用任何外部UI，这是个不错的选择

typescript: typescript支持, 如果选择了ts作为你的开发语言，需要装一个ts语言支持的库

配置eslint & eslint自动修正工具

代码规范是开发一个好项目的基础，这也是eslint的诞生初衷，具体坏代码风气会带来哪些后果，就不在这里一一讲述了，相信有过大型项目开发体验的同学都深有体会。

这个部分我将用最容易理解的方式来讲述如何去配置eslint以及如何通过VSCode的Eslint插件去实现eslint自动修正。

配置eslint

在初始化一个nuxt项目时，已经引入了项目所需要的eslint包, 同时也创建好了配置文件，这里涉及到两个文件：

• .eslintrc.js文件：用于配置eslint规则的文件

• .eslintignore文件： 用于配置需要忽略eslint检查的文件

eslint可以通过以下三种方式使用：

1. 在js中使用注释方式使用
2. 写在package.json的eslintConfig中
3. 通过配置文件的方式使用

eslint通过配置文件使用时，有很多种文件方式，比如说.eslintrc.yaml ; .eslintrc.json，他们发挥的作用本质上没有区别，只是表现形式不同。

一份基于.eslintrc.js 方式的示例配置如下：

module.exports = { 
    root: true, 
    parser: '', 
    parserOptions: {}, 
    env: { 
        browser: true, 
        node: true, 
    }, 
    globals: { 
        var1: true, 
        var2: false, 
    } 
    plugins: ['a-plugins'], 
    settings: {}, 
    extends: ['@xxx/prettier'], 
    overrides: [ 
        { 
        files: ['*.ts', '*.vue'], 
        extends: [], 
        parserOptions: {}, 
        rules: {}, 
        }, 
        { 
        files: ['test/**/*.spec.js'], 
        env: { 
            jest: true, 
        }, 
        extends: [], 
        rules: {}, 
        }, 
    ], 
};

基于上面的配置demo，接下来介绍下这些eslint配置的用途：

• root：当此属性设置为true时，阻断向上读取父级其他.eslintrc配置

• parser：可以自己指定eslint解析器，一般使用默认的，不配置这项

• parserOptions： ESLint允许指定你想要支持的js语言选项，默认是支持ES5， 但你也可以覆盖默认设置，来启用ESLint对ES6或者是jsx的支持

  {
     "parserOptions": {
          "ecmaVersion": 6, //用来指定ECMAScript版本
          "sourceType": "module", // 设置为script和module都可以
          "ecmaFeatures": { // 开启你想使用的额外的语言特性
              "jsx": true
          }
      },
  }
  

• env：每个环境有预定义的全局变量，比如说node环境下有global全局变量，browser环境下有window，你可以在这里开启需要的环境，否则在使用相关变量时就会报错。

• globals：定义全局变量，即在文件中未定义使用也不会报错，取值：true -> writable ； false -> readonly

• plugins：一个npm包，作用是用来补充规则，一般会在引入时去掉前缀，比如说：plugins: ['import']，这里相当于引入了eslint-plugin-import，用来检查文件引入时的正确性

• settings：规则共享参数，每个规则项都会 被注入该变量

• extends：eslint配置的扩展，用的比较多的就是可共享配置了，以一个npm包的方式被引入，你需要先install你引入的npm配置包。

• overrides：为特定类型的文件指定规则或处理器

虽然eslint配置有很多，但常用的就那么几项，见上面标红的部分，eslint的每一个配置项，光凭看看文档无法全部参透，我在此处也只是为大家略讲一二，让大家对eslint有哪些配置有个初步的印象，实际使用时，我们需要在不同的业务场景灵活的去配置，学习eslint的配置。这里贴上 Eslint中文官网使用指南。

再来说说.eslintignore文件，这里的配置比较简单，将你认为不需要进行eslint检查的文件路径贴到此文件中即可，一般来说静态资源目录我们不需要执行eslint检查，仅供参考：

statics
assets

eslint自动修正工具

Step 1

确认自己下载了eslint库，nuxt脚手架初始化的项目，只要勾选了eslint选项，就会自动帮你下载eslint库以及一些插件，如下：

Step 2:

在VSCode里添加ESLint插件

ESLint插件会默认去读取你VSCode工作区的eslint库， 以及根目录下的.eslintrc.js配置文件

Step 3

配置vscode的setting.json文件，一般来说路径./vscode/setting.json。

你需要配置的是 eslint.validate & editor.codeActionsOnSave

{ 
"eslint.validate": [ 
    "javascript", 
    "javascriptreact", 
    "typescript", 
    "typescriptreact"
], 
"editor.codeActionsOnSave": 
    { "source.fixAll.eslint": true }, 
}

值得一提的是，ESLint插件在版本2.0.4之前，eslint.validate默认 ["javascript", "javascriptreact"]，在版本2.0.4之后，就改进了 TypeScript 检测，无须配置eslint.validate也可以正常执行ts文件检测，同样无须配置即可检测的还有html文件和vue文件。

Step 4

经过上述 Step1 - Step3 的配置后，你的编辑器就会依据.eslintrc.js文件的配置自动检查eslint问题，可以通过“ ctrl+s ”或者“ command+s ”进行 eslint 问题自动修正。

补充1:

在上面的demo中，你可能会注意到

extends: ['@xxx/prettier'],

这里我们引入了一个eslint扩展包，prettier是代码格式化工具，那么在针对eslint问题自动修正的时候，是否可以按照要求的格式化规则，将代码一起修正一下呢？

是可以的，比如在这里，引入了prettier后，可以增加一份.prettierrc的配置，用来写你需要的格式化规则：

{
  "semi": true,
  "singleQuote": true
}

这样在“ ctrl+s ” 或 “ command+s ” 点击保存时，会自动修正格式问题。

补充2:

如果你的项目刚引入eslint，文件十分多，一个一个点击修复太麻烦，是否可以一键全部修复呢

当然可以，你只需要在package.json的scripts命令属性下添加：

"lint": "eslint --ext .js, .vue src --fix"

--ext 后面跟的是需要检测的文件后缀

src 是需要检测的目录

--fix 作用是自动修复检测出来的eslint问题

通过以下命令：

npm run lint

就可以进行大批量文件，一键检测eslint问题+修复了。

nuxt.config.js配置

nuxt.config.js文件的所有配置都能在官网找到相应的文档，我这里就讲几个比较重要的：

1.如果调整了目录结构，需要给srcDir重新设定指向，nuxt app初始化时的目录结构大致如下：

-| app/
---| node_modules/
---| nuxt.config.js
---| package.json
---| assets/
---| components/
---| layouts/
---| middleware/
---| pages/
---| plugins/
---| static/
---| store/

如果将这些文件包裹了一层，如下

-| app/
---| node_modules/
---| nuxt.config.js
---| package.json
---| client/
------| assets/
------| components/
------| layouts/
------| middleware/
------| pages/
------| plugins/
------| static/
------| store/

需要在nuxt.config.js文件中设置

srcDir: './client'

当然如果你的其他设置中，涉及到了文件路径，你也需要相应的修改，加上client路径

2.需要自己手动加一下@nuxtjs/axios模块，加在modules配置下

  // Modules (https://go.nuxtjs.dev/config-modules)
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

3.如果你希望所有的页面有统一的前置路径，可以在router属性中设置

router: {
    base: '/example',
},

4.如果想让你写的插件生效，不要忘记在config文件plugins配置处，引入一下

plugins: [
    { src: '~/plugins/example.ts', mode: 'client/server' },
  ],

src: 文件的路径

mode：指定文件仅出现在某个端，如果是仅限定于客户端的插件，mode: 'client'。

如果你好奇其他的配置，不妨拜读下 nuxt配置官方文档 。

types配置

这个配置的目的是为了引用.vue文件时，让编译器知道这个后缀的文件是什么类型的。

在pages同级目录下创建types文件夹，其中创建vue.type.d.ts文件

declare module '*.vue' {
  import Vue from 'vue';
  import { ComponentOptions } from 'vue/types/options';

  const componentOptions: ComponentOptions<
    Vue,
    Record<string, unknown>,
    Record<string, unknown>,
    Record<string, unknown>,
    Record<string, unknown>
  >;
  export default componentOptions;
}

其他配置

除了以上提到的四项比较重要的配置，还有commitlint配置（commitlint.config.js)，以及stylelint配置（stylelint.config.js），这些配置文件，在初始化nuxt时，都会自动生成，具体的配置规则这里我不再展开介绍，新手更多的关注下上述五项配置。

部署的部分后面有空了再补上