开源项目 wocwin-admin 使用教程
wocwin-adminwocwin-admin,基于 Vue3.3、TypeScript、Vite4.3、Pinia、Element-Plus 开源的一套后台管理模板。项目地址:https://gitcode.com/gh_mirrors/wo/wocwin-admin
1. 项目的目录结构及介绍
wocwin-admin/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── assets/
│ │ ├── logo.png
│ │ └── styles/
│ ├── components/
│ │ ├── HelloWorld.vue
│ │ └── ...
│ ├── router/
│ │ ├── index.ts
│ │ └── ...
│ ├── store/
│ │ ├── index.ts
│ │ └── ...
│ ├── views/
│ │ ├── Home.vue
│ │ └── ...
│ ├── App.vue
│ ├── main.ts
│ └── shims-vue.d.ts
├── .gitignore
├── .eslintrc.js
├── .prettierrc
├── babel.config.js
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md
目录结构说明
public/
: 存放静态资源文件,如 index.html
和 favicon.ico
。src/
: 项目的主要源代码目录。
assets/
: 存放项目所需的静态资源,如图片和样式文件。components/
: 存放可复用的 Vue 组件。router/
: 存放 Vue 路由配置文件。store/
: 存放 Pinia 状态管理文件。views/
: 存放页面级别的 Vue 组件。App.vue
: 项目的根组件。main.ts
: 项目的入口文件。shims-vue.d.ts
: 用于 TypeScript 识别 .vue
文件的类型定义。
.gitignore
: Git 忽略文件配置。.eslintrc.js
: ESLint 配置文件。.prettierrc
: Prettier 代码格式化配置文件。babel.config.js
: Babel 配置文件。package.json
: 项目依赖和脚本配置文件。tsconfig.json
: TypeScript 配置文件。vite.config.ts
: Vite 构建工具配置文件。README.md
: 项目说明文档。
2. 项目的启动文件介绍
main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
const app = createApp(App);
app.use(router);
app.use(store);
app.use(ElementPlus);
app.mount('#app');
启动文件说明
- 导入 Vue 的
createApp
函数。 - 导入根组件
App.vue
。 - 导入路由配置
router
。 - 导入状态管理配置
store
。 - 导入 Element-Plus 组件库并应用其样式。
- 创建 Vue 应用实例并挂载到
#app
元素上。
3. 项目的配置文件介绍
vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
},
},
server: {
port: 3000,
},
});
配置文件说明
- 使用
defineConfig
函数定义 Vite 配置。 - 引入
@vitejs/plugin-vue
插件以支持 Vue 3。 - 配置路径别名
@
指向 src
目录。 - 配置开发服务器端口为 3000。
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
wocwin-adminwocwin-admin,基于 Vue3.3、TypeScript、Vite4.3、Pinia、Element-Plus 开源的一套后台管理模板。项目地址:https://gitcode.com/gh_mirrors/wo/wocwin-admin