Vue Pure Admin 项目教程

2026-01-16 10:03:51作者：曹令琨Iris

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

vue-pure-admin/
├── public/
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── store/
│   ├── views/
│   ├── App.vue
│   └── main.ts
├── .gitignore
├── .eslintrc.js
├── .prettierrc
├── babel.config.js
├── package.json
├── README.md
└── tsconfig.json

目录结构介绍

public/: 存放静态资源文件，如 index.html。
src/: 项目的主要源代码目录。
- assets/: 存放静态资源，如图片、字体等。
- components/: 存放可复用的 Vue 组件。
- router/: 存放 Vue Router 相关配置文件。
- store/: 存放 Vuex 状态管理相关文件。
- views/: 存放页面级别的组件。
- App.vue: 项目的根组件。
- main.ts: 项目的入口文件。
.gitignore: Git 忽略文件配置。
.eslintrc.js: ESLint 配置文件。
.prettierrc: Prettier 代码格式化配置文件。
babel.config.js: Babel 配置文件。
package.json: 项目依赖和脚本配置文件。
README.md: 项目说明文档。
tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

main.ts

main.ts 是项目的入口文件，负责初始化 Vue 应用并挂载到 DOM 上。

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');

index.html

public/index.html 是项目的入口 HTML 文件，包含一个根元素 #app，Vue 应用将挂载到这个元素上。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Pure Admin</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本命令和其他元数据。

{
  "name": "vue-pure-admin",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^3.0.0",
    "vue-router": "^4.0.0",
    "vuex": "^4.0.0",
    "element-plus": "^1.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.0",
    "@vue/cli-plugin-eslint": "^4.5.0",
    "@vue/cli-service": "^4.5.0",
    "eslint": "^7.0.0",
    "eslint-plugin-vue": "^7.0.0"
  }
}

tsconfig.json

tsconfig.json 文件是 TypeScript 的配置文件，定义了编译选项和文件包含规则。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,

登录后查看全文

Vue Pure Admin 项目教程

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

目录结构介绍

2. 项目的启动文件介绍

main.ts

index.html

3. 项目的配置文件介绍

package.json

tsconfig.json

热门内容推荐

项目优选

Vue Pure Admin 项目教程

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

目录结构介绍

2. 项目的启动文件介绍

main.ts

index.html

3. 项目的配置文件介绍

package.json

tsconfig.json

相关内容推荐

热门内容推荐

项目优选