vux

vue里用vux写移动端搭建环境 一，序言 　　 最近一直在看vue，越看越觉得有意思，由于工作需要，了解了一下vux，发现是个强大好用的UI组件库，以前用过vant，iview，其它的组件库目前还没发现，也还没用过，如果各位有好用的大方分享出来喔 ~ 一起学习，一起进步！下面进入正题，vux的配置环境。 二，vux安装环境 　 　1.安装vux 　　　　 npm install vux --save-dev 　　( 如果是3.0+的脚手架，那么可以直接在终端输入vue ui打开ui界面去安装依赖会更加方便！) 　 　 2.安装vux-loader 　　　　 npm install vux-loader --save-dev //这个还是安装上吧，官网没讲说要安装 　 　3.安装less-loader 　　　　 npm install less-loader --save-dev //这个就是用来把less语言转为css的 　　 4.安装yaml-loader用来正确读取语言文件 　　　　 npm install yaml-loader --save-dev 　　　 5.修改webpack.base.config.js的代码 　　　　　　 　　　　将原文中的 修改成如下的 　　6.在安装完依赖和配置后文件以后，引入vux的模板，全部的代码如下 <template> <div

详细使用方法翻阅官网： https://vux.li/ 配置vux： 　　在网上搜了会，发现几乎都是vue-cli旧版的配置方法，有一些已经不能用了，在这里整理下正确的配置方法 　　安装各插件 　　1、在项目里面安装vux npm install vux --save 　　2、安装vux-loader（必须安装） npm install vux-loader --save-dev 　　3、安装less-loader（这个是用以正确编译less源码，否则会出现 ' Cannot GET / '） npm install less less-loader --save-dev 　　4、安装yaml-loader (以正确进行语言文件读取) npm install yaml-loader --save-dev 配置vux环境： 　　这里注意由于vue-cli3使用的是webpack4而且更新过vue-loader，所以vux使用起来会存在一些兼容的问题，这里需要额外配置一下。 　　官方更新过vue/cli3.x 的vue-loader，正常配置会导致加载错误。所以需要手动指定vue-loader的版本来解决加载问题。 yarn add vue-loader@14.2.2 -D or npm install vue-loader@14.2.2 -D

<1>. 在项目里安装vux npm install vux --save <2>. 安装vux-loader （这个vux文档似乎没介绍，当初没安装结果报了一堆错误） npm install vux-loader --save-dev <3>. 安装less-loader （这个是用以正确编译less源码，否则会出现 ' Cannot GET / '） npm install less less-loader --save-dev <4>. 安装yaml-loader (以正确进行语言文件读取, 我没安装似乎也没报错) npm install yaml-loader --save-dev <5>. 在build/webpack.base.conf.js 文件进行配置 const vuxLoader = require('vux-loader') const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig， //即将原来的module.exports 改为 const webpackConfig module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] }) <6>最后别忘了，在resolve: {

16款优秀的Vue UI组件库推荐 16款优秀的Vue UI组件库推荐 Vue 是一个轻巧、高性能、可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。 在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。 开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。 在选择Vue UI组件库的过程中，通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素，也收集整理了一些优秀的Vue UI组件库。 PS：国内的UI组件大部分都只有一部分的，常用的头部导航，底部导航，listview，grid表格很多都是没有的。 后面才发现，基于Vue的Quasar Framework 介绍 这个框架UI组件很全面，准备下次使用这个框架了 基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarframework/quasar: Quasar Framework https://github.com/quasarframework/quasar Quasar（发音为/kweɪ.zɑɹ/)是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建： 响应式网站 PWA

1.vux 目前是2.6版本以上才出现这个问题，可以选择版本回退 修改源码 但是注意每次运行install 是 都需要重新修改回来 步骤如下(我是在vue-cli中使用的) ① 找到你的node_modues—vux—src–components—x-input --index.vue 组件 ② 修改一下三处 methods 中的 focus 、 onBlur、 onKeyUp focus () { // 优化添加 setTimeout(() => { this.$refs.input.focus() }, 0) }, onBlur ($event) { this.setTouched() this.validate() // 优化添加 setTimeout(() => { this.isFocus = false }, 0) this.$emit('on-blur', this.currentValue, $event) }, onKeyUp (e) { if (e.key === 'Enter') { e.target.blur() this.isFocus = true //优化添加 this.$emit('on-enter', this.currentValue, e) } }, 来源： CSDN 作者： qq_30119705 链接： https://blog.csdn

项目中有个地方需要用到下拉框，使用VUX的selector组件，使用value-map属性进行接口数据转换未成功，出来的还是原数据 看了又看也没写错呀，字段什么的都是复制上去的，去网上查了也没查到怎么回事，回到官网就看到右下角有个版本要求最低2.7.2，看了一下我们项目的VUX版本是2.5.6，然后更新一下版本就可以正常玩耍啦~ npm install vux@2.7.2 来源： https://www.cnblogs.com/wuyufei/p/11899398.html

最近在弄一个付费课程的应用，主要有微信登录，支付和自定义分享，在开发过程中遇到的坑，这里做一下记录 文章主要有以下几点 使用库简介 微信登录解决 微信支付解决 微信自定义分享解决 页面前进后退数据状态解决 使用库简介 使用 vux UI组件库 使用 vue-navigation 缓存页面，此库实现了前进刷新后退读缓存的功能，像原生APP导航一样。用子路由的方式实现tabbar有bug，用vuex解决了。 使用 lib-flexible 解决移动页面适配 来一个清单 "dependencies": { "fastclick": "^1.0.6", "lib-flexible": "^0.3.2", "lodash": "^4.17.4", "vue": "^2.5.2", "vue-navigation": "^1.1.3", "vue-router": "^3.0.1", "vuex": "^2.1.1", "vuex-i18n": "^1.3.1", "vux": "^2.7.8" } 微信登录 应用需要登录后可以访问，微信登录要实现的功能是从任意一个链接进入，判断是否登录，未登录跳到微信授权，成功后返回登录前链接，由于对php的微信授权做得比较多，所以微信授权放在的php实现，这里说一下实现过程。路由方式使用了 history 模式，打包好的 index.html

< x-table :full-bordered= "false" :content-bordered= "true" :cell-bordered= "false" style= " background-color : #fff ; " v-for= '(item,index) in tableList' > < thead > < tr > < th class= "TLeft" > < div class= "font1" > {{item.titles}} </ div > < div class= "font2" > {{item.dateTime}} </ div > </ th > < th class= "TCenter" > < div ></ div > </ th > < th class= "TRight" > < div class= "font3" v-show= 'item.turnsOutAccount<0' > {{item.turnsOutAccount}} </ div > < div class= "font4" v-show= 'item.turnsOutAccount>0' > {{item.turnsOutAccount}} </ div > </ th > </ tr > </ thead > </ x-table > .

vue的移动端自适应布局可以使用可以先安装使用flexible库。具体方法网上有很多，可以查看以下链接 vue 自适应布局 使用flexible 但后期但你使用一些ui框架时，就会发现组件样式变型了（我这里是使用vux的datetime） 就像下图： 这是vux的样式和flexible冲突了，怎么解决？ ！！！我也没有十分好的办法，但大神有，可以看下面的连接 vue移动端flexible.js结合Muse-ui使用的小坑 看完之后，明白就是不要写px手写rem。但是项目之前都是用px，怎么办?项目急上线怎么办？不够能力自己写组件 怎么办？ 这里提供一种应急办法，但不推荐使用 打开\node_modules\vux\src\components\datetime 就是打开vux的组件（我这里是用日期插件datetime） 找到style.less 然后 没错就是放大2倍，所有px乘以2就行了，看效果 ok，没有问题。 文章来源: vue 使用flexible之后与vux组件冲突暂行方法

废话不说，直接写步骤 1. npm install vux --save 2. npm install less less-loader --save-dev 3. npm install @vux/loader --save-dev 4. npm install yaml-loader --save-dev 使用，以toast为例： main.js: import '@/styles/index.scss' import { ToastPlugin } from 'vux' 其他组件使用： this.$vux.toast.text('hello', 'top') 写在最后： 估计都会遇到官网关于配置vux-loader方式报错问题，因为现在cli3.0已经是用webpack4了，vux-loader也提供@vux/loader了， 项目根目录下新建vue.config.js module.exports = { configureWebpack: config => { require('@vux/loader').merge(config, { options: {}, plugins: ['vux-ui'] }) }, };