📝 作者：一名 Vue 的学习者
🕒 记录时间：2025年12月
💡 目标：熟悉Vue项目结构及.vue文件结构一、Vue项目结构
在使用 npm create vue@latest my-vue-app 命令创建最简单的vue项目后，目录文件结构如下：
css
my-vue-app/
└─ src/
├─ assets/
├─ components/
└─ router/
└─ index.js
├─ views/
├─ main.js
├─ App.vue
├─ index.html
├─ package.json
├─ vite.config.js二、项目文件详解
1、 index.html（页面壳子，挂载点）
默认脚手架有 index.html。确保其中有挂载点 <div id="app"></div> 并且引入了 src/main.js：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Vue App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>作用：浏览器加载此文件，main.js 在这里被执行，Vue 应用会挂载到 div#app 上。
2、 src/main.js（应用入口，创建并挂载 Vue 应用）
把 src/main.js 改为下面内容（或确认与之相似）：
javaScript
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入路由
const app = createApp(App)
app.use(router) // 注册路由（重要）
app.mount('#app') // 挂载到 index.html 的 div#app解释：createApp(App) 创建 Vue 应用实例，app.use(router) 把路由系统安装到应用，最后 mount('#app') 把应用渲染到 index.html 的挂载点。
3、 src/router/index.js（路由定义）
如果你在创建项目时选择了 Router，已经存在路由文件。这里创建一个最简单的路由文件，包含两个页面（Home / About）：
javaScript
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 路由表
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About }
]
const router = createRouter({
history: createWebHistory(), // 使用 HTML5 history 模式
routes
})
export default router解释：每个路由项里 path 是 URL，component 是该 URL 对应渲染的 Vue 组件。
4、 创建视图页面（views）
在 src/views/ 下创建两个文件：Home.vue 和 About.vue。
html
<!-- src/views/Home.vue -->
<template>
<div class="page home">
<h1>Home</h1>
<p>欢迎来到首页！</p>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style scoped>
.page { padding: 16px; }
</style>
html
<!-- src/views/About.vue -->
<template>
<div class="page about">
<h1>About</h1>
<p>这是关于页。</p>
</div>
</template>
<script>
export default {
name: 'About'
}
</script>
<style scoped>
.page { padding: 16px; }
</style>5、 App.vue（根组件，增加简单布局与路由出口）
现在把 App.vue 改为一个带顶部导航与侧边栏的最简单布局，并在中间放置 router-view（路由的渲染位置）：
html
<!-- src/App.vue -->
<template>
<div id="app">
<header class="topbar">
<h2 class="logo">My Vue App</h2>
<nav class="topnav">
<!-- 使用 router-link 进行页面跳转 -->
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
</header>
<div class="container">
<aside class="sidebar">
<ul>
<li><router-link to="/">侧栏：首页</router-link></li>
<li><router-link to="/about">侧栏：关于</router-link></li>
</ul>
</aside>
<main class="main">
<!-- 路由内容会渲染到这里 -->
<router-view />
</main>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
/* 基本样式，仅做布局示例 */
body, html, #app { height: 100%; margin: 0; font-family: Arial, sans-serif; }
.topbar { height: 56px; background:#35495e; color: white; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.logo { margin:0; font-size:18px; }
.topnav a { color: #dbe9ff; margin-left: 12px; text-decoration:none; }
.container { display: flex; height: calc(100vh - 56px); }
.sidebar { width: 200px; background: #f5f7fa; padding: 12px; box-shadow: inset -1px 0 0 rgba(0,0,0,0.05); }
.main { flex: 1; padding: 16px; background: #fff; }
.sidebar ul { list-style:none; padding:0; }
.sidebar li { margin:8px 0; }
</style>解释要点：
router-link替代<a>，它会做前端路由跳转（无页面刷新）。router-view是路由出口 ------ 当前匹配的页面组件会被渲染到这里。- 我做了简单的 header + sidebar + main 布局，帮助你理解常见的后台布局结构。
6、 package.json
json
{
"name": "my-vue-app",
"version": "0.0.0",
"private": true,
"type": "module",
"engines": {
"node": "^20.19.0 || >=22.12.0"
},
"scripts": {
"dev": "vite",
"build": "vite build",
"build:prod": "vite build --mode production",
"build:analyze": "vite build --analyze",
"build:report": "vite build && npx vite-bundle-analyzer dist",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.13.2",
"echarts": "^6.0.0",
"element-plus": "^2.11.7",
"pinia": "^3.0.3",
"vue": "^3.5.22",
"vue-router": "^4.6.3"
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.1",
"vite": "^7.1.11",
"vite-plugin-vue-devtools": "^8.0.3"
}
}主要配置项目名称，定义项目所需框架、版本信息等,我这里主要引入下面这些组件:
vue：3.5.2
element-plus：基于vue的UI框架
axios：主要负责网络请求
echarts：图表展示框架
7、 vite.config.js
javascript
export default defineConfig(({ mode, command }) => {
return {
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
server: {
port: 5173, // 设置开发服务器端口
host: '0.0.0.0', // 允许外部访问
open: true, // 启动时自动打开浏览器
proxy: {}
}
}
})定义本地启动端口等相关信息，打包方式等！
8、 运行并查看效果
bash
npm run dev打开浏览器访问终端给出的地址（通常 http://localhost:5173），同时我们也可以在vite.config.js中修改端口。
三、.vue文件结构
html
<!-- src/views/AboutView.vue -->
<template></template>
<script></script>
<style scoped></style>1. <template> 组件的 HTML 结构（UI）
html
<template>
<div class="page about">
<h1>About</h1>
<p>这是基础设置页面。</p>
</div>
</template>作用：
定义组件渲染到页面上的实际 DOM 内容。
特点：
- 必须有一个根节点（比如
<div>）。 - 可以写正常 HTML、Vue 模板语法（v-if、v-for、绑定等）。
2. <script> 组件的逻辑（JS 代码)
html
<script>
export default {
name: 'BaseSetting',
}
</script>作用：
- 导出当前组件的对象（类似 class）
- 定义组件名称、数据、方法、生命周期等
常见写法：
🔹 传统 Options API
html
export default {
name: 'BaseSetting',
data() { return {} },
methods: {},
mounted() {},
}🔹 Composition API（更推荐）
html
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>3. <style> 组件的样式（CSS）
html
<style scoped>
.page { padding: 16px; }
</style>作用：
给当前组件写样式。
scoped 的意思：
样式只对当前组件生效，不会影响其他页面。
🌱 下一步计划：学习 vue框架的基本语法。