# nuxt
文章目录
-
- 需要的环境
- 创建项目
- 路由
-
- 路由的配置
-
- 一级路由的配置
- 动态路由配置
- 多级路由创建
- 路由参数的传递
- 异步获取数据
-
- 异步读取数据示例
- Nuxt中keep-alive的使用
- 跨域配置
-
- 实际请求示例
- 异步配置
- 自定义loading
- vuex的配置及使用
-
- vuex的持久化 (cookies)
- vuex的持久化之sessionStorage(单用这种也可以实现)
- element-ui 的配置使用
- 配置页面的头信息
- 静态资源的处理
- nuxt 项目部署
项目参考模板
需要的环境
node
vue-cli
create-nuxt-app // cnpm i create-nuxt-app -g
创建项目
npx create-nuxt-app demo01 //项目名不能有大写字母
路由
路由的配置
默认将layout下的default.vue 作为 一级路由,page是具体的路由配置
一级路由的配置
在pages下新建一个user文件夹，文件夹下新建index.vue
等同于建立路由 /user
动态路由配置
在pages下新建一个user文件夹，文件夹下新建_id.vue
等同于建立路由 /user/:id
多级路由创建
在pages下新建一个admin文件夹，与admin文件夹同级新建admin.vue,在admin.vue中必须要有,再在admin文件夹下新建home文件夹，home文件夹下新建index.vue
等同于建立路由 /admin/home //但此时的admin.vue是一级路由组件
路由参数的传递
? 类的参数任何路由都可以传递
去用户登陆界面
在获取时
这是动态路由传参：{{$route.params.id}}
这是路由随便填写参：{{$route.query.username}}
异步获取数据
- 安装依赖
yarn add @nuxtjs/axios
- 配置
在nuxt.config.js中
modules: [
'@nuxtjs/axios'
],
异步读取数据示例
async asyncData({$axios}){ //必须在这儿解构
let data=await $axios({
url:
"https://m.maizuo.com/gateway?cityId=510100&pageNum=1&pageSize=3&type=1&k=7904682",
method: "get",
headers: {
"X-Client-Info":
'{"a":"3000","ch":"1002","v":"5.0.4","e":"1606962163804279870816257"}',
"X-Host": "mall.film-ticket.film.list",
},
})
return {
datalist:data.data.data.films //datalist 在data中定义
}
},
Nuxt中keep-alive的使用
layouts/default.vue
<nuxt keep-alive :keep-alive-props="{include: includeArr }"/>
<script>
export default {
data() {
return {
includeArr: [
'ServicerManageProjects',
'DataReportData',
]
}
}
}
</script>
include中放需要缓存页面的name，注意是组件的name，不是路由的name。所以在页面的export default中一定要写对应的name属性，如果没写的话就无法进行缓存了。
跨域配置
安装依赖
yarn add @nuxtjs/proxy
7.2在nuxt.config.js 中配置
axios:{
proxy:true, //开启跨域
// prefix:"/api" // 基础路径
},
proxy:{
'/api/': {
target: 'http://127.0.0.1:5000',
changeOrigin:true,
pathRewrite: {
'^/api' : ''
}
}
},
实际请求示例
//后端真实请求路径 http://127.0.0.1:5000/login
let data1=await $axios({
url:"/api/login",
method:"post",
data:{
username:"admin",
password:"admin"
}
})
return {
datalist:data.data.data.films,
userdata:data1.data.data
}
},
异步配置
- 在plugins下新建一个http.js
export default function ({ $axios, redirect, route, store }) {
$axios.defaults.timeout = 5000;
$axios.onRequest(config => {
//请求拦截
// config.headers.token = "123456"
return config
})
$axios.onResponse(res => {
//返回拦截
if (res.status !== 200) {
console.log("request----err")
}
return res.data
})
//对错误请求的处理
$axios.onError(err => {
return err
})
}
- 在nuxt.config.js中配置
plugins: [
{
src:'~/plugins/http',
ssr:true //开启后端渲染
}
],
自定义loading
在nuxt.config.js中添加
loading: '~/components/loading.vue', //与css等配置平级
在loading组件中写loading效果
vuex的配置及使用
vuex的持久化 (cookies)
- 安装依赖
yarn add cookie-universal-nuxt
- 配置
modules: [
'@nuxtjs/axios',
'cookie-universal-nuxt'
],
- 在登陆时保存状态 cooikies 长度<4000
async subLogin() {
let data = await this.$axios({
url: "/api/login",
method: "post",
data: {
username: "admin",
password: "admin",
},
});
let userdata = data.data;
//将user token信息存到cookies
this.$cookies.set("token", data.token);
//将user token信息存到vuex
this.$store.commit("settoken", data.token);
//将user信息 存到vuex
this.$store.commit("setuserdata", userdata);
this.$router.push("/");
},
- 在store下的index.js中
export const actions = {
// 这是cookie的勾子函数,在页面强制刷新时触发,context 是上下文
nuxtServerInit(store, context) {
let userdata = context.app.$cookies.get("userdata") || null
store.commit("setUserData", userdata)
}
}
- 在http.js中
export default function ({ $axios, redirect, route, store }) {
$axios.defaults.timeout = 5000;
$axios.onRequest(config => {
let url=route.path
let arr=['/user/login','/user/register']
if(arr.includes(url)){ // 不需要token
return config
}else{
config.headers.token=store.state.token
if(store.state.token){ // 请求时token存在
return config
}
// 没有token 被重定向到登陆页
redirect("/user/login")
}
})
$axios.onResponse(res => {
//返回拦截，对于特性的错误也要做路由的重定向
if (res.status !== 200) {
console.log("request----err")
}
return res.data
})
//对错误请求的处理
$axios.onError(err => {
return err
})
}
vuex的持久化之sessionStorage(单用这种也可以实现)
1.安装
yarn add vuex-persistedstate
2.配置
先在 plugins下新建 localStorage.js
import createPersistedState from 'vuex-persistedstate'
export default ({store}) => {
createPersistedState({
storage: sessionStorage,
})(store)}
在nuxt.plugins.js 中配置
plugins: [
{ src: '~/plugins/localStorage.js', ssr: false }
],
element-ui 的配置使用
- 安装依赖
yarn add element-ui
- nuxt.config.js中配置
css: [
"element-ui/lib/theme-chalk/index.css",
],
plugins: [
{
src:"~/plugins/element-ui",
ssr:true
}
],
build: {
transpile:[/^element-ui/]
}
- 在plugins下新建 element-ui.js 按需导入
import Vue from "vue"
import {Button,Form,FormItem,Input,Message} from "element-ui"
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.prototype.$message=Message
配置页面的头信息
- 在页面的data同级下head钩子函数中
head(){
return {
meta:[
{
name:"这是主页",content:"迎请，疫情"
}
]
}
},
- 在根目录下创建app.html 可以合并信息
<!DOCTYPE html>
<html {{HTML_ATTRS}}>
<head {{HEAD_ATTRS}}>
<meta name="jjjj">
{{HEAD}}
</head>
<body {{BODY_ATTRS}}>
{{APP}}
</body>
</html>
静态资源的处理
1.static下 打包时不会优化 绝对路径读取 / 代表static
2.assets下 会被框架做打包优化(压缩) 可以以相对路径读取
3. ~ 表示项目的根目录 (~assets/)
4. 链接外部资源，直接在app.html 中引入即可
5. src资源的动态绑定 使用
nuxt 项目部署
https://www.jianshu.com/p/bbe874c32f90
1.生成打包文件
npm run build
要先给自己设置跨域
2.在服务器启动服务端
要先打开对应的接口
3.将打包后的以下几个文件上传到服务器，重新安装依赖，npm start 即可
.nuxt
static
nuxt.config.js
package.json
( package-lock.json )
4.也可以使用pm2
pm2 start npm --name “nuxt_moban” – run start
如果 无法启动 需要安装
1、
npm install node-cmd --save;
2、根目录下新建startscript.js
const cmd=require(‘node-cmd’);
cmd.run(‘npm start’);
3、启动该脚本
pm2 start startscript.js