Vue3学习：从入门到初步应用实战指南-原创手记-慕课网

概述

本文详细介绍了Vue3学习的基础环境搭建，包括Node.js和Vue CLI的安装，以及创建第一个Vue3项目的过程。文章还深入讲解了Vue3的核心概念，如组件与模板、数据绑定与响应式系统，帮助读者全面理解Vue3的使用方法。此外，文章涵盖了路由与导航、状态管理等高级主题，提供了丰富的实战项目案例和调试测试技巧。

Vue3基础环境搭建

安装Node.js

为了搭建Vue3开发环境，首先需要安装Node.js。Node.js是一个基于Chrome V8引擎的JavaScript运行时，它使得JavaScript可以在服务器端运行，为构建高效、可扩展的Web应用程序提供了强大的工具。

确保你的计算机已经安装了Node.js。你可以访问官网（https://nodejs.org/）下载最新版本的Node.js，按照操作系统选择相应的安装包进行安装。安装完成后，可以通过命令行验证是否安装成功：

node -v
npm -v

如果命令行输出了Node.js和npm的版本号，说明安装成功。

安装Vue CLI

Vue CLI是Vue.js项目的脚手架工具，可以快速搭建Vue项目，提供了一系列命令来帮助开发者更便捷地管理项目。首先，确保Node.js和npm已安装并配置好，然后通过npm（Node Package Manager）全局安装Vue CLI：

npm install -g @vue/cli

安装完成后，可以通过以下命令验证安装是否成功：

vue --version

如果命令行输出了Vue CLI的版本号，说明安装成功。

创建第一个Vue3项目

安装完Vue CLI后，就可以创建第一个Vue3项目了。使用vue create命令创建新项目，并确保选择Vue 3作为目标版本：

vue create my-vue3-app

在创建过程中，会提示选择预设配置。选择Manually select features或直接选择Vue 3预设，然后根据需要选择其他特性，如Babel、Router、Vuex、Lint等。

创建完成后，进入项目目录并启动开发服务器：

cd my-vue3-app
npm run serve

打开浏览器，访问http://localhost:8080，可以看到默认的Vue应用已经成功启动。

Vue3核心概念介绍

组件与模板

Vue的核心概念之一是组件，组件是可复用的Vue实例，可以包含HTML模板、JavaScript逻辑和CSS样式。组件是构建复杂单页应用的基础。例如，创建一个简单的HelloWorld组件：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>Welcome to Vue3!</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
.hello {
  font-family: Arial, sans-serif;
}
</style>

在组件内部，可以使用HTML模板，结合<script>和<style>标签来定义组件的逻辑和样式。组件通过props传递数据，props类似于函数参数，允许父组件向子组件传递数据。

数据绑定与响应式系统

Vue的响应式系统通过数据绑定，自动将DOM更新与JavaScript状态保持同步。数据绑定可以分为插值（双大括号语法）和指令（如v-bind、v-model等）。

插值

使用{{ }}插值语法，可以在HTML模板中直接插入JavaScript表达式：

<div>{{ message }}</div>

在对应的<script>标签中：

export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
}

当message变量发生变化时，插值会自动更新，实现数据的双向绑定。

指令

使用v-bind来动态绑定属性，如v-bind:class、v-bind:style：

<div :class="{ active: isActive }" :style="{ color: activeColor }">Hello</div>

在对应的<script>标签中：

export default {
  data() {
    return {
      isActive: true,
      activeColor: 'red'
    };
  }
}

使用v-model实现双向数据绑定：

<input v-model="message" />
<p>{{ message }}</p>

在对应的<script>标签中：

export default {
  data() {
    return {
      message: ''
    };
  }
}

计算属性与侦听器

计算属性是基于数据依赖而进行计算的，可以避免重复计算：

<div>{{ fullName }}</div>
<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
}
</script>

侦听器可以进行更复杂的逻辑操作，侦听数据变化，并执行相应的操作：

<div>{{ message }}</div>
<script>
export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`New value: ${newVal}, Old value: ${oldVal}`);
    }
  }
}
</script>

Vue3路由与导航

Vue Router是Vue.js官方提供的路由器，用于实现单页面应用（SPA）的路由功能。

安装Vue Router

安装Vue Router，可以使用npm或yarn：

npm install vue-router@next

路由配置与使用

在项目中引入Vue Router，配置路由，并在main.js文件中引入和使用：

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;

在Vue组件中使用<router-link>和<router-view>来导航和显示相应的组件：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

嵌套路由与动态路由

嵌套路由用于组织更复杂的路由结构，例如：

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: ':id', component: UserProfile }
    ]
  }
];

动态路由可以通过参数传递：

const routes = [
  { path: '/user/:id', component: User, props: true }
];

在组件中使用this.$route.params.id来获取传递的参数。

Vue3状态管理

Vue3中状态管理可以使用Vuex来实现，Vuex是一个专门为Vue.js应用开发的状态管理模式。

使用Vuex进行状态管理

安装Vuex：

npm install vuex@next

在项目中创建Vuex Store：

import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    countState: state => state.count
  }
});

在main.js中引入并使用Store：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

在组件中通过mapState、mapMutations、mapActions来访问状态和操作状态：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
}
</script>

Vuex Store配置与使用

Vuex Store可以按照模块化的方式进行配置，例如：

export default createStore({
  modules: {
    user: {
      state: {
        name: 'John'
      },
      mutations: {
        setName(state, name) {
          state.name = name;
        }
      }
    }
  }
});

在组件中使用模块化的状态：

<template>
  <div>
    <p>{{ user.name }}</p>
    <input v-model="newName" />
    <button @click="updateName">Update Name</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['user'])
  },
  data() {
    return {
      newName: ''
    };
  },
  methods: {
    ...mapActions(['user/setName']),
    updateName() {
      this['user/setName'](this.newName);
    }
  }
}
</script>

常用Vuex插件介绍

Vuex提供了许多插件来增强其功能，例如vuex-persistedstate用于持久化状态，vuex-router-sync用于自动同步路由和状态。

安装插件：

npm install vuex-persistedstate

配置插件：

import createPersistedState from 'vuex-persistedstate';

export default createStore({
  plugins: [createPersistedState()]
});

Vue3项目实战

实战项目选择与需求分析

选择一个实际项目，例如一个简单的待办事项应用。需求分析如下：

用户可以添加新的事项
用户可以删除已有的事项
用户可以标记已完成的事项

项目结构设计

项目结构设计如下：

my-todo-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── TodoForm.vue
│   │   ├── TodoList.vue
│   ├── views/
│   ├── router/
│   ├── store/
│   │   ├── index.js
│   ├── App.vue
│   ├── main.js
│   └── index.html
├── package.json
└── README.md

分步实现项目功能

添加事项

在components/TodoForm.vue中创建一个表单，用于添加事项：

<template>
  <div>
    <input v-model="newTodo" placeholder="Add a new todo" />
    <button @click="addTodo">Add</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: ''
    };
  },
  methods: {
    addTodo() {
      this.$store.commit('addTodo', this.newTodo);
      this.newTodo = '';
    }
  }
}
</script>

在store/index.js中定义添加事项的逻辑：

export default createStore({
  state: {
    todos: []
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push({ text: todo, done: false });
    }
  }
});

删除事项

在components/TodoList.vue中创建一个列表，用于显示和删除事项：

<template>
  <div>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo.text }}
        <button @click="removeTodo(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['todos'])
  },
  methods: {
    ...mapMutations(['removeTodo'])
  }
}
</script>

在store/index.js中定义删除事项的逻辑：

export default createStore({
  state: {
    todos: []
  },
  mutations: {
    removeTodo(state, index) {
      state.todos.splice(index, 1);
    }
  }
});

标记已完成事项

在components/TodoList.vue中添加标记已完成事项的功能：

<li v-for="(todo, index) in todos" :key="index">
  <input type="checkbox" v-model="todo.done" @change="toggleTodoDone(index)" />
  {{ todo.text }}
  <button @click="removeTodo(index)">Delete</button>
</li>

在store/index.js中定义标记已完成事项的逻辑：

export default createStore({
  state: {
    todos: []
  },
  mutations: {
    toggleTodoDone(state, index) {
      state.todos[index].done = !state.todos[index].done;
    }
  }
});

在组件中使用toggleTodoDone方法：

methods: {
  ...mapMutations(['toggleTodoDone']),
  removeTodo(index) {
    this['removeTodo'](index);
  }
}

Vue3调试与测试

集成Vue Devtools

Vue Devtools是一个浏览器扩展，用于调试Vue应用，它提供了丰富的功能，如组件树、状态检查、性能分析等。安装Vue Devtools扩展，然后在开发模式下启动应用，可以在浏览器的开发者工具中看到Vue Devtools选项卡。

常见调试技巧

使用console.log或console.table打印变量和数据结构，使用console.error或console.warn打印错误信息。利用Vue Devtools可以查看组件树，检查组件的props、状态和计算属性。还可以使用Chrome Devtools的Network和Performance面板来分析应用的性能。

单元测试与端到端测试

单元测试用于测试Vue组件的逻辑，常用的测试框架有Jest和Vue Test Utils。端到端测试用于测试整个应用的交互，常用的测试工具是Cypress。

安装测试依赖：

npm install --save-dev jest @vue/test-utils

创建一个单元测试文件，例如tests/unit/TodoForm.spec.js：

import { mount } from '@vue/test-utils';
import TodoForm from '@/components/TodoForm.vue';

describe('TodoForm', () => {
  it('should add a new todo', () => {
    const wrapper = mount(TodoForm);
    wrapper.setData({ newTodo: 'Learn Vue3' });
    wrapper.find('button').trigger('click');
    expect(wrapper.emitted().addTodo).toBeTruthy();
  });
});

安装Cypress：

npx cypress open

创建一个端到端测试文件，例如cypress/integration/todo.spec.js：

describe('Todo App', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('should add a new todo', () => {
    cy.get('input').type('Learn Vue3');
    cy.get('button').click();
    cy.get('ul').should('contain', 'Learn Vue3');
  });
});

通过以上步骤，你已经掌握了Vue3的基础与进阶知识，可以从简单的组件开发到复杂的项目结构设计，再到调试与测试，为实际项目开发打下坚实的基础。