# 使用 Vue 3 + Element Plus 从头开始写一个数据库网站 - 02 - 项目初始化与开发环境设置
# 创建前端项目
# 安装 Node.js 和 pnpm
-
确保你已经安装了 Node.js，建议安装最新的 LTS 版本。
-
安装 pnpm，打开终端并运行以下命令：
npm install -g pnpm
pnpm 是一个快速且高效的包管理工具，相较于 npm 和 yarn，pnpm 具有更好的依赖管理效率。
# 使用 pnpm 初始化 Vue 3 项目
打开终端，使用以下命令创建新的 Vue 3 项目：
pnpm create vue@latest |
在安装过程中，选择 Vue 3 作为框架。pnpm 会自动为您安装所需的依赖项。
你会被问到一些问题，可以按如下方式选择：
√ 请输入项目名称： ... ADDB | |
√ 请输入包名称： ... addb | |
√ 是否使用 TypeScript 语法？ ... 否 | |
√ 是否启用 JSX 支持？ ... 否 | |
√ 是否引入 Vue Router 进行单页面应用开发？ ... 是 | |
√ 是否引入 Pinia 用于状态管理？ ... 是 | |
√ 是否引入 Vitest 用于单元测试？ ... 否 | |
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要 | |
√ 是否引入 ESLint 用于代码质量检测？ ... 是 | |
√ 是否引入 Prettier 用于代码格式化？ ... 是 | |
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 |
完成之后，终端会显示：
项目初始化完成，可执行以下命令： | |
cd ADDB | |
pnpm install | |
pnpm format | |
pnpm dev |
同时 Vue CLI 将会自动生成一个项目骨架：
ADDB/ | |
├── .vscode/ | |
├── node_modules/ | |
├── public/ | |
├── src/ | |
│ ├── assets/ | |
│ ├── components/ | |
│ ├── router/ | |
│ ├── stores/ | |
│ ├── views/ | |
│ ├── App.vue | |
│ ├── main.js | |
├── .eslintrc.cjs | |
├── .gitignore | |
├── .prettierrc.json | |
├── index.html | |
├── jsconfig.json | |
├── package.json | |
├── pnpm-lock.yaml | |
├── README.md | |
├── vite.config.js |
现在我们来了解一下目录结构：
ADDB/：根目录
-
.vscode/: 存放 VS Code 编辑器的配置文件，如调试配置、扩展设置等。这个目录通常包含
.vscode/settings.json、.vscode/launch.json等文件。 -
node_modules/: 这个目录存放了通过
pnpm安装的所有依赖包。一般情况下，这个目录包含项目运行所需的第三方库。 -
public/: 这个目录用于存放静态资源，如
index.html、favicon.ico等。此目录中的文件不会被 Webpack 等工具处理，会直接在打包时复制到输出目录。 -
src/: 这是你项目的源代码目录，包含了应用的主要逻辑和视图。里面有几个子目录：
- assets/: 这个目录通常用于存放静态资源，如图片、字体等，这些资源会通过 Webpack 打包。
- components/: 这里存放了 Vue 组件。这些组件通常是页面的一部分，可以在不同的页面中复用。
- router/: 存放 Vue Router 的配置文件。
index.js文件通常包含了应用的路由定义。 - stores/: 存放用于状态管理的文件。因为你使用了 Pinia，所以这里应该有状态管理相关的配置。
- views/: 这里存放的是 Vue 页面组件，通常对应应用的不同页面。比如你之前创建的
Home.vue页面组件就应该放在这里。
-
App.vue: 这是整个 Vue 应用的根组件。所有页面都会通过
App.vue组件来渲染。 -
main.js: 这是 Vue 应用的入口文件，用于创建 Vue 实例并挂载到 DOM 上。它通常会导入
App.vue和router/index.js，然后启动整个应用。 -
.eslintrc.cjs: 这个文件是 ESLint 的配置文件，用于配置代码风格检查规则。
-
.gitignore: 这个文件指定了哪些文件或目录不应该被 Git 版本控制系统跟踪，比如
node_modules/。 -
.prettierrc.json: 这个文件是 Prettier 的配置文件，用于代码格式化。你可以在这里配置代码格式的规则，比如缩进、换行等。
-
index.html: 这是 Vue 应用的主 HTML 模板文件，应用的所有内容都会被注入到这个文件中。
-
jsconfig.json: 这个文件是 JavaScript 项目的配置文件，通常用于配置 VS Code 的智能提示、模块解析路径等。
-
package.json: 这是项目的配置文件，记录了项目的基本信息、依赖项、脚本命令等。
-
pnpm-lock.yaml: 这是
pnpm的锁定文件，记录了所有安装的依赖项及其版本，确保团队成员之间安装的依赖版本一致。 -
README.md: 这个文件通常用于项目的自述文档，描述项目的用途、安装步骤、使用方法等。
-
vite.config.js: 这是 Vite 的配置文件，用于配置 Vite 构建工具的相关选项，比如插件、代理等。
# 安装和配置 Element Plus
进入项目目录后，使用 pnpm 安装 Element Plus：
cd ADDB | |
pnpm add element-plus |
接着在 src/main.js 文件的对应位置中添加以下语句以引入 Element Plus：
import ElementPlus from 'element-plus' | |
import 'element-plus/dist/index.css' | |
app.use(ElementPlus) |
# 后端项目设置
这一部分我们将在后面讲到，先暂时跳过。
# 其他
# 项目依赖安装与管理
使用 pnpm 可以方便地安装、更新和移除项目依赖。以下是常用命令：
- 安装依赖：
pnpm add package-name - 更新依赖：
pnpm update package-name - 移除依赖：
pnpm remove package-name
# VS Code 插件推荐和配置
- Vue - Official：提供 Vue 3 的语法高亮和智能提示。
- CodeGeeX：智谱 AI 研发的基于大模型的智能编程助手。
