Vue 目录结构 vite 项目
免费下载资源
Vue3 项目常用的目录结构和每个文件的作用【通过 vite 创建的项目】
vite目录结构：
dist // 打包后生成的文件目录
node_modules // 环境依赖
public // 公共资源目录
favicon.ico // 网站图标
src // 项目核心文件夹
assets // 静态资源目录
components // 组件目录
router // 路由配置文件目录
index.js // 路由配置文件
stores // pinia配置文件目录
counter.js // pinia配置文件
views // 页面文件目录
App.vue // 根组件
main.js // 入口文件
.gitignore // git忽略提交配置文件
index.html // 入口页面
package-lock.json // 插件版本锁定文件
package.json // 插件管理文件
README.md // 项目说明文件
vite.config.js // vite的配置文件
dist 文件夹：用于存放我们使用 npm run build 命令打包后的项目文件。
node_modules 文件夹：用于存放项目的各种依赖，比如 axios 等。没有 node_modules 文件夹项目就没法运行，可以使用 npm install 安装项目依赖。
public 文件夹：用于存放公共的静态资源，这里的资源不会被 vite 打包处理。
public / favicon.ico 图标：网站标签页中的小图标。
src 文件夹：项目的核心文件夹，我们所写的代码都放在这个文件夹里。
src / assets 文件夹：用于存放各种静态资源，img、css 等等。
src / components 文件夹：用于存放我们的公共组件，如 header、footer 等自定义组件。
src / router 文件夹：用于存放路由配置文件，路由配置文件可以理解为各个页面的地址路径，用于让我们访问，同时也可以在里边编写全局路由守卫。
src / stores 文件夹：用于存放 pinia 配置文件，pinia 就是一个公共的数据管理文件，里边存放着项目需要用到的数据。
src / views 文件夹：用于存放我们开发的 vue 页面，如 login、home 等页面。
src / App.vue 文件：根组件，是项目的主组件，所有的页面都要通过 App.vue 组件显示。
src / main.js 文件：入口文件，主要用于初始化 Vue 实例，也可以在此文件中引入一些组件库或者全局挂载一些变量。
.gitignore 文件：用于配置 git 上传时需要忽略上传的文件。
index.html 文件：项目入口页面，vite 打包后的 js、css 也会自动引入到该页面中，浏览器访问项目的时候会默认打开生成好的 index.html 文件。
package-lock.json 文件：在 npm install 时生成的一份文件，用于记录当前项目实际安装的各个插件具体来源地址和版本号。并且在 npm install 时，会根据该文件生成 node_modules 文件夹。
package.json 文件：插件的基本信息，包含项目开发时所需要的插件版本，项目名称等等。
README.md 文件：项目的说明文件，可以记录项目开发时的版本和开发内容。
vite.config.js 文件：vue 的配置文件，可以用来设置代理、打包等配置。
vite 项目运行流程：
一、项目运行时会先执行 index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>如果开发移动端，可以将 meta 标签换成以下内容，禁止用户手动缩放。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">二、执行 src / main.js 文件，在此文件中引入 Vue 与各种插件，并创建 Vue 实例。
// 引入公共 CSS 文件，如果不想要可以删掉
// 也可以将 src/assets 目录中的 base.css 和 main.css 一并删掉。
import "./assets/main.css";
// 引入 Vue 中的 createApp 工厂函数
import { createApp } from "vue";
// 引入 pinia 状态管理
import { createPinia } from "pinia";
// 引入 App 根组件
import App from "./App.vue";
// 引入路由配置
import router from "./router";
// 创建 Vue 实例，并将 App 根组件添加到页面中
const app = createApp(App);
// 应用 pinia
app.use(createPinia());
// 应用路由
app.use(router);
// 将 id 为 app 的元素挂载到 Vue 实例上
app.mount("#app");三、执行 main.js 中引入的各种插件，包括 src / router / index.js 路由配置文件
import { createRouter, createWebHistory } from "vue-router";
// 引入组件（方式一）
import HomeView from "../views/HomeView.vue";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), // 历史模式
routes: [
{
path: "/", // 这个 / 表示首页
name: "home", // 路由名称
component: HomeView, // 使用组件（方式一）
},
{
path: "/about", // 路由路径
name: "about", // 路由名称
// 路由懒加载（方式二）
component: () => import("../views/AboutView.vue"),
},
],
});
export default router;四、执行 App.vue 根组件，通过 RouterView 加载路由配置的首页（path 为 / 的页面）。
<template>
<RouterView />
</template>
五、执行路由配置的首页 src / views / HomeView.vue 文件
<template>
<!-- Vue3 可以不写根标签 -->
<p class="title">{{ title }}</p>
</template>
<script>
// Vue3 支持 Vue2 的写法
export default {
name: "HomeView",
data() {
return {
title: "首页"
}
}
}
</script>
<style scoped>
.title {
background-color: aqua;
}
</style>注：vite 的目录结构并非一成不变，具体的执行流程还需要结合实际情况。
原创作者: 吴小糖
创作时间：2023.8.14
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
1
0- 0
已为社区贡献9条内容
所有评论(0)