在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 相关文章推荐
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
vue+vue-router转场动画的实例代码
Sep 01 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
VFP与其他应用程序的集成
2006/10/09 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
jQuery截取指定长度字符串代码
2014/08/21 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
深入理解js中this的用法
2016/05/28 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
jQuery 表单序列化实例代码
2017/06/11 jQuery
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
Python获取邮件地址的方法
2015/07/10 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Django框架 信号调度原理解析
2019/09/04 Python
python能做什么 python的含义
2019/10/12 Python
python with (as)语句实例详解
2020/02/04 Python
使用django自带的user做外键的方法
2020/11/30 Python
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
小区停车场管理制度
2014/01/27 职场文书
初中英语课后反思
2014/04/25 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
新学期开学标语
2014/06/30 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
社团个人总结范文
2015/03/05 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
导游词之无锡梅园
2019/11/28 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang