vue引入全局less实现全局变量的控制

1.设置全局样式变量的好处：

• 方便页面样式、风格尽量统一，便于多人合作开发
• 方便统一管理
• 减少重复工作

2.以less为例（sass等同原理）

安装 sass-resources-loader 依赖：

cnpm install sass-resources-loader --save-dev

1.vue-cli2搭建的项目（1）

找到build文件夹下面的utils.js
exports.cssLoaders = function (options) {}中加入：
path.resolve(__dirname, ‘…/src/assets/styles/common.less’) //具体自己的路径
return{} 中修改：
less: generateLoaders(‘less’) 改为 less: lessResourceLoader()

2.vue-cli2搭建的项目（2）

同样找到其中的return的内容，less: generateLoaders(‘less’)改为：
less: generateLoaders(‘less’).concat({
loader: ‘sass-resources-loader’,
options: {
resources: path.resolve(__dirname, ‘…/src/assets/styles/common.less’)
}
})

3.vue-cli3、vue-cli4

搭建的项目需要自己在根目录下创建vue.config.js，直接写需要修改的配置即可：

module.exports = {
// 加载less加载器，路径：./public/css/common.less
chainWebpack: config => {
const oneOfsMap = config.module.rule(‘less’).oneOfs.store
oneOfsMap.forEach(item => {
item
.use(‘sass-resources-loader’)
.loader(‘sass-resources-loader’)
.options({
// Provide path to the file with resources
resources: ‘./public/css/common.less’,
// Or array of paths
// resources: [’./path/to/vars.scss’, ‘./path/to/mixins.scss’]
})
.end()
})
}
}

3.vue-cli2和vue-cli3的区别

• vue-cli3是基于webpack4打造，vue-cli2是基于webpack3
• vue-cli3的设计原则是“0配置”，移除（隐藏）配置文件build和config等目录
• vue-cli3提供了vue ui 命令，提供了可视化配置
• vue-cli3移除了static文件夹，新增了public文件夹，并且将index.html移动到public中
• 2.0启动npm run dev，3.0启动npm run serve

4.vue-cli3和vue-cli4的区别

vue-cli3和vue-cli4的区别

5.vue-cli3配置项目的三种办法

1.根目录下创建vue.config.js

module.exports = {}

2.运行 vue ui，然后打开浏览器进行可视化配置

3.直接在依赖中找到并修改

node_modules@vue\cli-service\webpack.config.js
node_modules@vue\cli-service\lib\Service.js

6.分清vue版本和vue-cli版本

1.cmd中 vue -V 查看的是vue-cli的版本（2、3、4），vue-cli2、vue-cli3可以创建vue2项目；vue-cli4可以创建vue2、vue3项目。
2.查看vue版本需要在package包中查看，或者在vue所在目录进行cmd，输入 npm list vue 查看