如何写 Vue 3 页面
目录
- 引言
- Vue 3 概述
- 2.1 Vue 3 的新特性
- 2.2 Vue 3 的安装
- 创建 Vue 3 项目
- 3.1 使用 Vue CLI 创建项目
- 3.2 使用 Vite 创建项目
- Vue 3 组件基础
- 4.1 组件的定义与注册
- 4.2 组件的生命周期
- Vue 3 的响应式系统
- 5.1 响应式数据
- 5.2 计算属性
- 5.3 侦听器
- Vue 3 的组合 API
- 6.1 setup 函数
- 6.2 ref 和 reactive
- 6.3 自定义组合函数
- Vue 3 路由
- 7.1 安装 Vue Router
- 7.2 配置路由
- 7.3 路由守卫
- Vue 3 状态管理
- 8.1 安装 Vuex
- 8.2 创建 Store
- 8.3 使用 Store
- Vue 3 的样式处理
- 9.1 内联样式与 CSS 类
- 9.2 Scoped 样式
- 9.3 CSS Modules
- Vue 3 的测试
- 10.1 单元测试
- 10.2 端到端测试
- 总结
引言
Vue.js 是一个流行的前端框架，广泛用于构建用户界面和单页应用程序。Vue 3 是其最新版本，带来了许多新特性和改进。本教程将详细介绍如何使用 Vue 3 创建页面，从基础知识到高级特性，帮助你快速上手。
Vue 3 概述
Vue 3 的新特性
Vue 3 引入了一些重要的新特性，包括：
- 组合 API：提供了一种更灵活的方式来组织组件逻辑。
- 性能提升：相较于 Vue 2，Vue 3 在性能上有显著提升。
- 更好的 TypeScript 支持：Vue 3 对 TypeScript 的支持更加完善。
- Fragment：允许组件返回多个根节点。
Vue 3 的安装
要使用 Vue 3，你需要确保你的开发环境中安装了 Node.js 和 npm。可以通过以下命令检查：
node -v
npm -v
如果未安装，可以前往 Node.js 官网 下载并安装。
创建 Vue 3 项目
使用 Vue CLI 创建项目
Vue CLI 是一个强大的工具，可以帮助你快速创建 Vue 项目。以下是使用 Vue CLI 创建 Vue 3 项目的步骤：
- 安装 Vue CLI：
npm install -g @vue/cli - 创建新项目：
vue create my-vue3-app - 选择 Vue 3 配置。
使用 Vite 创建项目
Vite 是一个新兴的构建工具，支持快速开发和构建。使用 Vite 创建 Vue 3 项目的步骤如下：
- 安装 Vite：
npm create vite@latest my-vue3-app --template vue - 进入项目目录并安装依赖：
cd my-vue3-app npm install - 启动开发服务器：
npm run dev
Vue 3 组件基础
组件的定义与注册
在 Vue 中，组件是构建用户界面的基本单元。以下是定义和注册组件的示例：
// HelloWorld.vue
<template>
<h1>Hello, {{ name }}!</h1>
</template>
<script>
export default {
props: {
name: String
}
}
</script>
在父组件中注册：
<template>
<HelloWorld name="Vue 3" />
</template>
<script>
import HelloWorld from './HelloWorld.vue';
export default {
components: {
HelloWorld
}
}
</script>
组件的生命周期
Vue 组件有一系列生命周期钩子，可以在组件的不同阶段执行代码。常用的生命周期钩子包括：
created：组件实例被创建后调用。mounted：组件挂载到 DOM 后调用。updated：组件更新后调用。beforeDestroy：组件销毁前调用。
示例：
export default {
data() {
return {
message: 'Hello Vue!'
}
},
created() {
console.log('Component created');
},
mounted() {
console.log('Component mounted');
}
}
Vue 3 的响应式系统
响应式数据
Vue 3 的响应式系统基于 Proxy 实现，提供了更好的性能和灵活性。可以使用 ref 和 reactive 创建响应式数据。
import { ref, reactive } from 'vue';
const count = ref(0);
const state = reactive({ name: 'Vue 3' });
计算属性
计算属性是基于响应式数据计算得出的值，只有在依赖的响应式数据变化时才会重新计算。
import { computed } from 'vue';
const fullName = computed(() => `${state.firstName} ${state.lastName}`);
侦听器
侦听器用于观察响应式数据的变化，并在变化时执行特定的操作。
import { watch } from 'vue';
watch(count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`);
});
Vue 3 的组合 API
setup 函数
setup 函数是组合 API 的核心，所有的响应式状态和计算属性都在这里定义。
export default {
setup() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
}
ref 和 reactive
ref用于创建基本数据类型的响应式引用。reactive用于创建对象的响应式状态。
const count = ref(0);
const state = reactive({ name: 'Vue 3' });
自定义组合函数
可以将逻辑提取到自定义组合函数中，以便在多个组件中复用。
function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
Vue 3 路由
安装 Vue Router
使用 Vue Router 进行页面导航。首先安装 Vue Router：
npm install vue-router
配置路由
在项目中配置路由：
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
路由守卫
路由守卫用于控制路由访问权限，可以在路由配置中添加守卫。
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next({ path: '/login' });
} else {
next();
}
});
Vue 3 状态管理
安装 Vuex
Vuex 是 Vue 的状态管理库，安装 Vuex：
npm install vuex
创建 Store
创建一个 Vuex Store 来管理应用的状态。
import { createStore } from 'vuex';
const store = createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++;
}
}
});
使用 Store
在组件中使用 Vuex Store：
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
const increment = () => store.commit('increment');
return { increment };
}
}
Vue 3 的样式处理
内联样式与 CSS 类
可以使用内联样式和 CSS 类来控制组件的样式。
<template>
<div :style="{ color: active ? 'red' : 'blue' }">
Hello World
</div>
</template>
Scoped 样式
使用 scoped 样式可以确保样式只应用于当前组件。
<style scoped>
h1 {
color: blue;
}
</style>
CSS Modules
CSS Modules 允许你使用局部作用域的 CSS 类。
<template>
<div :class="$style.myClass">Hello World</div>
</template>
<style module>
.myClass {
color: green;
}
</style>
Vue 3 的测试
单元测试
使用 Jest 和 Vue Test Utils 进行单元测试。
import { mount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';
test('renders props.msg when passed', () => {
const msg = 'new message';
const wrapper = mount(HelloWorld, {
props: { msg }
});
expect(wrapper.text()).toMatch(msg);
});
端到端测试
使用 Cypress 进行端到端测试。
describe('My First Test', () => {
it('Visits the app root url', () => {
cy.visit('/');
cy.contains('Hello World');
});
});
总结
本教程详细介绍了如何使用 Vue 3 创建页面，从基础知识到高级特性。通过学习组件、响应式系统、组合 API、路由、状态管理、样式处理和测试等内容，你将能够构建出功能强大的 Vue 3 应用。希望这篇教程能帮助你更好地理解和使用 Vue 3。
