vue导入全局css_vue全局配置（引入全局方法样式、按需加载elementui）

vue导⼊全局css_vue全局配置（引⼊全局⽅法样式、按需加

载elementui）

⼀、全局引⼊css样式

// ⽂件⽬录：

/src/asts/styles/

/src/asts/styles/

// 引⽤：

@import '~@/asts/styles/';

@import '~@/asts/styles/';

⼆、全局引⼊公共变量

cssLoaders中新增lessResourceLoader函数

修改return中less: generateLoaders('less')改为less: lessResourceLoader()

将全局less⽂件引⼊resources参数中

// ⽂件⽬录

/src/asts/styles/

// 配置

⽬录：/build/

function lessResourceLoader(){

var loaders = [

cssLoader,

'less-loader',

{

loader: 'sass-resources-loader',

options: {

resources: [

// 配置全局公共变量

e(__dirname, '../src/asts/styles/')

]

}

}

];

if (t) {

return t({

u: loaders,

fallback: 'vue-style-loader'

})

} el {

return ['vue-style-loader'].concat兵马俑的来历故事 (loaders)

}

}

三、全局引⼊公共⽅法(⼯具⽅法)

注意：(export d藐视的近义词 efault和export的区别)

⽅式⼀：对象⽅式统⼀抛出，全局统⼀引⽤，全局使⽤

// ⽬录：/src/utils/

const commonUtils = {

CheckPositiveNumber：CheckPositiveNumber,

CheckPositiveDecimalTwo:CheckPositiveDecimalT铁路标志 wo,

CheckPhoneNumber:CheckPhoneNumber,

C转正心得体会 heckIDCard:CheckIDCard

}

export default commonUtils

// 引⼊

import commonUtils from '@/utils/commonUtils'

ype.$commonUtils = commonUtils

// 使⽤

this.$

⽅式⼆：按函数抛出，按需引⽤

// ⽬录：/src/utils/

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",

{

"libraryNword打钩 ame": "e多宝鱼怎么做才好吃 lement-ui",

"styleLibraryName": "theme-chalk"

}

]

]

4.1.3 src中新建el适合室内的植物 emenet⽂件夹、,按需导⼊所需组件

// 导⼊⾃⼰需要的组件

import { Select, Option, OptionGroup, Input, Tree, Dialog, Row, Col } from 'element-ui'

const element = {

install: function (Vue) {

(Select)

(Option)

(OptionGroup)

(Input)

(Tree)

(Di简笔画凤凰 alog)

(Row)

(Col)

}

}

export default element

4.1.4 引⽤样式及按需导出的elemen番茄鱼片的做法 t

import 'element-ui/lib/theme-chalk/'

import element from './element/index'

(element)

注意：() ⽅法的话，则该⽅法默认会调⽤ install ⽅法

⽅法⼆：中直接引⽤

import 'element-ui/lib/theme-chalk/'

import { Dialog, Select, Option, OptionGroup, Input, Tree, Row, Col } from 'element-ui'

(Select)

(Option)

(OptionGroup)

(Input)

(Tree)

(Dialog)

(R创新营销 ow)

(Col)

注意：Dialog等要使⽤⼩写或者ent(Dialog)