搭建vue框架(二)：项目配置

使WebStorm识别路径别名

使用WebStorm时，别名@符号无法识别，ctrl+鼠标左键无法跳转

解决方法

使WebStorm跳转关联ElementUI

使用WebStorm时，ctrl+鼠标左键无法从标签跳转到Eelment内部

解决方法： 添加element库

安装ElementUI

npm i element-ui -S

main.js中使用

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
// import './assets/css/theme-green/index.css'; // 浅绿色主题

Vue.use(ElementUI)

安装babel

ie9和一些低版本的高级浏览器对es6新语法并不支持
使用babel可以解决

npm i babel-polyfill -D

// main.js中引入
import 'babel-polyfill';

禁用ESLint

在vue.config.js中配置 (重启生效)
配置后，还是会检查，会有红线，但是不影响启动

module.exports = {
  lintOnSave: false 
}

配置ESLint规则

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    semi: ['error', 'always'], // 强制有分号，没有就报错
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
};