在vue中安装使用vux的教程详解


Posted in Javascript onSeptember 16, 2018

最近因为的工作的原因在弄vue,从后端弄到前端之前一直用js,现在第一次接触vue感觉还挺有意思的,就是自己太菜了,这个脑子呀。。。。不太够用。。。。。页面设计用了一个叫vux的东西,vux可以提供一些组件,用起来还是比较方便的,因为自己比较菜吧,所以有很多东西还是不太深入了解。。。比如对vux自带样式的修改。。希望有大牛看到的话也可以多多指点。。。

今天就记录一下vux的安装使用吧。。。。。。

首先自己要先新建一个vue项目,cmd进入到项目目录下,进行安装

1.在项目目录下安装vux(也可以使用yarn安装,本人没有使用过就不多介绍了,我是用npm安装,网速慢的话可以使用淘宝镜像安装)

npm install vux --save

安装淘宝镜像

npm install --registry=https://registry.npm.taobao.org
npm config get registry    //判断淘宝镜像是否安装成功

使用淘宝镜像安装vux

cnpm install vux --save

2.安装成功后安装vux-loader,如果使用的是vux2的话必须安装vux-loader

npm install vux-loader --save-dev

安装成功后在 build/webpack.base.conf.js 中进行配置

const vuxLoader = require('vux-loader')

在vue中安装使用vux的教程详解

将原来的 module.exports 代码赋值给变量 webpackConfig

在vue中安装使用vux的教程详解

并在build/webpack.base.conf.js中添加如下代码

module.exports = vuxLoader.merge(webpackConfig, {
 plugins: ['vux-ui']
})

在vue中安装使用vux的教程详解

3.安装less-loader以正确编译less源码

npm install less less-loader --save-dev

安装成功后在代码的resolve中添加less 如图:

在vue中安装使用vux的教程详解 

4.安装yaml-loader

npm install yaml-loader --save-dev

5. 重新编译项目后就可以使用vux的组件了

npm run dev

总结

以上所述是小编给大家介绍的在vue中安装使用vux的教程详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
【消息提示组件】,兼容IE6/7&&FF2
Sep 04 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
jquery 问答知识整理
Feb 11 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
简单实现js拖拽效果
Jul 25 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 Javascript
React 组件中的 bind(this)示例代码
Sep 16 #Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 #Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 #Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 #Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 #Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 #Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 #Javascript
You might like
实例讲解PHP中使用命名空间
2019/01/27 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
详解Document.Cookie
2015/12/25 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
python 字符串格式化代码
2013/03/17 Python
python利用beautifulSoup实现爬虫
2014/09/29 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
python在每个字符后添加空格的实例
2018/05/07 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
django-csrf使用和禁用方式
2020/03/13 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
文明礼仪倡议书
2015/04/28 职场文书
《比的意义》教学反思
2016/02/18 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL