vue安装vux之神坑之路
1、安装vux,npm install vux --save-dev2、安装vux-loader,npm install vux-loader --save-dev3、安装less、less-loader,npm install less less-loader --save-dev4、安装vuex,npm install vuex --save-dev5、在bui...
·
1、安装vux,npm install vux --save-dev
2、安装vux-loader,npm install vux-loader --save-dev
3、安装less、less-loader,npm install less less-loader --save-dev
4、安装vuex,npm install vuex --save-dev
5、在build文件夹找到webpack.base.conf.js打开并进行配置(重点核心)
第一步,将module.exports替换成
const webpackConfig
第二步,在const webpackConfig前加上
const vuxLoader = require('vux-loader')
第三步,在最末尾加上
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
});
6、开始使用vux,引入组件(以弹出框Alert为例),import {Alert,TransferDom} from 'vux',代码如下:
<template>
<div class="index">
<div v-transfer-dom>
<Alert v-model="show">{{message}}</Alert>
</div>
</div>
</template>
<script>
import {Alert,TransferDom} from 'vux'
export default{
name: 'Index',
data(){
return{
message: 'Hello Vux!',
show: true,
}
},
directives:{
TransferDom,
},
components:{
Alert,
},
methods:{
onHide(){
alert('123456');
}
},
}
</script>
<style lang="less">
.index{
width: 100%;
height: 100%;
}
</style>
7、效果图如下:
希望对小伙伴们有帮助吧,请顺手点个赞咯~~,感谢...
更多推荐
已为社区贡献6条内容
所有评论(0)