Vue.js中nuxt脚手架的搭建及简单使用

1. Nuxt的使用

npm v5.2.0引入的一条命令（npx）,引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验
举例： 使用express-generator创建项目
老方法：

     npm install express-generator -g
     express app

npx方式

     npx express app

npx可以减少我们全局安装脚手架

2. nuxt 安装
   我们使用脚手架 create-nuxt-app
   避免全局安装，我们使用npx

  npx create-nuxt-app app
  npm i
  cd app
  yarn run dev

3. nuxt-目录结构
   nuxt-目录结构：nuxt-目录结构4. nuxt-配置 - nuxt.config.js
   nuxt-配置：nuxt-配置
   举例： 配置 scss

4. 在assets 目录中新建css目录，在css目录中新建 main.scss 文件
   例如
   

5. 命令行安装loader

    yarn add node-sass sass-loader scss-loader -D

3. 在 nuxt.config.js 文件中引入scss文件
   

4. nuxt - 路由

   1. 基础路由
   2. 动态路由
   3. 路由传参
   4. 嵌套路由
   5. nuxt-视图
   6. nuxt - 异步数据
   7. 资源文件
   8. 插件
   9. 模块
   10. vuex状态树
   11. 命令和部署

   以上这些在官网都有详细的解释
   https://zh.nuxtjs.org/guide/

5. 命令

   • nuxt启动一个热加载的Web服务器（开发模式） localhost:3000。
   • nuxt build利用webpack编译应用，压缩JS和CSS资源（发布用）。
   • nuxt start以生产模式启动一个Web服务器 (nuxt build 会先被执行)。
   • nuxt generate编译应用，并依据路由配置生成对应的HTML文件 (用于静态站点的部署)。

部署

服务器部署

$ nuxt build || $ nuxt start

静态站点部署

$ npm run generator