vite-vue-admin 教程

vite-vue-admin 教程

vite-vue-admin🎉🎉使用Vite + Vue3 + Pinia + Vue-router + TypeScript + Element-plus + Mock开发的后台管理系统🎉🎉项目地址:https://gitcode.com/gh_mirrors/vi/vite-vue-admin

1. 项目目录结构及介绍

.
├── public         # 静态资源目录
│   ├── favicon.ico  # 页面图标
│   └── index.html   # 应用入口HTML文件
├── src            # 源码目录
│   ├── api          # API接口文件
│   ├── assets       # 资产文件，如图片、字体等
│   ├── components   # 自定义组件
│   ├── directives   # 自定义指令
│   ├── layouts      # 布局组件
│   ├── views        # 页面组件
│   ├── App.vue      # 应用主组件
│   ├── main.ts      # 应用入口文件
│   ├── router       # 路由配置
│   ├── store        # Vuex状态管理
│   ├── shims.d.ts   # 类型声明
│   ├── i18n         # 国际化配置
│   └── index.html   # 项目源码中的HTML模板
└── vite.config.ts  # vite配置文件

这个目录结构包含了Vite Vue应用的标准组成部分，包括静态资源、源代码、API调用、组件、路由、状态管理和配置。

2. 项目的启动文件介绍

main.ts src/main.ts 文件是应用程序的入口点，它导入Vue实例，设置Vue插件如Vue Router, Vuex以及应用的根组件（App.vue）。例如：

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

createApp(App)
  .use(store)
  .use(router)
  .mount('#app');

这行代码创建了一个Vue应用，安装并挂载了路由器和状态存储到DOM元素#app。

3. 项目的配置文件介绍

vite.config.ts vite.config.ts 用于配置Vite的各项设置，如服务器端口、publicPath、CSS预处理器、优化选项等。下面是一些常见的配置项示例：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,  // 设置开发服务器监听的端口号
    host: '0.0.0.0',  // 允许外部访问
  },
  build: {
    target: 'esnext',
    minify: true,
    outDir: 'dist',  // 输出目录
  },
  resolve: {
    alias: [{ find: '@', replacement: '/src' }],  // 配置别名
  },
});

在这个配置文件中，我们可以看到：

• plugins：添加Vite插件，这里是Vue插件。
• server：设置开发服务器的相关配置，比如端口号和允许的主机。
• build：打包相关的配置，如输出目标、压缩和输出目录。
• resolve.alias：设置路径别名，便于简化模块引入。

了解这些核心文件和配置后，您应该能够更好地理解和开始开发 vite-vue-admin 项目了。如果需要更详细的指导或遇到问题，请查阅项目文档或向社区寻求帮助。

vite-vue-admin🎉🎉使用Vite + Vue3 + Pinia + Vue-router + TypeScript + Element-plus + Mock开发的后台管理系统🎉🎉项目地址:https://gitcode.com/gh_mirrors/vi/vite-vue-admin