大家好我是狗蛋~
开始我是用mint-ui的,挺好用,文档也简单,但是我发现vux好多插件!好牛鼻,蠢蠢欲试。。。
搞个脚手架vue-cli先啦。
首先是看文档啦。
好啦,看不懂啦,去百度啦!
vux使用教程
<1>. 在项目里安装vux
npm install vux --save
<2>. 安装vux-loader (这个vux文档中没有明文跟你说要安装的啦)
npm install vux-loader --save-dev
<3>. 安装less-loader (这个是用以正确编译less源码,否则会出现 ' Cannot GET / ',自己看package.json,如果安装了,就不用装啦!)
npm install less less-loader --save-dev
<4>. 安装yaml-loader (不用装啦)
npm install yaml-loader --save-dev
<5>. 在build文件夹下webpack.base.conf.js 文件进行配置
const vuxLoader = require('vux-loader') 【新加上去的】
const webpackConfig = originalConfig 【originalConfig就是原来的 module.exports出去的代码,把它整个赋值给变量 webpackConfig】
module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] }) 【在最后加多一句,这里就是引用插件vux啦!】
<6>最后别忘了,在resolve: {
extensions: ['.js', '.vue', '.json','.less']里加入.less。
好了。这是标配了,先别急着引用组件啊,先运行一下有没有报错,我们假装运行成功,好。
对了,这vux坑货,不用在main.js像mint-ui那样引入然后use的。
下面开始引入Loading和Alert组件了。
在template范围内,搞个标签
<loading :show="show1" :text="text1"></loading>
<alert v-model="show" :title="'你吃饭了吗?'"> {{ '还没啊~' }}</alert>
show1、show跟text1是变量啦,前者控制是否出现Loading、Alert,后者控制Loading显示内容。
在script内,引入组件import { Loading,Alert} from 'vux'
,还要在components
写上,components: {Loading,Alert}
,就是这么烦!
好了,可以了。。。其实也就这样。。。一般一般,世界第三~
文档下面还有一种单独使用的(AlertModule )
不会就看看demo源码啦!