【亲测免费】 Arco Design Pro Vue 项目教程

1. 项目的目录结构及介绍

Arco Design Pro Vue 项目的目录结构如下：

arco-design-pro-vue/
├── arco-cli
├── docs
├── scripts
├── src
│   ├── assets
│   ├── components
│   ├── config
│   ├── layouts
│   ├── locales
│   ├── mock
│   ├── router
│   ├── store
│   ├── styles
│   ├── utils
│   ├── views
│   ├── App.vue
│   ├── main.ts
│   └── shims-vue.d.ts
├── .gitignore
├── .npmignore
├── .prettierrc.js
├── CODE_OF_CONDUCT.md
├── commitlint.config.js
├── LICENSE
├── package.json
├── pnpm-lock.yaml
├── README.md
└── README.zh-CN.md

目录结构介绍

• arco-cli: 包含 Arco CLI 相关文件。
• docs: 包含项目文档。
• scripts: 包含项目脚本。
• src: 源代码目录。
  • assets: 静态资源文件。
  • components: 项目组件。
  • config: 项目配置文件。
  • layouts: 页面布局组件。
  • locales: 国际化文件。
  • mock: 模拟数据文件。
  • router: 路由配置文件。
  • store: 状态管理文件。
  • styles: 样式文件。
  • utils: 工具函数。
  • views: 页面视图组件。
  • App.vue: 主应用组件。
  • main.ts: 项目入口文件。
  • shims-vue.d.ts: Vue 类型声明文件。
• .gitignore: Git 忽略文件配置。
• .npmignore: NPM 忽略文件配置。
• .prettierrc.js: Prettier 代码格式化配置。
• CODE_OF_CONDUCT.md: 行为准则。
• commitlint.config.js: Commitlint 配置文件。
• LICENSE: 项目许可证。
• package.json: 项目依赖和脚本配置。
• pnpm-lock.yaml: PNPM 锁定文件。
• README.md: 项目英文说明文档。
• README.zh-CN.md: 项目中文说明文档。

2. 项目的启动文件介绍

项目的启动文件是 src/main.ts，它是整个项目的入口文件。以下是 main.ts 的简要介绍：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './styles/global.less';

const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');

启动文件介绍

• createApp(App): 创建 Vue 应用实例。
• app.use(router): 挂载路由配置。
• app.use(store): 挂载状态管理配置。
• app.mount('#app'): 将应用挂载到 DOM 元素 #app 上。

3. 项目的配置文件介绍

项目的配置文件主要位于 src/config 目录下，以下是一些关键配置文件的介绍：

src/config/index.ts

这是主要的配置文件，包含了项目的全局配置：

export default {
  // 项目名称
  name: 'Arco Design Pro',
  // 项目版本
  version: '1.0.0',
  // 开发环境配置
  dev: {
    // 开发服务器端口
    port: 8080,
  },
  // 生产环境配置
  build: {
    // 输出目录
    outDir: 'dist',
  },
};

src/config/router.ts

这是路由配置文件，定义了项目的路由规则：

import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes';

const router = createRouter({
  history: createWebHistory(),