vue全局配置，引入全局方法样式、按需加载elementui

一、全局引入css样式

// 文件目录：
/src/assets/styles/reset.less
/src/assets/styles/common.less
// 引用：app.vue
<style  scoped>
    @import '~@/assets/styles/reset.less';
    @import '~@/assets/styles/common.less';
</style>

二、全局引入公共变量

• cssLoaders中新增lessResourceLoader函数
• 修改return中less: generateLoaders('less')改为less: lessResourceLoader()
• 将全局less文件引入resources参数中

// 文件目录
/src/assets/styles/variables.less

// 配置
目录：/build/utils.js
function lessResourceLoader(){
    var loaders = [
        cssLoader,
        'less-loader',
        {
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    // 配置全局公共变量
                    path.resolve(__dirname, '../src/assets/styles/variables.less')
                ]
            }
        }
    ];
    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
        })
    } else {
        return ['vue-style-loader'].concat(loaders)
    }
 }

三、全局引入公共方法(工具方法)

注意：(export default和export的区别)

方式一：对象方式统一抛出，全局统一引用，全局使用

// 目录：/src/utils/commonUtils.js
const commonUtils = {
    CheckPositiveNumber：CheckPositiveNumber,
    CheckPositiveDecimalTwo:CheckPositiveDecimalTwo,
    CheckPhoneNumber:CheckPhoneNumber,
    CheckIDCard:CheckIDCard
}
export default commonUtils


// main.js引入
import commonUtils from '@/utils/commonUtils'
Vue.prototype.$commonUtils = commonUtils

// 使用
this.$commonUtils.xxx

方式二：按函数抛出，按需引用

// 目录：/src/utils/commonUtils.js
export function CheckPositiveNumber(){
    ...
}
export function CheckPositiveDecimalTwo(){
    ...
}

// 组件中按需加载
import {CheckPositiveNumber,CheckPositiveDecimalTwo} from '@/utils/commonUtils'

四、element-ui按需引入

方法一：第三方插件，babel-plugin-component

4.1.1 安装插件

npm install babel-plugin-component -D

4.1.2 配置插件,更改.babelrc

"plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

4.1.3 src中新建elemenet文件夹、index.js,按需导入所需组件

// 导入自己需要的组件
import { Select, Option, OptionGroup, Input, Tree, Dialog, Row, Col } from 'element-ui'
const element = {
  install: function (Vue) {
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(OptionGroup)
    Vue.use(Input)
    Vue.use(Tree)
    Vue.use(Dialog)
    Vue.use(Row)
    Vue.use(Col)
  }
}
export default element

4.1.4 main.js引用样式及按需导出的element

import 'element-ui/lib/theme-chalk/index.css'
import element from './element/index'
Vue.use(element)

注意：Vue.use() 方法的话，则该方法默认会调用 install 方法

方法二：main.js中直接引用

import 'element-ui/lib/theme-chalk/index.css'
import { Dialog, Select, Option, OptionGroup, Input, Tree, Row, Col } from 'element-ui'
Vue.use(Select)
Vue.use(Option)
Vue.use(OptionGroup)
Vue.use(Input)
Vue.use(Tree)
Vue.use(Dialog)
Vue.use(Row)
Vue.use(Col)

注意：Dialog等要使用小写或者Vue.component(Dialog)