如何在你的Vue项目配置vux
1.项目里安装vux
JavaScript Code复制内容到剪贴板
- npm install vux --save
2.安装vux-loader（vux2必须结合vux-loader使用，本文也只是介绍vux2的配置）
JavaScript Code复制内容到剪贴板
- npm install vux-loader --save-dev
3.安装less-loader
JavaScript Code复制内容到剪贴板
- npm install less less-loader --save-dev
安装完成记得在webpack.base.conf.js里做如下配置，在extensions里加入less
JavaScript Code复制内容到剪贴板
- resolve: {
- extensions: ['.js', '.vue', '.json', 'less'],
- alias: {
- 'vue$': 'vue/dist/vue.esm.js',
- '@': resolve('src'),
- }
- }
4.安装yaml-loader
JavaScript Code复制内容到剪贴板
- npm install yaml-loader --save-dev
JavaScript Code复制内容到剪贴板
- import { XHeader, Tabbar } from 'vux'
- export default {
- components: {
- XHeader,
- Tabbar
- // 需要什么import引入然后加入组件的components里就好了
- }
- }
最后一步在build/webpack.base.conf.js文件里将原来的module.exports的代码赋值给一个新的变量webpackConfig：
JavaScript Code复制内容到剪贴板
- const vuxLoader = require('vux-loader')
- const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig，把originalConfig换成原来的module.exports
- module.exports = vuxLoader.merge(webpackConfig, {
- plugins: ['vux-ui']
- })
我们不需要在main.js里引入，而是在我们需要用到组件库的组件里面通过
本文来自于：https://vux.li/#/zh-CN/README?id=%E5%AE%89%E8%A3%85%E4%BD%BF
