vue cli3.x 项目中引入 vux(一):手动配置
最近做的一个项目,是使用vux组件库开发的,使用的时候发现vux在使用的时候需要做一些相应的配置,记录如下:建议 node.js 版本在7.6.0以上。1、引入vux# npm install vux --save2、vux2必须配合vux-loader使用,所以需要引入vux-loader# npm install vux-loader --sava--dev...
·
最近做的一个项目,是使用vux组件库开发的,使用的时候发现vux在使用的时候需要做一些相应的配置,记录如下:
建议 node.js 版本在 7.6.0
以上。
1、引入vux
# npm install vux --save
2、vux2必须配合 vux-loader 使用,所以需要引入vux-loader
# npm install vux-loader --sava--dev
3、安装less-loader
# npm install less lessloader --sava--dev
4、安装 yaml-loader 以正确进行语言文件读取
# npm install yaml-loader --sava--dev
5、安装 vue loader,用于编译 .vue 文件,官方模板已经帮你配置好。
# npm install vue-loader --save-dev
6、在项目根目录创建vue.config.js进行相关配置
module.exports = {
// ...
// configureWebpack:
// 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中。
// 如果这个值是一个函数,则会接收被解析的配置作为参数。
configureWebpack: config => {
// vux2必须配合vux-loader使用
require('vux-loader').merge(config, {
options: {},
plugins: [{
name: 'vux-ui' // 配置babel-loader以正确编译 VUX 的js源码
},
{
name: 'duplicate-style' // 在构建后去除重复css代码(通过配置vux-loader实现)
},
{
name: 'less-theme', // 主题颜色配置: 主题文件不能引入其他less文件,只能为简单变量列表。
path: 'src/style/theme-expand.less'
}
]
})
}
// ...
}
7、配置需适配的浏览器
(1)Vue 官方模板的设置是 last 2 versions,可能会导致你在某些 Android 机子上出现问题。
如果你使用 last 7 versions 会生成不必要的 -ms 前缀代码.
建议使用配置 ['iOS >= 7', 'Android >= 4.1']
// package.json
// ...
"browserslist": [
"Android >= 4.0",
"iOS >= 7"
]
(2)也可以在 vux-loader 的 duplicate-style 插件中配置:
// vue.config.js
// ...
// configureWebpack -> vux-loader -> plugins 中添加如下配置(以下配置摘自官方文档)
{
name: 'duplicate-style',
options: {
cssProcessorOptions : {
safe: true,
zindex: false,
autoprefixer: {
add: true,
"browsers": [
"iOS >= 7",
"Android >= 4.1"
]
}
}
}
}
8、目前用到有这些,其他相关配置请前往官方文档-vux手动配置使用
更多推荐
已为社区贡献7条内容
所有评论(0)