Casta-ui NPM | npm.io

Castianta-admin 脚手架

开发环境

node 16.13.0
npm 8.1.0
yarn 1.22.17
pnpm 6.23.6

上述安装包建议全局安装，例如：npm install -g yarn pnpm

技术栈

前端基础：

vue 3.2.21
typescript 4.4.4
vue-router 4.0.12
pinia 2.0.2 (状态管理)
axios 0.24.0

常用工具函数:

@vueuse/core 6.8.0 （常用的 vue hook）
lodash-es 4.17.21 (常用工具库函数)

前端 ui：

ant-design-vue 2.2.8

脚手架&打包：

vite 2.6.14

代码校验：

eslint 8.2.0
stylelint 14.0.1
eslint-plugin-vue 8.0.3

代码格式化：

prettier 2.4.1

git 提交信息校验：

husky 7.0.4
@commitlint/cli 14.1.0
@commitlint/config-conventional 14.1.0

vscode 插件

TypeScript Vue Plugin (Volar)
Vue Language Features (Volar)
eslint
stylelint

vscode 配置文件建议统一，模版找我

特别注意：
防止线上出现不可预料的 bug package.json 中的各个依赖我已经全部把版本锁死 🔒 了。常用的依赖均已安装，如果实在需要升级或者安装新依赖，请先找我评估风险。
想要在本地联调并修改后端地址，请在 .env.development 中修改

ant-design-vue 使用

样式：本地开发的时候会全量引入样式文件，线上打包的时候会按需引入
组件：通过 import 手动引入，不要全量引入（vite 按需引入插件不稳定，所以目前还是手动引入。不过我会持续跟进 😁）

前端代码编写经验

目前项目支持 sfc & tsx 俩种编写方式，建议大家使用 tsx 来编写业务
使用 vue3 的 compisition api 编写组件，尽量不要使用 options api
遵从 eslint、stylelint、commitlint 很难，但这是必要的 😢
尽量使用 yarn 来管理 npm。yarn 的好处：
- 锁版本
- 在 jenkins 上方便做缓存，不用每次都全量安装 node_modules
用组件化的方式实现抽象业务逻辑，可以看看下面的 🌰

开发 button（button-group），首先要往上抽一层，抽出来一个最基本的 button，包括类名、变量 prefix 等都要用这个。下来在考虑组合

less:

.button {
  // ...

  &__group {
    // ...
  }

  &--disabled {
    // ...
  }
}

template:

<div class="button"></div>

<div class="button__group">
  <div class="button"></div>
  <div class="button button--disabled"></div>
</div>

js:

setup() {
    const state = reactive({
        form: {
            // ...
        },
        button: {
            //...
        }
    })
}

参考资料

vue3 jsx 使用说明

Vue 3 Babel JSX 插件

命令

yarn serve : 本地启动

yarn build:test : 打包测试环境

yarn build : 打包线上环境

yarn reinstall : 删除 cache & node_modules 重新安装项目需要的包

yarn preview : 本地打包并预览

yarn report : 查看打包后各个依赖的体积

yarn lint:eslint : eslint 校验

yarn lint:prettier : prettier 校验

yarn lint:stylelint : stylelint 校验

小点

跟运维商量后，先暂时把打包是 node 内存的限制去掉。原代码如下：

{
  // ...
  "build": "cross-env --max_old_space_size=4096 NODE_ENV=production esno ./build/script/prevBuild.ts && vite build && esno ./build/script/postBuild.ts",
  "build:test": "cross-env --max_old_space_size=4096 esno ./build/script/prevBuild.ts && vite build --mode test && esno ./build/script/postBuild.ts",
  // ...
}