Vue无代码可视化项目
- 项目搭建
-
- 初始步骤
- 拓展：工程项目从0-1
- 项目规范化
-
- package.json
- cpell.json
- custom-words.txt
- ts-eslint规则
-
- .eslintrc.cjs
- git钩子
- 检查有没有问题
-
- type-check
- spellcheck
- lint:style
- husky操作
-
- 安装
- pre-commit
- pnpm的commit规范
-
- package.json:
- commitlint.config.cjs
- 安装
- stylelint额外的
-
- stylelint.config.cjs
- 执行
- 启动项目
项目搭建
初始步骤
npm create vue@latest
pnpm i
项目基础架子
查看npm下载源：
npm config get registry
设置npm官方下载源
npm config set registry https://registry.npmjs.org
拓展：工程项目从0-1
全程参与了 - 把控/管控App的生命周期
细分周期
- 需求评审
- 方案评审
- 实际开发
- 模块化设计-项目架子搭建
webpack
vite
turbopack
rspack
打包构建 - 模块选择
nest.js
luck.js
ssr的结构
客户端渲染结构
多页的结构 - 构建的脚本
webpack watch
webpack build命令
webpack大量用到loader-plugin
vite也要大量用到vite-plugin - 考虑团队规范，eslint、spell-lint、spell-check等等
- git规范决定协同开发的范式、也决定了上线的节奏（两周做了一个发布，第一周开发周、第二周测试修bug）
功能提测，代码review，通过分支管控实现
比如，master是线上主分支，其他的开发基于features开发，合并到测试环境，tr到测试环境，测试的时候要做到归档处理，打tag - 后续部署到CI/CD。资源是否需要传到os，是否用cdn加速。
构建过程中，是用什么形式构建的，docker镜像部署，还是用静态资源部署的方式，这种一般结合nginx做反向代理的。
现在基本上整个项目上线成功了 - 后续做版本控制，版本迭代所有的功能。
项目规范化
除了已有的基础架子之外，还要在这基础上再加一些规范化的产物
package.json
scripts:{
...
"lint:style":"stylelint \"src/**/*.{vue,css}\" --fix",
"spellcheck":"cspell \"src/**/*.{vue,ts,tsx}\""
}
"devDependencies": {
"stylelint":"16.2.1",
"cspell":"8.6.0"
}
创建cpell.json文件：
创建custom-words.txt
- cspell.json
- .cspell
- custom-words.txt
cpell.json
{
"import": ["@cspell/dict-lorem-ipsum/cspell-ext.json"],
"caseSensitive": false,
"dictionaries": ["custom-words"],
"dictionaryDefinitions": [
{
"name": "custom-words",
"path": "./.cspell/custom-words.txt",
"addWords": true
}
],
"ignorePaths": ["**/node_modules/**", "**/dist/**", "**/lib/**", "**/docs/**", "**/stats.html","**/detect.ts"]
}
custom-words.txt
byelide
pinia
rushstack
stylelint
固定版本：版本前面"^"符号去掉：
版本统一：
package.json:
{
"name": "byelide",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"test:unit": "vitest"
