浅谈Vue CLI 3结合Lerna进行UI框架设计

2020-06-14 06:12:24易采站长站整理

vue create --preset ziyi2/vue-cli3-lerna-ui my-project

如果报错

unable to get local issuer certificate
,可以设置
git config --global http.sslVerify false

如果远程确实获取preset.json失败,可以采用本地的方式,将preset.json 配置复制下来,放入新建的

preset.json
文件,执行以下命令生成UI框架:


vue create --preset preset.json my-project

执行后的生成过程如下:

 

脚本命令


// 启动开发服务
"serve": "vue-cli-service serve",
// 生成静态资源
"build": "vue-cli-service build",
// Eslint校验
"lint": "vue-cli-service lint",
// 安装和链接Lerna repo的依赖
"bootstrap": "lerna bootstrap",
// 更新升级日志
"cz:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
// 构建
"lib": "lerna run lib"

如果需要利用GitHub Pages发布静态资源,可以新增命令

"deploy": "npm run build && gh-pages -d dist"
,需要安装
gh-page
依赖。

启动

进入项目目录,使用

yarn serve
命令启动开发态视图,如果是Windows系统,可能会报以下错误:

在Windows下

vue create
可能会采用npm进行依赖安装,MAC OS X下无此问题,此时需要额外使用yarn进行再一次安装操作(这里使用了yarn的workspace特性,因此安装依赖建议都使用yarn进行操作):


lerna bootstrap

执行

yarn serve

这里给出了国际化、选择器、警告以及按钮等UI设计示例。

构建

执行

lerna run lib
后(构建可以配合
npm run lint
校验,校验不通过则构建失败),Lerna工具会对每一个npm包执行
lib
脚本:

这里分别对

utils
btn
theme