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

See Configuration Reference.

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)