准备:
首先,通过脚手架先初始一个项目test
然后运行没问题。
配置:
- 下载
npm i vux
- 使用一个按钮这个组件,为了方便在vue中的使用,将其配置为公共的组件使用:
在mian.js 中:
import {XButton } from 'vux'
Vue.component('x-button',XButton );
在home.vue中使用x-XButton;(使用方式文档中都有代码,在demo源码的位置)
3. 运行
报错:
These dependencies were not found:!!vue-style-loader!css-loader?{“sourceMap”:true}
这里是说依赖找不到,这种情况下检查一下我vue-style-loader css-loader都是有的,问题在于vux使用了less,文档其实有说,如下图
脚手架并不会配less,所以这里我们下载配置一下less,npm i less less-loader -s
;
运行报错:
You may need an appropriate loader to handle this file type.
其实这里是因为我们少了配置,这个在vux的文档中也有说:
所以下载一下 vux-loader ,然后在webpack.base.config.js中配置一下;
原来的 module.exports 代码赋值给变量 webpackConfig,如下:
配置后如图:
然后运行,成功,home使用按钮也正常