开发环境搭建
node:18.x.x
pnpm:9.x.x
技术选型
vue:3.4 (业务开发使用选项式,底层或高级组件可根据情况使用组合式和TSX)
taro:3.xx(小程序开发使用,业务开发使用选项式,底层或高级组件可根据情况使用组合式和TSX)
ant-design-vue:4.1 (pc端UI框架)
vant:4.8(h5端ui框架)
研发准备
- node 和 git -项目开发环境
- Vite - 熟悉 vite 特性
- Vue3 - 熟悉 Vue 基础语法
- taro - 移动端框架 的基本使用
- TypeScript - 熟悉
TypeScript基本语法 - Es6+ - 熟悉 es6 基本语法
- Vue-Router-Next - 熟悉 vue-router 基本使用
- Ant-Design-Vue - ui 基本使用
- vant - 移动端ui 基本使用
开发工具规范
VSCode开发环境
1、下载最新版本的Visual Studio Code - Code Editing. Redefined
2、安装汉化插件:Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
3、安装代码检查插件:Prettier - Code formatter 配置prettier为默认的代码格式化工具
4、配置文件保存自动格式化:设置->Format On Save(勾选)
5、安装代码规范检查插件:ESLint
6、安装文件保存自动添加文件注释工具:koroFileHeader,并且配置该工具,具体配置方式参考官方文档
json
"fileheader.customMade": {
// 头部注释默认字段
"Author": "你的名字",
"Date": "Do not edit", // 设置后默认设置文件生成时间
"LastEditTime": "Do not edit", // 设置后,保存文件更改默认更新最后编辑时间
"LastEditors": "你的名字", // 设置后,保存文件更改默认更新最后编辑人
"Description": "",
"FilePath": "Do not edit", // 设置后,默认生成文件相对于项目的路径
"TODO": ""
},- 安装vue插件Vue - Official
- 安装todo提示插件Todo Tree - Visual Studio Marketplace
npm工具
- 包管理工具:pnpm-作为包管理工具,安装版本为9.1.3(*2024年5月29日后新开的必须使用pnpm作为包管理工具)
