01 配置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',
    'space-before-function-paren': 'off', // 函数定义时括号前面不要有空格
    'no-unused-vars': 'off', //声明未引用
    'vue/multi-word-component-names': "off", //关闭名称校验
    indent: ['off', 2]
  }
}

然后下载 Prettier -Code formatter 插件

在src根目录下面创建 .prettierrc文件 添加如下代码

{
  "useTabs": false,
  "singleQuote": true,
  "semi": false,
  "trailingComma": "none",
  "bracketSpacing": true
}

重新启动编辑器 右键格式化代码即可

组件命名问题 单字母命名报错 必须复写形式

解决:

找到 .eslintrc.js 文件在 rules 里面加上这么一句
'vue/multi-word-component-names': "off" // 关闭名称校验

02 Vue 连接Node本地服务器产生跨域 解决方案

解决方案: Vue中使用axios跨域

1. 在Vue文件中 在项目根目录的 vue.config.js 文件中赋值粘贴如下代码 如果没有vue.config.js文件就创建一个

// 配置跨域请求
module.exports = {
  devServer: {
    port: 8000,  // 项目运行的端口号 就是你现在正在写的这个项目 通过 npm run serve 有个蓝色的标题 
    host: '127.0.0.1',
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3301',// 后端接口 就是你向服务器请求的地址
        changeOrigin: true, // 开启跨域 true为开启
        pathRewrite: {
          '/api': ''
        }
      }
    }
  }
}

2.Vue项目中 在根目录mian.js下面添加如下代码

import Vue from 'vue'
import App from './App.vue'

import axios from 'axios' // 引入axios
Vue.prototype.$axios = axios // Vue原型上添加一个$axios
axios.defaults.baseURL = '/api' // 解决跨域的关键代码

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

3.封装网路请求request代码

import axios from 'axios'

export function request(config) {
  const instance = axios.create({
    baseURL: '/api',
    timeout: 5000
  })
  // 设置拦截器，登录时需要发送请求头来验证是否登录成功
  instance.interceptors.request.use(config => {
    return config
  })
  // 设置响应拦截器，服务器响应钱做出其他功能
  instance.interceptors.response.use(res => {
    return res.data
  })
  return instance(config)
}

配置完成跨域 重启Vue项目运行代码

4 template下面有条蓝色波浪线

然后重新运行项目就可以了

5 HR项目打包编译失败 解决办法如下

npm run preview -- --report

错误 解决图解

6 自动注入css文件 每次手动导入麻烦 2）完成自动注入公用变量和混入

遇到问题：  每次使用公用的变量和mixin的时候需要单独引入到文件中。

解决方法：  使用vuecli的style-resoures-loader插件来完成自动注入到每个less文件或者vue组件中style标签中。

• 在当前项目下执行一下命令vue add style-resources-loader，添加一个vuecli的插件

• 安装完毕后会在vue.config.js中自动添加配置，如下：

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: []
    }
  }
}

• 把你需要注入的文件配置一下后，重启服务即可。

+const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
+        path.join(__dirname, './src/assets/styles/variables.less'),
+        path.join(__dirname, './src/assets/styles/mixins.less')
      ]
    }
  }
}