nuxt模板的创建及使用（koa、sass）

概念

Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架。

Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

特性

• 基于 Vue.js
• 自动代码分层
• 服务端渲染
• 强大的路由功能，支持异步数据
• ES2015+ 语法支持
• 打包和压缩 JS 和 CSS
• HTML 头部标签管理
• 本地开发支持热加载
• 集成 ESLint
• 支持各种样式预处理器： SASS、LESS、 Stylus 等等
• 支持 HTTP/2 推送

流程图

模板安装

首先我们安装好npx（现在的node一般默认带有），如果已经有可以跳过此步。

npm i -g npx

然后我们使用nuxt给的模板安装指令：

npx create-nuxt-app  

也可以直接用npm或者yarn直接安装，指令如下：

npm init nuxt-app 
yarn create nuxt-app 

由于nuxt的模板安装已经到了3.X版本，而该版本的server framework被否决了，所以如果想带有server framework选项的模板的话可以安装2.15.0的版本指令如下：

npx [email protected] 

不过两个版本插件之间的版本是有一定程度的差异的，如果你想使用更新的版本建议还是用回3.X版本，自己额外安装server framework，该本章只作2.15.0的安装使用。

关于安装的各种选项建议大家去理解是什么意思，毕竟一个好的开发人员要慢慢尝试去阅读理解英语。像下面的英语其实都很简单，如果不懂的可以去翻译网站翻译一下就理解了。

服务框架

我只截取了选项中的3个框架做了一下对比，相对来说koa更加的轻量，而express更多人使用

选项差异

3.x

2.15.0

package.json的差异

3.x

2.15.0

目录讲解

这里说一下2.15.0的目录结构：

• 资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。（关于 assets 目录的更多信息）
• 组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
• 布局目录 layouts 用于组织应用的布局组件。若无额外配置，该目录不能被重命名。（关于布局的更多信息）
• middleware 目录用于存放应用的中间件。（关于中间件的更多信息）
• 页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。若无额外配置，该目录不能被重命名。（关于页面的更多信息）
• 插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。（关于插件的更多信息）
• 当你配置了服务框架选项就会有server目录，连接服务器及存储api文件。
• 静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。若无额外配置，该目录不能被重命名。（关于静态文件的更多信息）
• store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。若无额外配置，该目录不能被重命名。（关于 store 的更多信息）
• nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。若无额外配置，该文件不能被重命名。（关于 nuxt.config.js 的更多信息）

Babel

如果我们想要在serve下的js文件中使用import、export等其它语法糖，我们需要安装配置babel 首先安装babel-preset-env插件

npm i babel-preset-env

在server目录下创建.balcelrc文件填入以下内容：

// 将来babel-loader运行的时候，会检查这个配置文件，并读取相关的语法和插件配置
{
    "presets": ["env"]
}

最后我们需要在package.json的scripts指令的dev及start的末尾加上--exec babel-node

这样就可以使用import等其他的语法糖了

关于更多 babel的用法

sass

安装

安装指令

npm i sass-loader node sass

当你安装依赖完成后要留意它是否出现warn 或者error，并尝试去解决它，这也是作为一个开发者必备技能。
像当我安装完上面的组件出现了下面的警报

根据它的提示，我们只需要对应安装好缺失的依赖即可。

npm install sass@^1.3.0 --save-dev
npm install [email protected] --save-dev

而如果你用的是windows系统报下面的警报则不需要管它，这是因为该依赖只是在mac系统上使用的，而模板的打包里面，也包括了该依赖，在windows上是不需要的，所以你也不用去管它。

使用

安装好后你可以在vue文件下的style声明好scss模式，直接使用scss开发即可，也可以用@import引入scss文件像下图。

<style lang='scss'>
  @import '@/assets/css/public/pfVideo.scss'
style>

配置全局变量 和 mixin

为页面注入 变量 和 mixin 而且不用每次都去导入他们，可以使用 @nuxtjs/style-resources 来实现。

先安装该组件:npm i @nuxtjs/style-resources -D

配置（nuxt.config.js）：

module.exports = {
  modules: [
    '@nuxtjs/style-resources' // 添加对应的模块
  ],
  styleResources: {
    scss: [
      './assets/css/_var.scss', // 全局 scss 变量
      './assets/css/_mixin.scss' // 全局 scss 混合
      './assets/css/_reset.scss' // 全局 scss 重置
    ]
  }
}

资源汇总

关于 assets 目录的更多信息
关于布局的更多信息
关于中间件的更多信息
关于页面的更多信息
关于插件的更多信息
关于静态文件的更多信息
关于 store 的更多信息
关于 nuxt.config.js 的更多信息
关于更多 babel的用法
create-nuxt-app模板Github
nuxt中文官网
基于koa的mongoose（mongodb、robo 3T、mongoose）、redis使用

如果大家在开发中遇到什么问题，尽量去官网的issue中搜索解决，很多的已知问题在官网上都有解答的，养成看官网文档的习惯是非常必要的，希望大家不单单只学会这门技术，而是懂得如何去学习一门新技术。