vue全局配置（引入全局方法樣式、按需加載elementui）

一、全局引入css樣式

// 文件目錄：
/src/assets/styles/reset.less
/src/assets/styles/common.less
// 引用：app.vue
<style lang="less" 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)