Hx-ui-vant NPM

项目介绍

拖拽系统模板-vant增强版 ui 库项目

开发工具

node 安装最新，不能使用，若请安装nvm切换到8版本
npm，yarn npm管理全局依赖 yarn管理项目依赖
nrm npm源管理项目使用的hx-ui-vant和hx-analysis在自建的npm仓库使用nrm切换管理
git 代码版本管理
vscode 代码编辑

开发技术

移动端适配解决方案

常规开发使用px在375px下为设计稿标注
项目提供 px-to-rem 的 mixins 来管理style中的样式的兼容性

注意事项

组件库推送自建 npm 库

工具版本

v12.14.0 <= node
6.14.2 <= npm
1.22.4 <= yarn

目录说明

dist 预览组件项目打包 lib 组件库打包 packages 组件库代码 public 预览项目需要的静态资源 test 预览项目代码

表单组件的属性和方法应该全部接管

目录解释

lib
├── demo.html                测试入口html文件 无用处
├── hx-ui-test.common.js     一个给打包器使用的commonJs包
├── hx-ui-test.css           项目提取出来的css
├── hx-ui-test.umd.js        一个给浏览器直接引入的js包
└── hx-ui-test.umd.min.js    上一个的压缩版本去除了空格和换行

组件的定义放在packages里面编辑

public 目录是测试需要的 test 测试项目文件

├── lib             发布npm的打包文件
├── node_modules    项目依赖管理
├── package.json    项目依赖配置文件
├── packages        组件开发根目录
├── public          本地测试所需的静态资源
├── test            测试组件的本地预览目录
├── lib.sh          发布npm的shell脚本--自动生成版本号
├── babel.config.js babel配置文件
├── vue.config.js   webpack配置文件
├── README.md       自述文件
└── yarn.lock       yarn 依赖管理文件

组件引入方式

npm install hx-ui-vant --save
# or
yarn add hx-ui-vant

为了保证组件的在模板项目中是最新的 ui版本发布后需要在模板编辑项目重新获取最新依赖由于淘宝源同步npm源不是实时的最好在获取新的ui库版本时切换到npm源

切换npm源工具 nrm

npm install -g nrm

nrm use taobao # 切换淘宝源
nrm use npm # 切换npm源

nrm ls # 查看所有能切换的源

项目移动端适配解决方案

组件提供adaptation属性来处理动态样式里面的字体大小等属性的适配组件打包生成的样式文件中 hx-ui-vant.css 标准的px大小以375宽度屏幕为设计标准