Nuxt 安装及简单使用

nuxt

网址： 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

    // 1. 在assets 目录中新建css目录，在css目录中新建  main.scss 文件
        main.scss
            body: {
                background: red;
            }
            
    // 2. 命令行安装loader
    
        yarn add node-sass sass-loader scss-loader -D
    
    // 3. 在 nuxt.config.js 文件中引入scss文件
    
  
        css: [
            'element-ui/lib/theme-chalk/index.css',
            {
                src: '@/assets/css/main.scss',
                lang: 'scss'
            }
        ],

    //

5. nuxt - 路由

1. 基础路由
2. 动态路由
3. 路由传参
4. 嵌套路由

6. nuxt-视图

7. nuxt - 异步数据

8. 资源文件

9. 插件

10. 模块

11. vuex状态树

12. 命令和部署

1. 命令

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

2. 部署

• 服务器部署
  $ nuxt build || $ nuxt start
• 静态站点部署
  $ npm run generator