Vue入门

简介

Vue.js 是一款渐进式的前端框架，核心库专注于视图层，易于上手且与其他库或已有项目轻松集成。Vue 3 在性能、体积和 TypeScript 支持上都有重大改进，引入了 Composition API 等新特性。

---

环境搭建与项目创建

通过 CDN 引入

适合快速试用与小型页面。

html复制编辑<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="app">{{ message }}</div>
<script>
  const App = {
    data() { return { message: 'Hello Vue!' } }
  };
  Vue.createApp(App).mount('#app');
</script>

使用 Vue CLI

官方提供的全家桶脚手架，支持图形化配置。

bash复制编辑npm install -g @vue/cli
vue create my-vue-app
cd my-vue-app
npm run serve

使用 Vite

更轻、更快的现代打包工具，官方推荐。

bash复制编辑npm init vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

---

项目结构

典型 Vite + Vue 3 结构示例：

csharp复制编辑my-vue-app/
├─ index.html
├─ src/
│  ├─ assets/         # 静态资源
│  ├─ components/     # 公共组件
│  ├─ views/          # 视图（路由页面）
│  ├─ router/         # 路由配置
│  ├─ store/          # 状态管理
│  ├─ App.vue         # 根组件
│  └─ main.js         # 入口
├─ public/            # 公共资源
├─ vite.config.js     # Vite 配置
└─ package.json

---

模板语法

数据绑定

• 插值：双大括号 {{ ... }}

• v-bind：绑定属性，缩写 :

  html
  
  
  复制编辑
  <img :src="imageUrl" alt="图片">

指令（Directives）

• v-if、v-else-if、v-else
• v-show
• v-for
• v-model（双向绑定）
• v-on（事件绑定，缩写 @）

事件处理

html


复制编辑
<button @click="handleClick">点击</button>
js复制编辑methods: {
  handleClick(event) {
    console.log('按钮被点击了', event);
  }
}

列表渲染

html复制编辑<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

条件渲染

html复制编辑<p v-if="isLoggedIn">欢迎回来！</p>
<p v-else>请先登录。</p>

---

组件系统

组件注册

• 全局注册（不推荐，可能导致打包体积大）
• 局部注册（推荐）

js复制编辑import MyComponent from './components/MyComponent.vue';
export default {
  components: { MyComponent }
}

Props 与自定义事件

vue复制编辑<!-- 子组件 Child.vue -->
<script setup>
defineProps({ title: String });
const emit = defineEmits(['update']);
function onClick() { emit('update', '新值'); }
</script>
<template>
  <h3>{{ title }}</h3>
  <button @click="onClick">更新</button>
</template>
vue复制编辑<!-- 父组件 -->
<Child title="初始" @update="val => console.log(val)" />

插槽（Slots）

• 默认插槽
• 具名插槽
• 作用域插槽

vue复制编辑<slot name="header"></slot>
<slot>默认内容</slot>

动态组件

html


复制编辑
<component :is="currentComponent"></component>

---

响应式原理

Options API

js复制编辑export default {
  data() { return { count: 0 } },
  computed: {
    double() { return this.count * 2; }
  },
  watch: {
    count(newVal) { console.log('count 变化为', newVal); }
  }
}

Composition API

js复制编辑import { ref, computed, watch } from 'vue';
export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);
    watch(count, val => console.log('count 变了', val));
    return { count, double };
  }
}

---

生命周期钩子

• beforeCreate / created
• beforeMount / mounted
• beforeUpdate / updated
• beforeUnmount / unmounted

Composition API 中对应为 onMounted、onUpdated 等。

---

路由管理（Vue Router）

安装并配置：

bash


复制编辑
npm install vue-router
js复制编辑// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: () => import('../views/About.vue') }
];
export default createRouter({
  history: createWebHistory(),
  routes
});

在 main.js 中挂载：

js复制编辑import router from './router';
createApp(App).use(router).mount('#app');

---

状态管理（Pinia/Vuex）

Pinia（Vuex 的下一代）

bash



npm install pinia



js复制编辑// store/index.js
import { createPinia, defineStore } from 'pinia';
export const useMainStore = defineStore('main', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ }
  }
});

在 main.js 中挂载：

import { createPinia } from 'pinia';
const pinia = createPinia();
createApp(App).use(pinia).mount('#app');

Vuex（可选）

bash


npm install vuex

---

表单处理与验证

• v-model 双向绑定
• 使用第三方库如 VeeValidate 或 Yup

<input v-model="form.email" type="email" />
<span v-if="errors.email">{{ errors.email }}</span>

---

网络请求

常用 fetch、axios 等库：

bash


复制编辑
npm install axios


js复制编辑import axios from 'axios';
axios.get('/api/users')
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

可结合 async/await 与 Composition API 中的 onMounted 实现数据拉取。

---

单元测试与 E2E 测试

• 单元测试：Jest + Vue Testing Library
• E2E 测试：Cypress / Playwright

示例（Jest）：

npm install --save-dev jest @vue/test-utils
js复制编辑import { mount } from '@vue/test-utils';
import Hello from '@/components/Hello.vue';
test('renders message', () => {
  const wrapper = mount(Hello, { props: { msg: 'Hi' } });
  expect(wrapper.text()).toContain('Hi');
});

---

构建与部署

• 本地构建：npm run build（Vue CLI）或 npm run build（Vite）
• 部署：将 dist/ 或 build/ 目录内容上传至静态托管服务（Netlify、Vercel、GitHub Pages、阿里云 OSS 等）

---

常用生态与插件

• UI 框架：Element Plus、Ant Design Vue、Naive UI
• 图表：ECharts、Chart.js + vue-chartjs
• 国际化：vue-i18n
• 动画：VueUse Motion、Framer Motion for Vue

---

最佳实践

1. 使用 Composition API 组织逻辑，提高复用性。
2. 按需加载 组件；路由懒加载。
3. 启用 TypeScript，提高类型安全。
4. 代码风格统一，使用 ESLint + Prettier。
5. 合理拆分组件，保持单一职责。
6. 性能优化：避免不必要的响应式、使用 v-memo、按需引入。

---

以上文档提供了从入门到进阶的 Vue 3 全面用法介绍，覆盖了环境搭建、核心语法、组件系统、路由与状态管理、测试与部署等各个方面。希望能帮助你快速上手并构建大型项目。