@zhijiancloud/base v0.0.6
zhijiancloud-ui-base
Project setup
yarn install
Compiles and hot-reloads for development
yarn serve
开发模式默认入口为examples/main.js, 开发模式走的vue-cli,见package.json及vue.config.js
Compiles and minifies for production
yarn build
build是build组件库,编译走的是webpack和gulp, 见package.json
Lints and fixes files
yarn lint
文档vuepress
yarn docs:dev
yarn docs:build
Customize configuration
eslint
项目已加入了eslint代码检查,具体规则配置在 package.json - eslintConfig, 具体规则要修改,见eslint文档
主动执行eslint代码检查:yarn lint
开发时代码检查
默认代码保存时不检查,如需要开启,可在vue.config.js修改:
# vue.config.js
# https://cli.vuejs.org/zh/config/#lintonsave
# 当前为false
lintOnSave: true
提交代码前检查代码
由于并不会每次记得主动运行代码检查,项目中添加了commit代码时自动检查有更改的文件。 借助vue-cli内置的yorkie, 以及lint-staged实现,具体可见:git hooks, 相关内容可自行搜索git hooks, husky, yorkie, eslint, lint-stage等内容了解。
lint-stage, 当前装的版本是13.0.0, 见其版本说明,新版本14,15对node的版本比较高要求,13.0.0则要求node版本至少为:14.13.1, or 16.0.0
每次commit代码时,会对有更改的文件跑lint检查,以保证代码的规范性。
如极个别特殊情况,需要跳过git hooks检查,可:git commit -m 'xxx' --no-verify
跳过检查的目录:
"ignorePatterns": ["!.*", "dist", "node_modules", "docs"],
// ESlint default behaviour ignores file/folders starting with "." https://github.com/eslint/eslint/issues/10341
组件库相关说明
- examples使用了vue-router, 方便测试不同组件
- examples使用了element-ui, 做了个边栏menu,方便切换
- scaffold 项目基础依赖,zj, 多语言设置等,主要代码在 examples/入口页设置(i18n多语言设置、zj支持 与 zj 补充数据) + public/index.html(引入jQuery),测试是否设置成功:控制台查看 zj。
代理 Proxy
匹配scaffold项目开发的host配置,端口号设为:9521,具体见vue.config.js devServer
, 相关处理在:proxy.config.js, 映射host见 api.proxy.route.js(与scaffold一致)。已知问题:开了代理后热更新失效,未探究未解决。
全局引入与局部引入
// 全局引入,已在bpm_data测试成功接入
import ZJBASE from '@zhijiancloud/base'
import '@zhijiancloud/base/dist/css/index.css'
Vue.use(ZJBASE)
// 按需引入,已同步修改examples为局部引入,已在bpm_data测试成功接入
import { Demo } from '@zhijiancloud/base'
// 样式-全部
// import "@zhijiancloud/base/dist/css/index.less"
// 样式-按组件
import "@zhijiancloud/base/dist/css/demo.less"
Vue.use(Demo)