基于vue,安装vux-ui步骤

下属方法,亲测有效,如有疑问,留言交流

一.首先要创建一个vue项目,此处不多言,我的博客中有怎样在cmd模式下创建一个vue项目
二.基于vue项目,如何引入vux-ui:

1.在项目里安装vux
npm install vux --save
2.安装vux-loader
npm install vux-loader --save-dev
3.安装less-loader以正确编译less源码
npm install less less-loader --save-dev
4.安装 yaml-loader 以正确进行语言文件读取
npm install yaml-loader --save-dev
5.在main.js中添加如下代码(替换原来的meta)

6.在build/webpack.base.conf.js 文件进行配置

// 在module.exports上面一行添加下面这句话
const vuxLoader = require('vux-loader')

// 然后将原来的module.exports 改为 const webpackConfig
const webpackConfig = {......} // {}中的内容不动

// 最后在此js文件的最后面添加下面的代码
module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui', 'progress-bar', 'duplicate-style']
})

三.经过上面的操作,基本上就将vux-ui引入进项目
1.如需去掉点击延迟300秒
在 main.js 里面配置:
(需要安装依赖 cnpm install fastclick --save)

const FastClick = require('fastclick')
FastClick.attach(document.body) // 去掉点击延迟300秒

2.如需安装Ajax
在 main.js 里面配置:
(需要安装依赖 cnpm install axios --save 和 cnpm install vue-axios --save)

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

四.在HelloWord.vue中粘贴下面代码




效果图:
基于vue,安装vux-ui步骤_第1张图片

你可能感兴趣的:(vux-ui)