vue安装vux之神坑之路

╰+哭是因爲堅強的太久メ 2022-05-12 04:34 317阅读 0赞

### **1、安装vux，npm install vux --save-dev** ###

![70][]

### **2、安装vux-loader，npm install vux-loader --save-dev** ###

### **![70 1][]** ###

### **3、安装less、less-loader，npm install less less-loader --save-dev** ###

![70 2][]

### **4、安装vuex，npm install vuex --save-dev** ###

![70 3][]

### **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'\]  
\});**

![70 4][]

### **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、效果图如下：** ###

![70 5][]

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

[70]: /images/20220512/c8eadbcf6a834e5987e88126350da0ea.png
[70 1]: /images/20220512/6ad290ee89a243739ebf6ac08ffaf31b.png
[70 2]: /images/20220512/3cca535688f44b878474fa7e26d46b38.png
[70 3]: /images/20220512/02c786e8ce4e4f089a42615a38007e0f.png
[70 4]: /images/20220512/688270895b344bd1ad6a444e0fcd1af2.png
[70 5]: /images/20220512/84a90d9db0984f3ba30040f5efb8f01f.png