UI组件前端【免费下载链接】vuxMobile UI Components based on Vue WeUI项目地址https://gitcode.com/gh_mirrors/vu/vux点击查看免费下载VUX 是基于 Vue 2 与 WeUI 风格的移动端 UI 组件库仓库当前版本为 2.11.1见 package.json。本指南围绕官方安装文档 docs/en/install/npm.md 展开系统讲解 VUX 2.x 通过 npm/yarn 安装、从 GitHub 指定分支安装的具体命令以及必须配合vux-loader完成 Webpack 集成的配置方法。读完本文你将能在一套 webpack vue-loader 工程中正确安装 VUX、接入vux-loader.merge并完成组件与插件的首屏调用。安装前必读VUX 2.x 的构建前提VUX 2.x 采用webpack vue-loader作为官方推荐的开发方式。官方在 docs/en/install/biolerplate.md 中明确建议vux2.x推荐webpack vue-loader方式的开发不推荐以script引入umd文件的方式进行开发因为后者会带来一系列开发、维护、效率与部署问题。从仓库的package.json可以看到VUX 本体以 Vue 2 生态为基础vue: 2.5.16、vue-loader: ^14.1.1、webpack: ^3.8.1并且将vux-loader: ^1.2.9列为开发依赖——这正是 VUX 2.x 与 Webpack 集成的关键枢纽。因此使用 VUX 2.x 有两个硬性前提项目基于 Vue 2.x 与 webpack 构建体系必须安装并配置vux-loaderVUX 才能正确解析。如果你从未使用过 VUX建议先阅读 docs/en/install/biolerplate.md快速入门可基于vue-cli初始化模板如果出于特殊原因必须通过umd方式引用组件可参考 docs/en/install/umd.md但官方强烈建议使用 webpack 方式开发并提示 3.0 之后可能不再支持 umd 方式。通过 npm 安装与更新在任意 Vue 2 工程目录下执行npm install vux --save--save会将vux写入dependencies因为它是运行时依赖组件库源码中的组件、插件都依赖它后续需要更新版本时重新执行npm install vux --save即可获取最新兼容版本。以当前仓库为例VUX 根目录 package.json 中声明了main: index.js并包含了诸如fastclick、vux-xscroll、validator、x-photoswipe等运行时依赖安装时 npm 会自动一并拉取。使用 yarn 安装与更新如果你使用 yarn 管理依赖官方给出了对应的安装与升级命令yarn add vux // 安装 yarn upgrade vux // 更新yarn upgrade vux会在满足 package.json 中版本约束的前提下将vux更新到最新允许的版本并同步更新yarn.lock。仓库根目录以及 packages/vue-cli-3-example、packages/loader 均提供了现成的yarn.lock可作为安装结果的参照。从 GitHub 直接安装指定 v2 分支如果你需要直接使用 GitHub 上尚未发布到 npm 的最新代码官方文档给出的命令是npm install git://github.com/airyland/vux.git#v2注意要点必须通过#v2指定v2 分支因为 v2 是 VUX 2.x 系列的开发分支该方式适用于尝鲜或跟踪修复的场景常规项目仍推荐使用 npm registry 上的稳定发布版。必装配套vux-loader文档明确指出vux2 必须配合vux-loader使用。vux-loader是 VUX 官方提供的 webpack 集成层它通过改写原有 webpack 配置来完成对 VUX 源码的编译与优化。安装命令参考 docs/en/vux-loader/install.mdnpm install vux-loader --save-dev由于它只在构建期生效属于开发依赖因此使用--save-dev安装。Webpack 集成在 webpack.base.conf.js 中配置 vux-loader安装完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] })关键点说明先把原先module.exports {...}中的配置对象赋值给webpackConfig再调用vuxLoader.merge(webpackConfig, {...})将 VUX 所需的 loader/plugin 注入到原有配置中merge会返回一份合并后的完整配置最终再module.exports出去plugins数组至少要包含vux-ui插件这是 VUX 组件库的配套工具。官方在 docs/en/vux-loader/plugins.md 中说明该插件会完成三件事配置babel编译 VUX 的 js 源码将vue-loader修改为vux-loader!vue-loader将import { Group, Cell } from vux这样的聚合导入解析为单组件引入从而实现按需打包。配置完成后需要重启开发服务npm run devdocs/en/vux-loader/install.md 中明确提醒更新配置后需要重新运行 npm run dev 命令。merge 的 Options 与插件公共参数vuxLoader.merge(webpackConfig, options)的第二个参数支持options.env非必选定义当前环境变量仅在 vux-loader 内部使用用于判断哪些插件需要被执行当插件定义了envs时生效目的是实现一份配置在多个环境下复用plugins数组按需启用的插件列表插件名name为必须项。插件的公共参数参数必选说明name是插件名字envs否数组声明该插件在哪些环境变量下执行不定义则默认始终执行当插件使用默认配置时可以简写为字符串形式例如plugins: [vux-ui]它等价于plugins: [{ name: vux-ui }]其他常用插件在 docs/en/vux-loader/plugins.md 中官方还提供了一批可选插件按需组合到plugins数组中即可less-theme全局 less 变量替换用于主题切换通过path指向一个仅包含简单变量对的 less 文件配置后所有style langless均可直接使用这些变量i18n语言支持。默认中文无需配置需要英文时设置vuxLocale: en需要像 demo 站点那样动态切换语言时可设置extractToFiles抽取 i18n block 并结合vuex-i18n实现src/main.js 中有参考用法duplicate-style构建完成后使用 cssnano 清除重复样式建议仅在 production 开启官方提示使用 VUX直接引用 less 源码时产物 CSS 确实会有冗余script-parser/style-parser/template-parser/js-parser分别对.vue的 script、style、template 以及项目 js 文件做字符串级自定义处理template-feature-switch根据布尔变量在模板中切换on/off代码块html-build-callback/build-done-callback构建生命周期回调分别对应 html-webpack-plugin 的写入前处理与 webpackdone事件后的回调。这些插件的实现可进一步在 packages/loader/srcloader 源码与 packages/loader/test含less-theme-basic.vue、template-feature-switch-basic.vue等测试用例中查阅。安装后的调用组件与插件VUX 安装并接入vux-loader后即可在.vue文件中按需引入组件参考 docs/en/install/usage.mdtemplate div group cell titletitle valuevalue/cell /group /div /template script import { Group, Cell } from vux export default { components: { Group, Cell } } /script在入口文件main.js中注册插件如 Alert、Toastimport { AlertPlugin, ToastPlugin } from vux Vue.use(AlertPlugin) Vue.use(ToastPlugin) // 详细使用请参考对应组件文档注意这种import { Group, Cell } from vux的聚合写法依赖vux-ui插件将其解析为单组件引入见 packages/loader/src/index.js 对应的 import 解析逻辑这正是前面必须在 webpack 中配置vux-loader的原因。仓库 src/demos 下的各组件 Demo 文件如Group.vue、Cell.vue可作为完整调用范例。手动工程配置补充项如果你的工程不是基于 vux2 官方模板而是自行搭建官方在 docs/en/install/manual-usage.md 中列出了需要额外处理的事项引入 reset 样式VUX 默认样式不包含 reset需要在App.vue中手动引入style langless import ~vux/src/styles/reset.less; /style配置 vue-loader 与 babel-loader均通过vux-loader的merge完成对应vux-ui插件内部处理babel-loader的配置建议写入.babelrc而不是options否则可能出错安装 less 相关依赖npm install less less-loader --save-dev安装 yaml-loader用于语言文件读取npm install yaml-loader --save-dev添加 viewport metameta nameviewport contentwidthdevice-width,initial-scale1,user-scalable0添加 Fastclick移除移动端点击延迟const FastClick require(fastclick) FastClick.attach(document.body)按需添加 vue-router、webpack resolve extensions.js/.vue/.json以及 production 环境下的duplicate-style去重插件等。仓库中还提供了现成的完整工程示例 packages/vue-cli-3-example其中 packages/vue-cli-3-example/vue.config.js 展示了通过configureWebpack调用vux/loader的merge并启用vux-ui、less-theme等插件的写法可作为手动配置的直接参考。从 0.x 迁移到 2.x 的注意事项官方在 docs/en/install/npm.md 中强调vux0.x 已经停止维护请尽快迁移到 vue2.x vuex2.x vux2.x。如果你是0.x老用户请阅读完整的迁移说明 docs/en/install/upgrade-to-vux2.md其中核心变更包括Vue 2 相关:value.sync废弃统一改用v-model、broadcast废弃、click需改为click.native、v-for的参数顺序变为(item, index)组件命名Progress/Switch/Dialog/Address/Circle等组件因不能与 HTML5 标签重名而改为XProgress/XSwitch/XDialog/XAddress/XCircle等x-前缀引入方式由import Group from vux/src/components/group改为借助vux-loader的import { Group, Cell } from vux不再默认提供umd文件需要时可运行npm run build-components自行生成见 docs/en/install/umd.md生成时默认语言为zh-CN、命名空间为vux可传--locale、--namespace参数。迁移完成后建议对照根目录 package.json 的脚本如npm run dev、npm run build、npm run test确认工程脚本可用。总结VUX 2.x 的安装链路可以概括为三步安装组件库npm/yarn/GitHub 任选其一→ 安装 vux-loader → 在 webpack 配置中 merge 并启用vux-ui插件。其中vux-loader是 VUX 2.x 正确编译与按需打包的必备环节其merge方法不会侵入你原有的 webpack 配置只做增量注入。完成上述配置后即可在.vue文件中以import { Group, Cell } from vux的方式使用组件并通过Vue.use(AlertPlugin)等方式启用插件正式进入移动端 UI 开发流程。赞分享UI组件前端【免费下载链接】vuxMobile UI Components based on Vue WeUI项目地址https://gitcode.com/gh_mirrors/vu/vux点击查看免费下载相关推荐cxk-ball多人联机功能展望未来游戏发展的无限可能cxk ball多人联机功能展望未来游戏发展的无限可能 cxk ball是一款由Javascript实现的篮球主题游戏目前以单人模式为主玩家通过控制球拍击UI组件前端VUX 项目安装和配置指南VUX 项目安装和配置指南 1. 项目基础介绍和主要编程语言 项目基础介绍 VUX 是一个基于 WeUI 和 Vue.js 的移动端 UI 组件库主要用于快速UI组件前端VUX工程化实践vux-loader配置与优化VUX工程化实践vux loader配置与优化 vux loader作为VUX组件库的核心工程化工具是一个完整的预处理生态系统能够在Vue.js项目构建过UI组件前端上一篇LiteFlow自定义通知消息通知功能完整指南下一篇告别忽大忽小的混音Spleeter音频标准化完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考