vue中引入全局方法样式

全局引入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'