a798032825 / fe-template

Vue3 Vite模板

vite vue3 前端基础模板

工具

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

• 中文语言包
• Visual Studio Code Dark Plus Theme—主题
• Atom Material Icons—图标
• Conventional Commit—标准提交信息
• Awesome Console—控制台链接到代码
• Rainbow Brackets—彩虹大括号

设置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 有自己的路由文件，会被顶级路由服务收集到