使用 Vue 3 + Element Plus 从头开始写一个数据库网站-02-项目初始化与开发环境设置

创建前端项目

安装 Node.js 和 pnpm

• 确保你已经安装了 [Node.js](https://nodejs.org/)，建议安装最新的 LTS 版本。

• 安装 pnpm，打开终端并运行以下命令：

使用 pnpm 初始化 Vue 3 项目

• **.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 add package-name`

• 更新依赖：`pnpm update package-name`

• 移除依赖：`pnpm remove package-name`

VS Code 插件推荐和配置

• **Vue - Official**：提供 Vue 3 的语法高亮和智能提示。

• **CodeGeeX**：智谱 AI 研发的基于大模型的智能编程助手。