一、技术选型
组件大类 | 具体插件 | vue3插件 | 相关插件开发文档 |
基础架构搭建 | 初始项目搭建、打包 | 构件工具:vite | 开始 | Vite |
路由管理及菜单权限封装 | vue-router | 介绍 | Vue Router | |
状态管理 | Pinia | 介绍 | Pinia 中文文档 | |
API请求及异常封装 | axios | ||
UI框架 | element-ui | https://element-plus.org/zh-CN/guide/nav.html | |
ant design vue | Ant Design Vue — An enterprise-class UI components based on Ant Design and Vue.js | ||
样式解析、自定义、主题 | less/sass/scss/stylus | ||
国际化及自动化工具 | i18n | ||
开发风格统一 | ESLint + Prettier+提交规范 |
二、快速构建项目
一)从头开始创建项目
方式1、从头构建 Vue 3 项目
1、使用 Vite
Vite是目前最推荐的方式来创建 Vue 3 项目,因为它速度快,配置简洁,并且是 Vue 3 的官方推荐工具。
npm create vite@latest my-vue3-project --template vue //创建项目
npm install //安装依赖
npm run dev //运行项目
打开浏览器并访问 `http://localhost:5173`,你将看到一个基本的 Vue 3 应用程序运行。
注意:
1、若需要使用不同版本node(兼容新旧项目环境),则需要使用nvm来进行node多版本管理,下载nvm-windows并安装。
nvm install 18 # 安装 Node.js 18.x
nvm ls # 查看当前已安装的 Node.js 版本
nvm use 18 # 切换到 Node.js 18.x
2、若出现某个依赖安装报错,可以npm install --ignore-scripts,最后再来单独安装报错的依赖。
2、使用 Vue CLI
如果您正在从零开始构建新的 Vue 项目,尤其是基于 Vue 3,Vite 是推荐的选择。
- Vite 非常适合新项目、需要快速开发和高效构建的大型项目、现代化开发环境。
- Vue CLI 更适合已经使用
webpack
的旧项目、需要复杂配置或对现有生态非常依赖的项目。
方式2、使用已有的模板/项目
Vitesse:一个开箱即用的 Vue 3 + Vite 模板,集成了 TypeScript、Pinia、Vue Router、国际化支持等。
PanJiaChen/vue-element-admin:基于 Vue 和 Element Plus 构建的后台管理系统,功能丰富且高度可定制。
vueComponent/ant-design-vue-pro:基于 Ant Design Vue 构建的后台管理系统,提供了类似于 Ant Design Pro 的体验。
anncwb/vue-vben-admin:模块化、易扩展,提供丰富的组件和功能,如权限控制、国际化、多标签页、图表等。
二)构建过程问题
1、依赖安装
这个错误表示在使用 pnpm
安装依赖时,尝试从 GitHub 上拉取某个依赖包时遇到了权限问题。具体来说,你的本地机器未正确配置用于 SSH 访问 GitHub 的公钥。以下是如何解决的步骤:
解决方法:
-
检查 SSH 密钥是否存在
- 确保你的本地机器上已配置了 SSH 密钥:
ls ~/.ssh/id_rsa.pub
- 如果文件不存在,使用以下命令生成 SSH 密钥:
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
- 确保你的本地机器上已配置了 SSH 密钥:
-
将 SSH 公钥添加到 GitHub
cat ~/.ssh/id_rsa.pub
- 登录 GitHub 并导航到 Settings > SSH and GPG keys。
- 点击 New SSH key,然后粘贴公钥并保存。
-
测试 SSH 连接到 GitHub
- 验证 SSH 是否正常工作:
ssh -T git@github.com
- 如果配置正确,你会看到一条欢迎消息。
- 验证 SSH 是否正常工作:
-
修改 GitHub URL 使用 HTTPS
如果不想使用 SSH,可以将 git
URL 改为 HTTPS,以避免使用 SSH 密钥。
git config --global url."https://github.com/".insteadOf "git@github.com:"