前端教程：如何写 Vue 3 页面

如何写 Vue 3 页面

目录

引言

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 项目的步骤：

1. 安装 Vue CLI：npminstall -g @vue/cli
2. 创建新项目：vue create my-vue3-app
3. 选择 Vue 3 配置。

使用 Vite 创建项目

Vite 是一个新兴的构建工具，支持快速开发和构建。使用 Vite 创建 Vue 3 项目的步骤如下：

1. 安装 Vite：npm create vite@latest my-vue3-app --template vue
2. 进入项目目录并安装依赖：cd my-vue3-appnpminstall
3. 启动开发服务器：npm run dev

Vue 3 组件基础

组件的定义与注册

在 Vue 中，组件是构建用户界面的基本单元。以下是定义和注册组件的示例：

// HelloWorld.vue<template><h1>Hello,{{ name }}!</h1></template><script>exportdefault{
  props:{
    name: String
  }}</script>

在父组件中注册：

<template><HelloWorld name="Vue 3"/></template><script>import HelloWorld from'./HelloWorld.vue';exportdefault{
  components:{
    HelloWorld
  }}</script>

组件的生命周期

Vue 组件有一系列生命周期钩子，可以在组件的不同阶段执行代码。常用的生命周期钩子包括：

• created：组件实例被创建后调用。
• mounted：组件挂载到 DOM 后调用。
• updated：组件更新后调用。
• beforeDestroy：组件销毁前调用。

示例：

exportdefault{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 的核心，所有的响应式状态和计算属性都在这里定义。

exportdefault{setup(){const count =ref(0);constincrement=()=> count.value++;return{ count, increment };}}

ref 和 reactive

• ref 用于创建基本数据类型的响应式引用。
• reactive 用于创建对象的响应式状态。

const count =ref(0);const state =reactive({ name:'Vue 3'});

自定义组合函数

可以将逻辑提取到自定义组合函数中，以便在多个组件中复用。

functionuseCounter(){const count =ref(0);constincrement=()=> count.value++;return{ count, increment };}

Vue 3 路由

安装 Vue Router

使用 Vue Router 进行页面导航。首先安装 Vue Router：

npminstall 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
});exportdefault router;

路由守卫

路由守卫用于控制路由访问权限，可以在路由配置中添加守卫。

router.beforeEach((to,from, next)=>{if(to.meta.requiresAuth &&!isAuthenticated){next({ path:'/login'});}else{next();}});

Vue 3 状态管理

安装 Vuex

Vuex 是 Vue 的状态管理库，安装 Vuex：

npminstall 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';exportdefault{setup(){const store =useStore();constincrement=()=> store.commit('increment');return{ increment };}}

Vue 3 的样式处理

内联样式与 CSS 类

可以使用内联样式和 CSS 类来控制组件的样式。

<template><div:style="{ color: active ? 'red' : 'blue' }">
    Hello World
  </div></template>

Scoped 样式

使用 scoped 样式可以确保样式只应用于当前组件。

<stylescoped>h1{color: blue;}</style>

CSS Modules

CSS Modules 允许你使用局部作用域的 CSS 类。

<template><div:class="$style.myClass">Hello World</div></template><stylemodule>.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。