modules: ['@nuxtjs/style-resources'],
build: {
styleResources: {
less: ['assets/less/_theme.less','assets/less/_mixins.less']
}
}
axios篇
使用nuxt提供的axios插件,没有安装的时候安装下npm install @nuxtjs/axios
在nuxt.config.js中进行配置
plugins: ['@/plugins/axios',
{src: '@/plugins/common.js', ssr: false}
],modules: ['@nuxtjs/axios',]
创建 plugins/axios.js 并定义axios的拦截器,定义请求的各个阶段需要进行的处理
export default function({ $axios, redirect }) {//request interceptor
$axios.interceptors.request.use(
config=>{//do something before request is sent
returnconfig
},
error=>{//do something with request error
returnPromise.reject(error)
}
)
$axios.onRequest(config=>{
console.log('Making request to ' +config.url)
})//response interceptor
$axios.interceptors.response.use(/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code*/response=>{
const res=response.dataif (res.code === 20000) {returnres
}else{
redirect('/404')//if the custom code is not 200, it is judged as an error.
}return Promise.reject(new Error(res.msg || 'Error'))
},
error=>{
console.log('err' + error) //for debug
returnPromise.reject(error)
}
)
$axios.onError(error=>{
const code= parseInt(error.response &&error.response.status)if (code === 400) {
redirect('/404')
}else if (code === 500) {
redirect('/500')
}
})
}
创建 libs/request.js 并封装get,post等请求方法
import axios from 'axios'import { Modal, Message } from'iview'
/**
* 封装get方法
* @param url
* @param params
* @returns {Promise}*/exportfunction get (url, params ={}) {
params.t= newDate().getTime()return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
})
.then(response=>{
resolve(response.data)
})
.catch(err =>{
reject(err)
})
})
}/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}*/exportfunction post (url, data ={}) {return new Promise((resolve, reject) =>{
axios.post(url, data)
.then(response=>{
resolve(response.data)
}, err=>{
reject(err)
})
.catch(err =>{
reject(err)
})
})
}/**
* 封装delete方法
* @param url
* @param params
* @param confirm 是否有确认弹框
* @returns {Promise}*/exportfunction doDelete (url, params = {}, confirm = true) {return new Promise((resolve, reject) =>{if(confirm) {
Modal.confirm({
title:'提示',
content:'
此操作将删除所选数据, 是否继续?
',onOk: ()=>{
axios.delete(url, {
params: params
})
.then(response=>{
resolve(response.data)
})
.catch(err =>{
reject(err)
})
},
onCancel: ()=>{
Message.info('已取消删除')
}
})
}else{
axios.delete(url, {
params: params
})
.then(response=>{
resolve(response.data)
})
.catch(err =>{
reject(err)
})
}
})
}/**
* 封装deleteOne方法
* @param url
* @param id
* @param confirm 是否有确认弹框
* @returns {Promise}*/exportfunction deleteOne (url, id, confirm = true) {return new Promise((resolve, reject) =>{
let newUrl
let data= null
if (typeof id === 'object') {
newUrl=url
data=id
}else if (typeof id === 'string' || typeof id === 'number') {
newUrl= url + '/' +id
}if(confirm) {
Modal.confirm({
title:'提示',
content:'
此操作将永久删除该条数据, 是否继续?
',onOk: ()=>{
axios.delete(newUrl, {data: data})
.then(response=>{
resolve(response.data)
})
.catch(err =>{
reject(err)
})
},
onCancel: ()=>{
Message.info('已取消删除')
}
})
}else{
axios.delete(newUrl, {data: data})
.then(response=>{
resolve(response.data)
})
.catch(err =>{
reject(err)
})
}
})
}/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}*/exportfunction patch (url, data ={}) {return new Promise((resolve, reject) =>{
axios.patch(url, data)
.then(response=>{
resolve(response.data)
}, err=>{
reject(err)
})
.catch(err =>{
reject(err)
})
})
}/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}*/exportfunction put (url, data ={}) {return new Promise((resolve, reject) =>{
axios.put(url, data)
.then(response=>{
resolve(response.data)
}, err=>{
reject(err)
})
.catch(err =>{
reject(err)
})
})
}
创建 plugins/common.js 并定义全局变量,接下来就可以用this.$get,this.$post访问了
import Vue from 'vue'import {post, get, doDelete, deleteOne, put} from'@/libs/request'let commonConfig={
install (Vue) {//定义全局变量
Vue.prototype.$post =post
Vue.prototype.$get=get
Vue.prototype.$delete =doDelete
Vue.prototype.$deleteOne=deleteOne
Vue.prototype.$put=put
Vue.prototype.$Bus= newVue()
}
}
Vue.use(commonConfig)
iview主题配置篇
创建 plugins/iview-ui.less,其中添加需要修改的主题
@import '~iview/src/styles/index.less';
@primary-color: #333;
@table-thead-bg: #fff;
@table-td-hover-bg: #F7F7FA;
@table-td-highlight-bg: #F7F7FA;
@btn-border-radius: 2px;
@border-radius-base: 2px;
@date-picker-cell-hover-bg: #F7F7FA;
创建 plugins/iview.js中引入主题
import Vue from 'vue'import iView from'iview'import'./iview-ui.less'
在nuxt.config.js的build中配置并允许在less中编写js文件
plugins: [
'@/plugins/iview'
],
build: {
loaders: {
less: {
javascriptEnabled: true
}
}
}
eslint配置篇
npm install --save-dev babel-eslint eslint eslint-config-standard eslint-plugin-html eslint-plugin-promise eslint-plugin-standard eslint-plugin-import eslint-plugin-node
npm install eslint-plugin-vue --save-dev
npm install eslint-plugin-prettier --save-dev
npm install @nuxtjs/eslint-config --save-dev
npm install eslint-loader --save-dev
nuxt.config.js中build中添加如下配置
/*** Run ESLint on save*/extend (config, { isDev, isClient }) {if (isDev &&isClient) {
config.module.rules.push({
enforce:'pre',
test:/\.(js|vue)$/,
loader:'eslint-loader',
exclude:/(node_modules)/})
}
}
新建.eslintrc.js文件,其中配置如下
module.exports ={
root:true,
env: {
browser:true,
node:true},
parserOptions: {
parser:'babel-eslint'},
extends: [//https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
//consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',//https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'],//required to lint *.vue files
plugins: ['vue'],
globals: {'WeixinJSBridge': true},//add your custom rules here
rules: {"semi": [2, "never"],"no-console": "off","vue/max-attributes-per-line": "off",//allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',//iview
'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false}]
}
}
package.json中添加如下配置:
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .","lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .","precommit": "npm run lint"
router配置篇
路由的编写也是写在权限控制的中间件middleware文件夹中
import { LoadingBar } from 'iview'exportdefault function({ store, redirect }) {store.app.router.beforeEach((to, from)=>{
LoadingBar.start()
})
store.app.router.afterEach((to, from)=>{
LoadingBar.finish()
window.scrollTo(0, 0)
})
}