Vue学习笔记

原创已于 2026-06-15 20:31:28 修改 · 261 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #学习 #笔记

收录于

于 2026-06-15 19:59:28 首次发布

一、项目结构

src/
├── main.js          # 入口文件，创建 Vue 应用
├── App.vue          # 根组件
├── components/      # 组件目录
│   ├── Header.vue
│   └── Footer.vue
├── views/           # 页面目录（配合路由使用）
│   ├── Home.vue
│   └── About.vue
├── router/          # 路由配置
│   └── index.js
├── stores/          # 状态管理（Pinia）
│   └── counter.js
└── api/             # 接口请求
    └── user.js

二、组件

Vue 把页面拆成一个个可复用的小块，如页面 = 导航栏组件 + 侧边栏组件 + 内容区组件
Vue 组件格式（单文件组件 .vue）：

<!-- HelloVue.vue -->
<!-- html -->
<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">换一句话</button>
  </div>
</template>

<!-- script脚本 -->
<script setup>
import { ref } from 'vue'

// 响应式数据
const message = ref('你好，Vue！')

// 方法
function changeMessage() {
  message.value = 'Vue 真好玩！'
}
</script>

<!-- css样式 -->
<style scoped>
.hello {
  color: #42b983;
}
</style>

三、路由

定义了url展示的界面

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: () => import('../views/About.vue') }  // 懒加载
  ]
})

export default router