创建新项目#
步骤 1：创建新项目
首先,我们将使用 Vite 来创建一个新的项目。请打开您的终端,并运行以下命令：
1pnpm create vite步骤 2：配置项目
在创建过程中,您将被提示输入项目信息。请按照以下建议进行选择：
✔ Project name: … vue3-admin-template
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript
步骤3：进入项目并启动开发服务器
项目配置完成后,进入您的新项目目录,并执行以下命令来安装依赖项并启动开发服务器：
1cd vue3-admin-template
2pnpm install
3pnpm run dev现在,您的项目环境已经搭建完成,您可以开始开发了。
步骤 4：初始化项目结构
为了确保项目的高效和有序开发,以下是推荐的项目结构：
1.
2├─ public # 静态资源目录,直接复制到构建输出目录
3├─ mock # 存放模拟数据和接口的目录
4├─ src
5│ ├─ common # 公共代码和资源目录
6│ │ ├─ apis # API接口目录
7│ │ ├─ assets # 资源目录,包含图标、图片和样式文件等
8│ │ │ ├─ icons
9│ │ │ ├─ images
10│ │ │ └─ styles
11│ │ ├─ components # 可复用组件目录
12│ │ ├─ constants # 常量目录
13│ │ ├─ hooks # 自定义钩子函数目录
14│ │ ├─ plugins # 插件目录
15│ │ ├─ types # TS类型定义文件目录
16│ │ └─ utils # 工具函数目录
17│ ├─ http # HTTP目录
18│ ├─ layouts # 页面布局组件目录
19│ ├─ pages # 应用页面目录
20│ ├─ pinia # Pinia状态管理目录
21│ ├─ router # 路由配置目录
22│ ├─ App.vue # 应用根组件
23│ └─ main.ts # JS入口文件,初始化Vue实例及挂载DOM
24├─ index.html # 应用入口文件
25├─ package.json # 项目依赖管理和脚本配置文件
26├─ README.md # 项目说明文档
27├─ tsconfig.app.json # 应用TS配置文件
28├─ tsconfig.json # 项目TS配置文件
29├─ tsconfig.node.json # Node.js环境下的TS配置文件
30└─ vite.config.ts # Vite配置文件目录