/fe-template

Vue3 Vite模板

Primary LanguageTypeScript

vite vue3 前端基础模板

工具

建议使用 webstormIDE,并且安装以下插件：

设置npm国内镜像

npm install -g nrm
nrm use taobao

安装依赖

pnpm install

设置Webstorm

打开IDE设置界面： command⌘ + .

  1. 工具 -> 保存时的操作 勾上保存时优化import和运行eslint
  2. 其他设置 -> ConventialCommit -> 基于模板

命令

所有命令使用 pnpm run 执行

  • dev : 启动开发
  • uat : 测试环境构建
  • release : 生产环境构建(包含上传CDN)
  • serve : 本地构建完成预览
  • lint : eslint修复代码
  • format : prettier代码
  • api : swagger生成请求代码，在 src/api 下进行配置

代码规范

使用类组件+依赖注入写业务代码 vue3-oop

命名规范

  1. 使用小写加 - 作为文件命名，比如文件夹 search-form 尽量避免文件及文件夹出现大写及汉字情况
  2. js命名采用小驼峰 searchForm, 类采用大驼峰 SearchForm
  3. 文件使用后缀标识功能 home.view.tsx 表示此文件作为页面，home.service.ts 作为服务等等

项目配置

  1. 配置统一写在 config 文件夹下面，区分环境
  2. 业务按功能模块区分，在 module 文件夹下面，每个 module 有自己的路由文件，会被顶级路由服务收集到