babel篇

在package.json中添加--exec babel-node

如果需要编译es6，我们需要设置presets包含es2015，也就是预先加载es6编译的模块。

如果需要编译es7，我们需要设置presets包含stage-0，也就是预先加载es7编译的模块。

npm install babel-cli -g
npm install babel-core -g
npm i babel-preset-es2015
npm i babel-preset-stage-0

然后在.babelrc文件中加上，stage-0可以缺省

"presets": ["es2015","stage-0"]

公共样式(less)篇

npm i less
npm i less-loader
npm i @nuxtjs/style-resources --save

在nuxt.config.js中修改配置文件

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
return config
},
error => {
// do something with request error
return Promise.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.data
if (res.code === 20000) {
return res
} 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

  return Promise.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}
*/

export function get (url, params = {}) {
params.t = new Date().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}
*/

export function 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}
*/

export function 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}
*/

export function 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}
*/

export function 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}
*/

export function 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 = new Vue()
}
}
Vue.use(commonConfig)

参考链接:https://www.cnblogs.com/goloving/p/11374165.html

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'
export default function ({ store, redirect }) {
store.app.router.beforeEach((to, from) => {
LoadingBar.start()
})
store.app.router.afterEach((to, from) => {
LoadingBar.finish()
window.scrollTo(0, 0)
})
}