准备工作
# 开发环境
使用本模板前，需要在本地依次安装好 Node.js (opens new window), pnpm (opens new window), Git (opens new window) 和 Visual Studio Code (opens new window)，并且在 Visual Studio Code 里安装好以下扩展：
• EditorConfig for VS Code (opens new window)
• stylelint (opens new window)
• 在 Visual Studio Code 里打开源码的文件夹，右下角会自动提示需要安装的依赖，直接点击安装即可。
TIP
以上 5 个为 Visual Studio Code 必备扩展，以下则是作者建议安装的扩展，安装它们将在一定程度上提升开发效率。
• Chinese (Simplified) Language Pack for Visual Studio Code (opens new window)中文语言包
• Auto Close Tag (opens new window) 自动添加 HTML 的闭合标签
• Auto Rename Tag (opens new window) 自动重命名配对 HTML 标签
• Color Highlight (opens new window) 在代码中高亮颜色
• Color Picker (opens new window) 取色器
• Highlight Matching Tag (opens new window) 高亮显示匹配的标签
• Image preview (opens new window) 图片预览
• indent-rainbow (opens new window) 彩虹缩进提示
• Path Autocomplete (opens new window) 路径自动补全
除此之外，还需要准备好开发使用的浏览器，推荐使用 Chrome (opens new window) ，并且在 Chrome 里安装好 Vue.js devtools (opens new window) 扩展，这一步很重要，安装 Vue 官方提供的调试工具将大大提升解决 bug 的效率。
TIP
Vue.js devtools 目前有两个版本，分别是正式版和 beta 版，需要安装的是 beta 版。如果之前有安装过正式版，在进行开发调试的时候，需要禁用或删除正式版，也就是只保留一个 Vue.js devtools 扩展才行。
另外，由于 Vue.js devtools 的 Chrome 扩展需要访问 Chrome 应用商店，如果在大陆地区访问，需要自行准备相关可访问外网的工具。如果不具备该条件，也可通过访问 devtools (opens new window) 仓库并下载 .xpi 文件进行本地安装，支持 chrome 和 firefox ，详细说明请访问 Vue.js devtools (opens new window) 官网了解。
# 技术栈
了解并熟悉框架使用到的技术栈，能让你使用本框架更得心应手。
• Vue Router 4 (opens new window)
• Element Plus (opens new window)