@vue/cli 4.4.5 创建项目遇到的问题

1. error:Import in body of module; reorder to top import/first

  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'
  Vue.use(ElementUI)
  import '@/assets/scss/all.scss'

问题原因：模块的引入没有放在顶部

解决办法：引入all.scss的代码，放在Vue.use(ElementUI)之前

2. Unexpected tab character

问题原因：vue-cli创建项目时，选择了eslint，默认不支持空格

解决办法：

  "eslintConfig": {
    "rules": {
      "no-tabs":"off"
  	}
  },

3. 项目中重置elementui，按钮样式(要求所有状态的按钮样式一致)

  .btnColor,.btnColor:hover,.btnColor:active,.btnColor:focus{
    border:none;
    background:#4888F4;
    color:#fff;
    border-radius: 2px;
  }

4. error:A space is required after ','

错误原因：@vue/cli创建项目时，选择了保存时就行eslint规范校验，而编码时不符合eslint规范

  chartColorList: ['#1890FF','#6236FF','#44D7B6','#15D9FF','#FA6400','#F7B500']

解决办法：在根目录新建vue.config.js,添加如下代码

  module.exports = {
    lintOnSave: false
  }

5. 全局引入scss变量

安装：

cnpm install sass-resources-loader -S

配置：

 css: {
    loaderOptions: {
      scss: {
        prependData: '@import "@/assets/scss/variable.scss";'
      }
    }
 }

重启项目后生效！