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、效果图如下:

 

希望对小伙伴们有帮助吧,请顺手点个赞咯~~,感谢...

Logo

前往低代码交流专区

更多推荐