vue导入全局css_vue全局配置（引入全局方法样式、按需加载elementui）_weixin_39581099的博客-CSDN博客

一、全局引入css样式

// 文件目录：

/src/assets/styles/reset.less

/src/assets/styles/common.less

// 引用：app.vue

@import '~@/assets/styles/reset.less';

@import '~@/assets/styles/common.less';

二、全局引入公共变量

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)

原网址: 访问
创建于: 2021-08-15 18:18:11
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论