一.关于vux
1.vux的简介:
VUX(读音 [v’ju:z],同 views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。
基于webpack + vue-loader + vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式。
vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。
VUX并不完全依赖于WeUI,VUX 在 WeUI 的基础上扩展了多个常用组件,但是尽量保持整体UI样式接近WeUI的设计规范。
2.提示
VUX 是库而非框架,虽然有专用的 vux-loader,但并不影响你自由地使用其他组件库或者工具库。
VUX 使用的 CSS 预处理工具是 less(同 WeUI),但(利益于 .vue 单文件组件的灵活性)这并不影响你使用 SASS 等其他预处理器。
用以表示该组件库时请使用大写名字 VUX,用在说明版本号时使用小写 vux@2.x。
二.使用 vux之前
1.使用vux之前我们先来看一下下面这些内容:
(1)彩色文字如果你刚从后端转到前端,可能会被目前前端(表面的)工程复杂度惊吓到,但是放心,使用 vue-cli 从模板创建项目可以快速开始编码、构建,仅仅是几行简单的命令不是么?
(2)在使用 VUX 之前需要你至少已经会使用 Vue,同时需要你大概了解 Node.js,npm,cnpm,yarn 这些东西。
建议:Node.js 版本在 7.6.0 以上。
(3)相关工具:
1.WE UI
VUX 样式基于 WeUI,但是你不必通过使用 VUX 来使用 WeUI。简单的页面你可以直接引入 WeUI 样式。详细请参考 WeUI 文档。
2.Vue
VUX 基于 Vue 的组件库,意味着你需要有 Vue 的基础知识。
如果还没有了解过,建议先看看Vue 官方文档。
3.Webpack
如果你直接使用 vux2 模板,你可以暂时不用了解。当你需要自定义一些配置时自然就能很快了解了。Webpack 文档
4.vue-cli
Vue 官方用于快速创建项目的工具。
npm install vue-cli -g
或者使用 yarn
yarn global add vue-cli
6.vue-loader
webpack loader,用于编译 .vue 文件,官方模板已经帮你配置好。
8.vux-loader
VUX 组件库的 webpack loader,实现按需加载等功能。它不是替代 vue-loader 而是配合 vue-loader 使用。如果你使用 vux2 模板,暂不需要手动使用它。
三.vux 的安装
1.直接安装或更新
npm install vux --save
2.或者使用yarn
yarn add vux // 安装
yarn upgrade vux // 更新
3.如果你想直接从 Github 安装,请指定 v2 分支
npm install git://github.com/airyland/vux.git#v2
4.如果你是从0.x更新,请参考: 更新到2.x
vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置:const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig
module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})
ux@0.x 已经停止维护,请尽快迁移到 vue@2.x & vuex@2.x & vux@2.x,虽然要花点时间,但是完全值得。
好了今天的分享就到这里!