nuxt简介
1. 利用nuxt下载脚手架
- 在指定磁盘黑窗口，命令下载脚手架
npx create-nuxt-app dada-resources
- 选项（全不选）
- 如果是vue-cli脚手架转nuxt，可以自定义路由（本身nuxt是不需要自定义路由的），此步骤
（3-5）是可以忽略的
cnpm install @nuxtjs/router -S
- 在配置
nuxt.config.js文件中modules中加入
modules: [
'@nuxtjs/router'
],
- 修改store中的
router.js配置
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router)
import Index from '@/pages/index'
const routes = [
{
path : '/',
component : Index
},
]
export function createRouter() {
return new Router({
mode: "history",
routes,
})
}
- 引入elementui
cnpm i element-ui -S
- 创建
plugins文件夹，里面加入elementuijs
import Vue from 'vue';
import ElementUI from 'element-ui';
Vue.use(ElementUI);
- 在配置
nuxt.config.js文件中modules中加入
css: [
'~/static/style.css',
'element-ui/lib/theme-chalk/index.css',
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
'~/plugins/element.js'
],
- 安装axios和代理跨域
cnpm install @nuxtjs/axios @nuxtjs/proxy -S
- nuxt配置文件配置
nuxt.config.js
// 三方组件引入
modules: [
'@nuxtjs/router',
'@nuxtjs/axios',
'@nuxtjs/proxy',
],
- 设置跨域和代理
nuxt.config.js
//设置代理
axios: {
//是否可以跨域
proxy: true,
// baseUr: process.env._ENV === 'production' ? '' : '',
},
proxy: {
'/api':{
target : 'http://localhost:8001',
}
},
- axios的二次封装
plugins目录
export default ({ $axios, app, store }, inject) => {
//请求拦截
$axios.interceptors.request.use(
(config) => {
/** 如果接口需要携带请求头可以在此设置
const baseHeaders = getAccessApiHeaders(app)
config.headers = {
...baseHeaders,
...config.headers
}
*/
if (
config.method === 'post' ||
config.method === 'put' ||
config.method === 'delete'
) {
config.data = {
...config.data
}
} else if (config.method === 'get') {
config.params = {
...config.params
}
}
return config
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error)
}
)
//相应拦截
$axios.interceptors.response.use(
(response) => {
//返回结果
return response.data
},
(err) => {
const status = err.response.status
//其他错误情况统一处理
const errorMsg = {
code: -1,
msg: '服务器内部错误',
data: {
status: status,
message: err.response.statusText
}
}
//返回数据
return errorMsg
}
)
//请求Api接口
inject('requestApi', (url, data = {}, method = 'GET') => {
if (method == 'GET') {
return $axios.get(url, {
params: data
})
} else {
return $axios.post(url, data)
}
})
}
- 编写api文件
export default ({$axios }, inject) => {
inject('getTest',function () {
return $axios({
url: '/link/getAllLink',
method : 'get'
})
})
//箭头函数
inject('getTests',(id) => $axios({
url: '/link/getAllLink',
method : 'get',
params: {id}
}))
}
- 页面测试（页面级请求用
asyncData，组件用用fetch）
export default {
name: 'IndexPage',
data() {
return {
dataLists:[],
};
},
//服务端请求接口
async asyncData(app) {
let data = await app.$getTest();
let dataLists = data.data
console.log(dataLists)
return {dataLists}
},
}
export default {
name: "Header.vue",
data() {
return {
dataList:[],
};
},
//组件段渲染
async fetch() {
let dataList = await this.$getTest();
console.log(dataList)
this.dataList = dataList.data
},
}
2. 关于token的使用
- 下载安装token
cnpm install cookie-universal-nuxt -S
- 在
nuxt.config.js中配置cookie
// 三方组件引入
modules: [
'cookie-universal-nuxt',
],
- 他的操作支持（伪代码）
this.$cookie.get(key)
this.$cookie.set(key,value)
this.$cookie.romove(key)
- 在
store目录下创建index，和用户的登陆后的基本信息，来维护Vuex
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import user from './moduler/user';
const store =()=> new Vuex.Store({
modules: {
user,
}
})
export default store;
export default {
state: {
userInfo: {
avatar: undefined,
nickName: undefined,
id: undefined,
},
token: undefined,
},
getters: {
avatar: state => {
console.log("getters用户信息：",state.userInfo)
return state.userInfo.avatar
},
token: state => {
console.log("getters用户Token：",state.token)
return state.token
}
},
mutations:{
setToken(state,token) {
console.log("mutations用户Token：",token)
if (token) {
//存储在vuex中
state.token = token;
//存储在浏览器中(时长7天)
this.$cookies.set('token',token,{path:'/',maxAge: 60 *60 *24 *7})
// this.$auth.$storage.setLocalStorage('token',token)
}
},
saveUserInfo(state,payload){
console.log("mutations用户信息：",payload)
if (payload) {
//存储在vuex中
state.userInfo = payload
//存储在浏览器中(时长7天)
this.$cookies.set('userInfo',JSON.stringify(payload), {path:'/',maxAge: 60 *60 *24 *7})
// this.$auth.$storage.setLocalStorage('userInfo',JSON.stringify(payload))
}
},
//退出清空
removeToken (state) {
state.userInfo.avatar = undefined
state.userInfo.nickName = undefined
state.userInfo.id = undefined
state.token = undefined
console.log("退出操作用户信息：",state.userInfo)
console.log("退出操作用户Token：",state.token)
//删除浏览器中token
this.$cookies.remove('token')
this.$cookies.remove('userInfo')
},
}
}
- 创建服务端文件夹
middleware创建一个auth.js的文件（其目的就是为了让客户端和服务端共享数据）
/**
* 用户登录相关(服务端)，意思就是服务端需要拿到token
* @param app 里面的东西 是服务端和客户端 共有的
* @param store
* @param route
* @param redirect
*/
export default ({app, store, route, redirect}) => {
let token = app.$cookies.get('token')
let userInfo = app.$cookies.get('userInfo')
console.log('auth...',token)
console.log('auth...',userInfo)
app.store.commit('setToken',token)
app.store.commit('saveUserInfo',userInfo)
}
- 在nuxt.config.js配置文件中加入自定义的数据
- 在登录页面中使用vuex的数据据
- 在自定义封装的axios中加入token的请求头信息
3.项目服务器部署
- 在本地执行
cnpm run build
- 将这四个文件放到服务器中
- 在服务器中执行(不清楚什么情况
cnpm镜像下载不全)
npm install
- 在服务器中启动项目
npm run start
- 后台启动(需要下载pm2
- 格式：
pm2 start cnpm --name "自定义名字" -- run start
pm2 start cnpm --name "dada-resources" -- run start
- 如遇到找不到镜像的情况，可以单独下载
cnpm install xxx
