nuxt 项目安装及环境配置

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: '<p>此操作将删除所选数据, 是否继续?</p>',
        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: '<p>此操作将永久删除该条数据, 是否继续?</p>',
        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)
  })
}