企业官网建设流程全解析

• UI组件
• 前端

在正式使用 VUX（Vue & WeUI 移动端 UI 组件库）之前，你不需要是一位资深前端工程师，但至少应具备Vue的基础使用能力，并对Node.js、npm、cnpm、yarn等工具有一定的了解。本文以 VUX 官方《开始使用 VUX 之前》文档为主线，结合仓库源码，系统梳理上手 VUX 所需的知识储备、工具链组成（WeUI、Vue、Webpack、vue-cli、vue-loader、vux-loader），以及从安装到调用的完整路径，帮助你快速判断自己是否已准备好进入 VUX 开发。

写在前面：这份准备清单针对谁

VUX 官方在文档开头给出了一个非常务实的提醒：如果你刚从后端转到前端，可能会被前端（表象上的）工程复杂度吓到——但请放心，使用vue-cli从模板创建项目，你只需要几条简单的命令就能开始编码和构建。

这段话点明了 VUX 的使用前提：VUX 不是零基础入门教程，它假设你已经会用 Vue，并且接触过前端工程化工具。官方文档明确列出两条硬性要求：

• 至少已经会使用Vue；
• 大概了解Node.js、npm、cnpm、yarn这些东西。

同时文档给出了一个明确的版本建议：

建议Node.js版本在7.6.0以上。

这一点可以在仓库 package.json 中得到印证——当前仓库声明的最低运行环境为node >= 4.0.0、npm >= 3.0.0（见engines字段），而官方文档建议的7.6.0是针对日常开发体验的更高标准（例如async/await在该版本已默认可用）。如果你使用的是更现代的 Node LTS 版本，自然完全满足要求。

相关工具全景：一条完整的 Vue 工程化链路

官方文档将上手 VUX 需要了解的工具归纳为六个：WeUI、Vue、Webpack、vue-cli、vue-loader、vux-loader。它们共同构成了一条从"样式基础"到"组件库加载"的完整链路。下面逐一展开。

WeUI：VUX 的样式基底

VUX 的样式基于WeUI（微信官方网页设计规范样式库），但两者是解耦的：

• 你不必为了使用 VUX 而单独去引入 WeUI；
• 对于简单的页面，你完全可以直接引入 WeUI 样式而不用 VUX。

也就是说，WeUI 是 VUX 的"设计语言源头"，VUX 把 WeUI 的视觉规范封装成了 Vue 组件。这一点可以从仓库的目录结构直接观察到：src/styles 下存放了 77 个.less样式文件，其中 src/styles/variable.less 集中定义了全部主题变量（如@theme-color: #04BE02、@actionsheet-label-primary-color: #1AAD19等），这套变量的语义与 WeUI 的绿色主色、警示红色等规范一脉相承。后续如果你想换主题色，改这套变量即可（后文 vux-loader 的less-theme插件正是围绕它工作的）。

Vue：组件库的运行时基础

VUX 是基于Vue的组件库，这意味着你需要有Vue的基础知识——这是使用 VUX 的绝对前提，没有任何绕过方式。组件本质上是 Vue 组件，插件（如AlertPlugin、ToastPlugin）本质上是 Vue 插件，用法完全遵循 Vue 2 的组件与插件体系。

从仓库看，VUX 当前依赖 Vue 2.x 生态：package.json 中vue与vue-template-compiler版本均为2.5.16，vuex为2.x。如果你还没有掌握 Vue 基础，官方文档的建议是先学习 Vue 官方文档再回来使用 VUX。

Webpack：模块打包器

如果你直接使用vux2官方模板，暂时可以完全不用了解 Webpack。Webpack 之所以出现在清单里，是因为：

• VUX 的按需加载能力依赖vux-loader与 Webpack loader 机制协同工作；
• 当你需要自定义构建配置（如修改打包路径、调整 loader 顺序）时，自然就会需要了解它。

仓库本身即用 Webpack 构建：package.json 的dev脚本为webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js，devDependencies 中声明了webpack ^3.8.1与webpack-merge。也就是说，vux-loader 的merge方法背后正是webpack-merge在做配置合并（见 packages/loader/src/index.js 中的const merge = require('webpack-merge')）。

vue-cli：快速创建项目

vue-cli是 Vue 官方用于快速创建项目的工具。官方文档给出了两种安装方式：

npm install vue-cli -g

或者使用 yarn：

yarn global add vue-cli

安装后用vue init拉取模板（例如vux2模板）即可得到一个已经配置好 Vue + Webpack + vue-loader 的工程。官方文档特别强调：如果你直接从vux2模板起步，很多底层配置（尤其是 vue-loader 与 vux-loader 的配合）模板已经帮你接好了，可以先用起来再慢慢理解。

vue-loader：编译 .vue 文件的 Webpack loader

vue-loader是 Webpack 的 loader，用于编译.vue单文件组件（template / script / style 三块）。官方模板已经帮你配置好它，通常你不需要手动改动。仓库自身同样以vue-loader ^14.1.1作为构建依赖（见 package.json）。

它的工作方式值得记住：.vue文件会被 vue-loader 拆解为多个selector子请求（styles、script、template 三部分），分别交给vue-style-loader、babel-loader、template-compiler处理。理解这一点，是理解 vux-loader 存在意义的关键（见下文）。

vux-loader：VUX 组件库的专用 Webpack loader

vux-loader是 VUX 组件库配套的 Webpack loader，核心作用是实现组件按需加载等工程化能力。官方文档明确了两点性质：

1. 它不是替代vue-loader，而是配合vue-loader使用；
2. 如果你使用vux2模板，暂不需要手动使用它（模板已配置好）。

为什么要有一个"前置 loader"

由于.vue文件的特殊性，vue-loader 并不接收上一个 loader 传递的 source 直接处理，而是自行生成了内部的 loader string 再进入后续处理。因此直接在 Webpack 里写vue-loader!my-loader的方式行不通。vux-loader 采用的办法是：前置在 vue-loader 之前（即vux-loader!vue-loader），将 vue-loader 生成的代码二次处理，分割 loader string 并插入 vux 自己的 template-loader / style-loader / script-loader。

这套实现完整保存在仓库 packages/loader 中：

• packages/loader/src/index.js 是入口，导出merge方法，负责改写原 Webpack 配置：追加template-loader、script-loader、js-loader、i18n-loader等规则，并注册各类插件；
• packages/loader/src/template-loader.js、style-loader.js、script-loader.js、js-loader.js 分别对应 .vue 的模板、样式、脚本与普通 js 文件的预处理；
• 测试用例见 packages/loader/test/test.js，fixtures 覆盖了 less 主题、script 解析、style 解析、feature-switch 等场景。

merge方法还做了几件重要的事：检查插件是否重复（同名插件只允许一个实例）、根据options.env过滤仅在某环境执行的插件、检测 Webpack 1.x / 2.x 并采用不同的配置注入方式（webpack 2 通过LoaderOptionsPlugin注入 vux 配置），以及读取vux/src/components/map.json（src/components/map.json）实现组件import到单组件引入的解析。这就是 VUX 能支持import { Group, Cell } from 'vux'这种整包引用的底层原理——vux-loader 会在编译期把它改写为按需的单组件引入。

入口文件与插件示例

官方文档对 vux-loader 的完整配置方式（options、plugins以及script-parser、style-parser、template-parser、js-parser、template-feature-switch、vux-ui、i18n、less-theme、duplicate-style、html-build-callback、build-done-callback等插件的参数说明）可进一步阅读 docs/zh-CN/vux-loader.md，此处不再展开。作为"使用 VUX 之前"的准备阶段，你只需要知道：VUX 2.x 必须配合 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'] })

其中vux-ui插件会完成三件事：配置 babel 编译 vux 的 js 源码、把 vue-loader 改写为vux-loader!vue-loader、把import组件调用解析为单组件引入。详细安装与配置见 docs/zh-CN/install/npm.md。

从准备到上手：安装与第一个调用

了解了上述工具之后，正式的上手路径就非常清晰了，仓库文档给出了完整的安装与调用示例：

安装

npm install vux --save

或使用 yarn：

yarn add vux # 安装 yarn upgrade vux # 更新

完整安装说明（含从 GitHub 安装v2分支、从 0.x 升级到 2.x 等场景）见 docs/zh-CN/install/npm.md；从未使用过 VUX 的读者建议先参考 docs/zh-CN/install/biolerplate.md 的快速入门流程。

在 .vue 文件中调用组件

安装并配置好 vux-loader 之后，组件的使用方式（见 docs/zh-CN/install/usage.md）：

<template> <div> <group> <cell title="title" value="value"></cell> </group> </div> </template> <script> import { Group, Cell } from 'vux' export default { components: { Group, Cell } } </script>

这种import { Group, Cell } from 'vux'的整包写法之所以可行且不会把全部组件打进包里，正是前文所说的 vux-loadervux-ui插件在编译期做了import解析为单组件引入的转换。

在 main.js 中调用插件

VUX 的插件（Alert、Toast 等）则通过 Vue 插件机制在入口文件注册：

import { AlertPlugin, ToastPlugin } from 'vux' Vue.use(AlertPlugin) Vue.use(ToastPlugin) // 详细使用请参考对应组件文档

仓库自身的入口 src/main.js 正是这样组织插件与路由的，可以作为真实项目的参考样例。

常见疑问与工程化思路

在准备阶段，读者还常会遇到两个认知层面的问题：

1. 为什么 VUX 要自己写一个 loader 而不是直接用 vue-loader 的选项？因为 vue-loader 对.vue文件的处理是先拆分成子请求、生成 loader string 再继续执行，直接修改其内部 loader 配置会破坏原有参数（例如影响热更新）。vux-loader 选择"截获 vue-loader 输出并二次改写"的方式，既不影响 vue-loader 原有逻辑，又能自由插入自定义的 template/style/script 处理。这套思路对任何需要预处理.vue文件的场景都具有参考价值。

2. 我应该先深入学 Webpack 吗？不需要。官方文档的建议是：用vux2模板起步时，模板已经帮你配好了 vue-loader 与 vux-loader；当你开始自定义配置（主题、按需引入、多语言等）时，自然就会用到 Webpack 与 docs/zh-CN/vux-loader.md 中的各项插件，到时再深入也不迟。

总结

"开始使用 VUX 之前"这份准备清单可以浓缩为三句话：

• 知识门槛：会 Vue 基础，了解 Node.js / npm（或 yarn）；
• 环境建议：Node.js 7.6.0 及以上，通过vue-cli从vux2模板创建项目；
• 工具认知：VUX 样式源于 WeUI，组件基于 Vue，构建依赖 Webpack + vue-loader，按需加载与工程化预处理由 vux-loader 承担——使用vux2模板时这三者都无需手动配置，只需要在升级为独立配置时知道vux-loader的merge方法即可。

当你满足这些前提，就可以进入 docs/zh-CN/install/npm.md 开始正式安装，或者直接阅读 docs/zh-CN/vux-loader.md 深入了解 vux-loader 的插件体系与高级玩法了。

• UI组件
• 前端