Art Design Pro 项目教程

1. 项目目录结构及介绍

Art Design Pro 的目录结构如下所示：

art-design-pro/
├── .husky/                     # Husky 配置目录
├── .vscode/                    # VSCode 配置目录
├── public/                     # 公共文件目录
├── src/                        # 源代码目录
│   ├── auto-imports.d.ts        # 自动导入类型声明
│   ├── env.d.ts                # 环境变量类型声明
│   ├── ...
│   ├── assets/                 # 静态资源目录
│   ├── components/             # 组件目录
│   ├── layouts/                # 布局目录
│   ├── pages/                  # 页面目录
│   ├── store/                  # 状态管理目录
│   ├── utils/                  # 工具库目录
│   ├── ...
│   ├── App.vue                 # 根组件
│   ├── main.ts                 # 入口文件
├── ...
├── .gitattributes              # Git 属性配置
├── .gitignore                  # Git 忽略文件
├── .prettierignore             # Prettier 忽略文件
├── .prettierrc                 # Prettier 配置文件
├── .stylelintignore            # Stylelint 忽略文件
├── .stylelintrc.cjs            # Stylelint 配置文件
├── LICENSE                     # 开源协议文件
├── README.md                   # 项目说明文件
├── commitlint.config.cjs       # Commit 规则配置
├── eslint.config.mjs           # ESlint 配置文件
├── index.html                  # 入口 HTML 文件
├── npminstall-debug.log         # npm 安装日志
├── package.json                # 项目依赖描述文件
├── pnpm-lock.yaml              # pnpm 锁文件
├── tsconfig.json               # TypeScript 配置文件
└── vite.config.ts              # Vite 配置文件

• .husky/: Husky 配置目录，用于配置 Git Hook，以确保代码提交前进行格式化和检查。
• .vscode/: VSCode 配置目录，存放项目专用的 VSCode 配置。
• public/: 公共文件目录，通常包含不会改变的静态文件，如图片、字体等。
• src/: 源代码目录，包含项目的所有源代码。
• assets/: 静态资源目录，存放项目的静态资源。
• components/: 组件目录，存放可复用的 Vue 组件。
• layouts/: 布局目录，存放页面布局组件。
• pages/: 页面目录，存放 Vue 页面组件。
• store/: 状态管理目录，存放 Vuex 相关的状态管理逻辑。
• utils/: 工具库目录，存放项目中常用的工具函数。
• App.vue: 根组件，整个应用的根 Vue 实例。
• main.ts: 入口文件，用于创建 Vue 实例并挂载到 DOM。

2. 项目的启动文件介绍

项目的启动文件是 src/main.ts，其主要作用是创建 Vue 实例，并挂载到 DOM 上。以下是 main.ts 的基本内容：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.mount('#app');

在 main.ts 文件中，首先导入了 vue 和根组件 App.vue，然后使用 createApp 方法创建 Vue 应用实例，并通过 mount 方法将应用挂载到 DOM 的 #app 元素上。

3. 项目的配置文件介绍

项目的主要配置文件包括 vite.config.ts、.eslintrc.js、.prettierrc 和 .stylelintrc.cjs。

• vite.config.ts: Vite 配置文件，用于配置 Vite 的行为，如指定构建目标、配置代理等。
• .eslintrc.js: ESlint 配置文件，用于配置 JavaScript 代码的检查规则。
• .prettierrc: Prettier 配置文件，用于配置代码格式化规则。
• .stylelintrc.cjs: Stylelint 配置文件，用于配置 CSS 样式的检查规则。

这些配置文件确保代码的一致性和风格，有助于维护代码质量和开发效率。