Admin Work 项目教程

Admin Work 项目教程

admin-work Vue3 和 NaiveUI 的完美结合—Admin Work，拥有漂亮、强大、完善的功能。采用 Vue3 Vite2 Typescript NaiveUI Pinia编写的中后台框架。全面的系统配置，优质模板，常用组件，真正一站式开箱即用。持续更新，不断完善，一直在前进~~ 项目地址: https://gitcode.com/gh_mirrors/ad/admin-work

1. 项目目录结构及介绍

Admin Work 的目录结构如下：

admin-work/
├── .vscode/
├── mock/
├── public/
│   └── index.html
├── src/
│   ├── api/
│   ├── assets/
│   ├── components/
│   ├── layouts/
│   ├── store/
│   ├── styles/
│   ├── utils/
│   ├── views/
│   ├── App.vue
│   ├── main.ts
│   └── vite.config.ts
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── postcss.config.js
├── prettier.config.js
├── tailwind.config.js
└── tsconfig.json

• .vscode/: 存放 Visual Studio Code 的项目配置文件。
• mock/: 模拟数据文件夹，用于开发阶段的模拟请求。
• public/: 公共文件夹，包含网页的入口文件。
  • index.html: 网页的入口HTML文件。
• src/: 源代码文件夹，包含项目的核心代码。
  • api/: 接口请求相关文件。
  • assets/: 存放静态资源，如图片、样式表等。
  • components/: Vue组件文件夹，存放可复用的组件。
  • layouts/: 布局组件文件夹。
  • store/: 状态管理文件夹，使用Pinia进行状态管理。
  • styles/: 样式文件文件夹。
  • utils/: 工具函数文件夹。
  • views/: 页面文件文件夹，存放页面的Vue组件。
  • App.vue: 主组件，通常是应用的根组件。
  • main.ts: 主入口文件，用于启动Vue应用。
  • vite.config.ts: Vite的配置文件。
• .eslintignore: ESLint忽略文件列表。
• .eslintrc.js: ESLint配置文件。
• .gitignore: Git忽略文件列表。
• CHANGELOG.md: 更新日志文件。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文件。
• package.json: 项目依赖和脚本配置文件。
• postcss.config.js: PostCSS配置文件。
• prettier.config.js: Prettier配置文件。
• tailwind.config.js: Tailwind CSS配置文件。
• tsconfig.json: TypeScript配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/main.ts，以下是该文件的内容概览：

import { createApp } from 'vue'
import App from './App.vue'
import { setupStore } from './store'

const app = createApp(App)

// 配置Pinia状态管理
setupStore(app)

app.mount('#app')

在 main.ts 文件中，首先导入了 vue 和 App.vue 主组件，然后调用 createApp 方法创建了一个Vue应用实例。接着，调用了 setupStore 函数来配置Pinia状态管理。最后，调用 mount 方法将Vue应用挂载到页面上的 #app 元素。

3. 项目的配置文件介绍

项目的配置文件主要包括 vite.config.ts 和 .env.* 环境变量文件。

vite.config.ts

vite.config.ts 是Vite的配置文件，用于定制Vite的行为。以下是一个基本的配置示例：

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

export default defineConfig({
  plugins: [vue()],
  // 其他配置...
})

在这个配置文件中，我们导入了 defineConfig 函数和 vue 插件，然后使用 defineConfig 定义了Vite的配置。

环境变量文件

环境变量文件包括 .env.development、.env.production 和 .env.staging，这些文件用于在不同的环境下设置不同的环境变量。以下是 .env.development` 的一个示例：

# 开发环境变量
VUE_APP_TITLE=Admin Work
VUE_APP_API_URL=http://localhost:3000

这些变量可以在应用中通过 process.env.VUE_APP_TITLE 和 process.env.VUE_APP_API_URL 等方式访问。

admin-work Vue3 和 NaiveUI 的完美结合—Admin Work，拥有漂亮、强大、完善的功能。采用 Vue3 Vite2 Typescript NaiveUI Pinia编写的中后台框架。全面的系统配置，优质模板，常用组件，真正一站式开箱即用。持续更新，不断完善，一直在前进~~ 项目地址: https://gitcode.com/gh_mirrors/ad/admin-work