全局安装nuxt_nuxt 项目安装及环境配置

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)

})

}