Vue3-template 项目教程

Vue3-template 项目教程

1. 项目目录结构及介绍

Vue3-template/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── store/
│   ├── views/
│   ├── App.vue
│   ├── main.js
├── .env
├── .gitignore
├── package.json
├── README.md
├── vite.config.js

目录结构介绍

• public/: 存放静态资源文件，如 index.html，这些文件不会被构建工具处理。
• src/: 项目的源代码目录。
  • assets/: 存放静态资源文件，如图片、字体等。
  • components/: 存放 Vue 组件文件。
  • router/: 存放 Vue Router 相关配置文件。
  • store/: 存放 Vuex 状态管理相关文件。
  • views/: 存放页面级组件。
  • App.vue: 项目的根组件。
  • main.js: 项目的入口文件。
• .env: 环境变量配置文件。
• .gitignore: Git 忽略文件配置。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。
• vite.config.js: Vite 配置文件。

2. 项目启动文件介绍

main.js

main.js 是项目的入口文件，负责初始化 Vue 应用并挂载到 DOM 上。以下是 main.js 的基本结构：

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

文件功能介绍

• createApp(App): 创建 Vue 应用实例。
• app.use(router): 注册 Vue Router。
• app.use(store): 注册 Vuex 状态管理。
• app.mount('#app'): 将 Vue 应用挂载到 index.html 中的 #app 元素上。

3. 项目配置文件介绍

vite.config.js

vite.config.js 是 Vite 的配置文件，用于配置项目的构建和开发服务器。以下是 vite.config.js 的基本结构：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist'
  }
})

配置项介绍

• plugins: 配置 Vite 插件，这里使用了 @vitejs/plugin-vue 插件来支持 Vue 3。
• server: 配置开发服务器，如端口号和是否自动打开浏览器。
• build: 配置构建输出目录。

.env

.env 文件用于配置环境变量，Vite 会自动加载这些变量。以下是一个示例：

VITE_API_BASE_URL=https://api.example.com

使用方法

在代码中可以通过 import.meta.env.VITE_API_BASE_URL 来访问这些环境变量。

总结

通过以上介绍，你应该对 Vue3-template 项目的目录结构、启动文件和配置文件有了基本的了解。接下来可以根据这些信息进行项目的开发和配置。