Vue Pure Admin 项目教程
vue-pure-admin项目地址:https://gitcode.com/gh_mirrors/vue/vue-pure-admin
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项目地址:https://gitcode.com/gh_mirrors/vue/vue-pure-admin