nuxt.js
Nuxt.js是一个基于Vue.js的通用应用框架
通过对客户端/服务端基础结构的抽象组织，Nuxt.js主要关注的是应用的UI渲染
1.nuxt不仅仅用于服务端渲染也可以用于SPA应用开发
2.利用nuxt提供的基础项目结构、异步数据加载、中间件支持、布局等特性可大幅度提高开发效率
3.nuxt可用于网站静态化
一、nuxt.js特性
- 基于Vue.js
- 自动代码分层
- 服务端渲染
- 强大的路由功能，支持异步数据
- 静态文件服务
- ES6/ES7语法支持
- 打包和压缩js和css
- HTML头部标签管理
- 本地开发支持热加载
- 集成ESLint
- 支持各种样式预处理：SASS、LESS、Stylus等等
- 支持HTTP/2推送
二、基本使用
创建新项目
npx create-nuxt-app 项目名称
选项:
1.Project name 项目名称
2.Project description 项目描述
3.Author name 作者名
4.Choose the package manager 包管理器
5.Choose UI framework UI框架(默认无)
6.Choose custom server framework 服务端框架(Nuxt默认服务器)
7.Choose Nuxt.js modules 选择nuxt.js模块
8.Choose linting tools 选择规范工具
9.Choose test framework 选择测试框架
10.Choose rendering mode 选择Nuxt模式（Universal or SPA）
11.Choose development tools 选择开发工具
项目结构文件
└─my-nuxt-demo
├─.nuxt // Nuxt自动生成，临时的用于编辑的文件，build
├─assets // 用于组织未编译的静态资源如LESS、SASS或JavaScript,对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中
├─components // 用于自己编写的Vue组件，比如日历组件、分页组件
├─layouts // 布局目录，用于组织应用的布局组件，不可更改⭐
├─middleware // 用于存放中间件
├─node_modules
├─pages // 用于组织应用的路由及视图,Nuxt.js根据该目录结构自动生成对应的路由配置，文件名不可更改⭐
├─plugins // 用于那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
├─static //用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。文件夹名不可更改。⭐
└─store // 用于组织应用的Vuex 状态管理。文件夹名不可更改。⭐
├─.editorconfig // 开发工具格式配置
├─.eslintrc.js // ESLint的配置文件，用于检查代码格式
├─.gitignore // 配置git忽略文件
├─nuxt.config.js // 用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。文件名不可更改。⭐
├─package-lock.json // npm自动生成，用于帮助package的统一设置的，yarn也有相同的操作
├─package.json // npm 包管理配置文件
├─README.md
三、路由
1.基本路由
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置
假设 pages 的目录结构如下
└─pages
├─index.vue
└─user
├─index.vue
├─one.vue
那么，Nuxt.js 自动生成的路由配置如下：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}
2.页面跳转
- 不要写成a标签，因为是重新获取一个新的页面，并不是SPA
<nuxt-link to="/users"></nuxt-link>组件式路由- this.$router.push({path:'/users'}) 编程式路由
- this.$router.push({name:'users'}) 命名式路由
3.动态路由
- 在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
- 获取动态参数{{$route.params.id}}
4.路由参数校验(validate)
Nuxt.js 可以让你在动态路由对应的页面组件中配置一个validate方法用于校验动态路由参数的有效性。该函数有一个布尔类型的返回值，如果返回true则表示校验通过，如果返回false则表示校验未通过。
<template>
<div>
<h2>这是{{$route.params.id}}号学生</h2>
</div>
</template>
<script>
export default {
data(){
return{
msg:''
}
},
validate(obj){
return /^\d+$/.test(obj.params.id)
}
}
</script>
5.嵌套路由
嵌套路由组件
目录结构
student
_id
index.vue
student.vue
student.vue
<template>
<div>
<h1>学生列表页</h1>
<ul>
<li v-for="item in studentList" :key="item.id">
<nuxt-link :to="`/student/${item.id}`">{{item.name}}</nuxt-link>
</li>
</ul>
<nuxt-child></nuxt-child>
</div>
</template>
四、layouts
1.创建layout
- 去layouts文件夹下面新建一个新的layout组件，例如teachers.vue，并在这个组件中添加组件，这样，所有和teachers相关的页面都会有公共的layout
- 给需要用到teachers.vue的组件添加layout属性，并指定需要使用的layout，例如：layout: 'teachers'
2.创建layout : error
layouts文件夹下面新建error.vue，error是关键字
3.新建一个组件
在components文件夹下面新建一个Header.vue组件 引入组件，注意路径的~符号，表示根目录 layout中也能使用组件
4.样式配置
nuxt.config.js中设置设置全局样式文件路径
五、ElementUI使用
-
下载npm i element-ui -S
-
在plugins文件夹下面，创建ElementUI.js文件
import Vue from 'vue' import ElementUI from 'element-ui' Vue.use(ElementUI) -
在nuxt.config.js中添加配置
ssr:true 表示这个插件只在服务端起作用
css: [ 'element-ui/lib/theme-chalk/index.css' ], plugins: [ {src: '~/plugins/ElementUI', ssr: true } ], build: { //防止element-ui多次打包 vendor: ['element-ui'] }
六、异步数据
1.nuxt中的钩子函数
在nuxt中，只有created和beforeCreate两个钩子函数能正常使用
在nuxt中发异步请求不能在created生命周期函数中发，因为它会在前端执行
2.asyncData
asyncData(context,callback){
//context上下文
//callabck有两个参数，第一个是错误对象，第二个是数据对象
return new Promise((resolve,reject)=>{
resolve({movieList:[{name:"aaaa"}]})
}).then(data=>{
callback(null,{movieList:data.movieList})
}).catch(err=>{
callback(err)
})
}
七、axios的使用
import axios from 'axios'
asyncData(context, callback) {
axios.get('http://localhost:3301/in_theaters')
.then(res => {
console.log(res);
callback(null, {list: res.data})
})
}
为防止重复打包，在nuxt.config.js中配置
module.exports = {
build: {
vendor: ['axios']
}
}
