nuxt的初步了解

Nuxt.js的作用

在 node.js 上进一步封装，然后省去我们搭建服务端环境的步骤，只需要遵循这个库的一些规则就能轻松实现 SSR。

Nuxt.js优点

基于 Vue.js
自动代码分层
服务端渲染
ES6/ES7 语法支持
打包和压缩 JS 和 CSS
支持各种样式预处理器： SASS、LESS、 Stylus等等

安装流程

1、创建nuxt项目（确保安装了npm）

npx create-nuxt-app

2、他会让你进行一些选择

Project name  //项目名称
Project description  //项目描述
Use a custom server framework  //服务器框架
Use a custom UI framework  //UI框架
Use a custom test framework  //测试框架
Choose rendering mode  //nuxt模式
Author name //作者名称
Choose a package manager  // 包管理

3、运行项目

 npm run dev

Nuxt.js 会监听 pages 目录下的改变，添加新 page 的时候不需要重启服务

├── assets           //用于组织未编译的静态资源如 LESS、SASS 或 JavaScript
│   └── README.md
├── components       //用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性
├── layouts    //布局目录 layouts 用于组织应用的布局组件。若无额外配置，该目录不能被重命名。
│   ├── README.md
│   └── default.vue
├── middleware    //目录用于存放应用的中间件
│   └── README.md
├── nuxt.config.js  //nuxt 配置文件
├── pages           //放page页面，自动生产路由
│   ├── README.md
│   ├── index.vue
│ 
├── plugins    //用于组织那些需要在 根vue.js应用 实例化之前需要运行的 插件
│   ├── README.md
│   └── axios.js
├── server                
│   └── index.js           //服务配置
├── static           
│   ├── README.md     //存放静态文件，不被编译
│   ├── favicon.ico
│   ├── icon.png
│   └── sw.js
├── store                 //vuex状态
│   ├── README.md
│   ├── index.js
│   └── webLogin.js