vue-cli 配置

运行

• 项目的根目录（下面包含package.json ）
• 安装依赖 cnpm install
• 运行 npm run serve

全局CLI配置 vue.config.js

• 项目的 (跟package.json 同级的) 根目录中存在这个文件会被 @vue/cli-service 自动加载。
• 配置端口号，代理服务器

module.exports = {
    outputDir: 'dist',
    /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
    assetsDir: 'assets',
    /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
    productionSourceMap: false,
    /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
    filenameHashing: false,
    /* 代码保存时进行eslint检测 */
    lintOnSave: true,
    /* webpack-dev-server 相关配置 */
    devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: 'localhost',
        port: 8086,
        https: false,
        hotOnly: false,
        /* 使用代理 */
        proxy: {
            '/api': {
                ws: false, // proxy websockets
                /* 目标代理服务器地址 */
                target: 'http://localhost:8081',
                /* 允许跨域 */
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                } // 真正访问的时候去掉/api
            }
        }
    }
}

main.js 入口文件配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN'
import axios from 'axios'

// 加载全局的css
import './assets/css/global.css'

// 导入 NProgress 包对应的JS和CSS 进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 生产环境时自动设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = (process.env.NODE_ENV !== 'production')
Vue.use(ElementUI, { locale })
// 把elementui的消息挂载到Vue原型上
Vue.prototype.$message = ElementUI.Message
Vue.prototype.$confirm = ElementUI.MessageBox.confirm

// 配置请求的跟路径
axios.defaults.baseURL = 'http://127.0.0.1:8888'
// 在 request 拦截器中，展示进度条 NProgress.start()
axios.interceptors.request.use(config => {
  // console.log(config)
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})
// 在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})
// 将axios 挂载到Vue的原型上，可以通过this.axios 发起请求
Vue.prototype.axios = axios

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

全局css global.css

/* 全局样式表 */
html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
  min-width: 1366px;
}

.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}

.el-card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}

.el-table {
  margin-top: 15px;
  font-size: 12px;
}

.el-pagination {
  margin-top: 15px;
}

.el-steps {
  margin: 15px 0;
}

.el-step__title {
  font-size: 13px;
}

.ql-editor {
  min-height: 300px;
}

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style lang="less">

</style>

路由

• 创建的router.js 或者用脚手架开始导入的vue-router依赖是创建的router/index.js

import Vue from 'vue'
import Router from 'vue-router'

// import Login from './components/Login.vue'
// 使用路由懒加载
const Login = () => import('./components/Login.vue')

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    {
      path: '/home',
      component: Home,
      redirect: '/welcome',
      children: [
        { path: '/welcome', component: Welcome },
        { path: '/users', component: Users },
      ]
    }
  ]
})

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  //     next()  放行    next('/login')  强制跳转
  if (to.path === '/login') return next()
  // 获取token 判断是否登录 
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login')
  next()
})

export default router

使用ESLint自定义校验规则

• 根目录下的.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    /*
    	命名函数要求函数名和 function 关键字之间有空格，但是匿名函数要求不加空格。
    	规则旨在强制函数括号之前的空格的一致性，因此，当空格值不匹配指定首选参数时，该规则将发出警告。
    	等价与
    	"space-before-function-paren": ["error", {
        "anonymous": "always", // 针对匿名函数表达式 (比如 function () {})。
        "named": "always", // 针对命名的函数表达式 (比如 function foo () {})。
        "asyncArrow": "always" // asyncArrow 针对异步的箭头函数表达式 (比如 async () => {})。
   		 }],
   		 选项可以设置为 "always"、"never" 或 "ignore"。默认为 "always"。
    */
    'eslint space-before-function-paren': ["error", "never"]
    
  }

axios 工具类

import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8080'
import { Loading,Message } from 'element-ui'
export default {
  get(url,callback,params = {}) {
    const loading = Loading.service({
      lock: true,
      text: '数据加载中',
      spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 255, 0.7)'
    })
    axios.get(url,{
      params: params
    }).then(response => {
      if(response.data.code === 200) {
        callback(response.data)
      } else {
        Message.error(response.data.message)
      }
    }).catch(err => {
        Message.error(err)
    }).finally(() => {
      loading.close()
    })
  },
  post(url,callback,params = {}) {
    const formData = new FormData()
    for(let key in params) {
      formData.append(key,params[key])
    }
    const loading = Loading.service({
      lock: true,
      text: '数据提交中',
      spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 255, 0.7)'
    })
    setTimeout(() => {
      loading.close()
    },5000)
    axios.post(url,formData)
     .then(response => {
        if(response.data.code === 200) {
          Message.success(response.data.message)
        } else {
          Message.error(response.data.message)
        }
        callback(response.data)
     }).catch(err => {
        Message.error(err)
    }).finally(() => {
        loading.close()
    })
  }
}
// 使用
 this.axios.get('/user/list',response => {
        this.result.tableData = response.obj.records
        this.result.pages = response.obj.pages
      },this.query)