VUX安装与使用

vux 曹卷英
文章标签: vux 安装 自学


一.关于vux

1.vux的简介:

VUX(读音 [v’ju:z],同 views)是基于WeUIVue(2.x)开发的移动端UI组件库,主要服务于微信页面。

基于webpack + vue-loader + vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式。

vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。

VUX并不完全依赖于WeUIVUX 在 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.jsnpmcnpmyarn 这些东西。

建议: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

5.vue-cli 文档

6.vue-loader

webpack loader,用于编译 .vue 文件,官方模板已经帮你配置好。

7.vue-loader 文档

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,虽然要花点时间,但是完全值得。

好了今天的分享就到这里!

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :