【亲测免费】 vue-pure-admin 精简版使用教程

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

pure-admin-thin/
├── build/
│   ├── vite.config.ts
│   └── ...
├── mock/
│   └── ...
├── public/
│   └── ...
├── src/
│   ├── assets/
│   ├── components/
│   ├── layouts/
│   ├── router/
│   ├── store/
│   ├── styles/
│   ├── utils/
│   ├── views/
│   ├── App.vue
│   ├── main.ts
│   └── ...
├── types/
│   └── ...
├── .browserslistrc
├── .dockerignore
├── .editorconfig
├── .env
├── .env.development
├── .env.production
├── .env.staging
├── .gitignore
├── .lintstagedrc
├── .markdownlint.json
├── .npmrc
├── .nvmrc
├── .prettierrc.js
├── .stylelintignore
├── Dockerfile
├── LICENSE
├── README.en-US.md
├── README.md
├── commitlint.config.js
├── eslint.config.js
├── index.html
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── stylelint.config.js
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts

目录结构介绍

• build/: 存放构建相关的配置文件，如 vite.config.ts。
• mock/: 存放模拟数据的文件。
• public/: 存放公共静态资源文件。
• src/: 项目的主要源代码目录，包含以下子目录：
  • assets/: 存放静态资源文件，如图片、字体等。
  • components/: 存放可复用的 Vue 组件。
  • layouts/: 存放页面布局组件。
  • router/: 存放 Vue Router 配置文件。
  • store/: 存放 Vuex 状态管理文件。
  • styles/: 存放全局样式文件。
  • utils/: 存放工具函数和辅助函数。
  • views/: 存放页面视图组件。
  • App.vue: 项目的根组件。
  • main.ts: 项目的入口文件。
• types/: 存放 TypeScript 类型定义文件。
• 其他文件: 包含各种配置文件，如 .gitignore、.eslintrc.js、tsconfig.json 等。

2. 项目的启动文件介绍

main.ts

main.ts 是项目的入口文件，负责初始化 Vue 应用并挂载到 DOM 节点上。以下是 main.ts 的主要内容：

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

const app = createApp(App);

app.use(router);
app.use(store);

app.mount('#app');

主要功能

• 导入 Vue 和相关模块: 导入 createApp 函数、App 组件、router 和 store。
• 创建 Vue 应用实例: 使用 createApp(App) 创建 Vue 应用实例。
• 挂载路由和状态管理: 使用 app.use(router) 和 app.use(store) 挂载路由和状态管理。
• 挂载到 DOM 节点: 使用 app.mount('#app') 将应用挂载到 index.html 中的 #app 节点上。

3. 项目的配置文件介绍

vite.config.ts

vite.config.ts 是 Vite 的配置文件，用于配置项目的构建和开发环境。以下是 vite.config.ts 的主要内容：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
  },
});

主要配置项

• plugins: 配置 Vite 插件，如 @vitejs/plugin-vue 用于支持 Vue 3。
• resolve.alias: 配置路径别名，方便在项目中使用相对路径。
• server: 配置开发服务器，如端口号和是否自动打开浏览器。
• build: 配置构建选项，如输出目录和静态资源目录。

package.json

package.json 是项目的依赖管理文件，包含项目的元数据和依赖包。以下是 package.json 的主要内容：

{
  "name": "pure-admin-thin",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.0.0",
    "typescript": "^4.0.0",
    "vite": "^2.0.0"
  }
}

主要配置项

• scripts: 定义项目的脚本命令，如 dev、build 和 serve。
• dependencies: 定义项目运行时的依赖包。
• devDependencies: 定义项目开发时的依赖包。

通过以上配置文件，可以方便地启动、构建和调试项目。