本文全面介绍了Vue3课程，从Vue3的基础知识到环境搭建、组件化开发、响应式系统、路由与状态管理，以及实战项目，帮助新手入门并掌握Vue3的初级技能。文章详细讲解了Vue3的主要特点、安装方法、组件使用、路由配置和Vuex状态管理，为读者提供了一站式的Vue3学习指南。
Vue3课程：新手入门到初级掌握的全面指南 Vue3简介Vue.js 是一个用于构建用户界面的渐进式JavaScript框架。它允许开发者逐步采用 Vue 来实现所需的功能，而不需要强制一次性替换整个应用。Vue 可以被当作一个库来使用，也可以通过单文件组件的形式来构建应用。Vue 3 是 Vue 的最新版本，带来了许多新特性和改进，包括更高的性能、更好的错误处理和更简单易用的 API。
Vue3的主要特点- Composition API：Vue 3引进了 Composition API，允许开发者更灵活地管理组件的状态逻辑。通过
setup函数，可以将相关的逻辑按需组织在一起，提高了可读性和可维护性。 - 更好的类型支持：Vue 3与 TypeScript 更好地结合，提供了更好的类型推断和类型支持。
- 更高的性能：Vue 3对虚拟 DOM 进行了优化，显著提升了渲染性能和内存使用效率。
- 更小的体积：Vue 3核心库的体积比 Vue 2 减少了约41%，这对于首次加载时间至关重要。
- 更好的错误处理：Vue 3提供了更全面的错误处理机制，帮助开发者更快地定位和修复问题。
安装 Vue 3 有几种常见的方式，主要包括局部安装和全局安装。这里介绍全局安装 Vue CLI，然后通过 Vue CLI 创建 Vue 3 项目的方法。
-
全局安装 Vue CLI
npm install -g @vue/cli -
创建 Vue 3 项目
vue create my-vue3-project在创建过程中选择 Vue 3 版本，或者在脚手架选择完毕后手动将
package.json中的 Vue 版本升级到最新版本，例如："dependencies": { "vue": "^3.0.0" } - 安装依赖
cd my-vue3-project npm install
创建Vue3项目
创建 Vue3 项目可以使用 Vue CLI 提供的命令行工具，也可以手动创建项目。这里提供手动创建项目的步骤：
- 创建项目文件夹
mkdir my-vue3-project cd my-vue3-project - 初始化项目
npm init -y - 安装 Vue 3
npm install vue@next - 创建
index.html文件<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Vue 3 App</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"></div> <script src="main.js"></script> </body> </html> - 创建
main.js文件const { createApp } = Vue const app = createApp({ template: '<div>Hello, Vue 3!</div>' }) app.mount('#app') - 运行项目
npm start
使用Vue CLI快速搭建环境
使用 Vue CLI 快速搭建环境可以简化项目初始化和配置的过程：
- 创建项目
vue create my-vue3-project在创建项目时选择 Vue 3 版本，具体操作是在选择预设或者手动选择功能时，确保选择了 Vue 3。
- 安装依赖
npm install
运行和调试Vue3应用
- 运行应用
npm run serve - 调试应用
使用浏览器的开发者工具进行调试。可以通过设置断点、查看变量值等方式来调试应用。
组件的基本概念
在 Vue 中，组件是可复用的 Vue 实例，可以包含视图和逻辑。组件可以嵌套，可以包含子组件。每个组件都有自己的作用域，内部的样式、数据和逻辑不会影响到应用的其他部分。
创建和使用组件
创建组件的基本步骤：
- 定义组件
const MyComponent = { template: '<div>My Component</div>' } - 注册组件
const app = createApp({}) app.component('my-component', MyComponent) - 使用组件
<my-component></my-component>
组件的props和事件
props
props 是父组件向子组件传递数据的一种方式。
- 定义props
const MyComponent = { props: ['title'], template: '<div>{{ title }}</div>' } - 使用props
<my-component :title="parentTitle"></my-component>
事件
事件是子组件向父组件传递数据的一种方式。
- 定义事件
const MyComponent = { template: '<button @click="handleClick">Click me</button>', methods: { handleClick() { console.log('Button clicked') } } } - 监听事件
<my-component @click="handleClickFromParent"></my-component>
Vue3响应式系统介绍
Vue 3 的响应式系统基于 ES 规范中的 Proxy 对象。Proxy 对象可以拦截并自定义一系列操作，如读写属性、定义属性等，从而实现深层次的属性监听。
响应式数据的使用
在 Vue 3 中，可以使用 ref 和 reactive 来创建响应式对象或值。
- 使用
refconst count = ref(0) console.log(count.value) // 0 count.value++例如，创建一个简单的计数器组件，响应用户的点击事件：
const MyCounter = { setup() { const count = ref(0) const handleClick = () => { count.value++ } return { count, handleClick } }, template: '<button @click="handleClick">{{ count }}</button>' } - 使用
reactiveconst state = reactive({ count: 0 }) console.log(state.count) // 0 state.count++
ref和reactive的区别与应用
ref 和 reactive 用于创建响应式数据的不同之处在于：
ref适用于基本类型（如字符串、数字、布尔值等），ref返回的对象具有.value属性。reactive适用于复杂类型（如对象、数组等），返回的对象直接作为响应式数据使用。
例如：
import { ref, reactive } from 'vue'
const num = ref(10)
const obj = reactive({ count: 10 })
console.log(num.value) // 10
console.log(obj.count) // 10
num.value++
obj.count++
console.log(num.value) // 11
console.log(obj.count) // 11路由的基本概念
路由是一种让用户在应用的不同部分之间导航的技术。在 Vue 中，路由通常由 Vue Router 提供实现。
安装和配置Vue Router
- 安装 Vue Router
npm install vue-router@next -
创建路由配置
import { createRouter, createWebHistory } from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue' const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = createRouter({ history: createWebHistory(), routes }) export default router -
在主应用中使用路由
import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app')
Vuex的基本使用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它可以帮助开发者在大型项目中更好地管理和共享状态。
- 安装 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') } } }) -
在应用中使用 Vuex Store
import { createApp } from 'vue' import App from './App.vue' import store from './store' const app = createApp(App) app.use(store) app.mount('#app')
创建一个简单的待办事项应用
创建一个简单的待办事项应用，包括添加、删除和完成任务等功能。
-
创建组件
// TodoItem.vue <template> <li> <span>{{ todo.title }}</span> <button @click="remove">Remove</button> <button @click="toggleCompletion">Toggle Completion</button> </li> </template> <script> export default { props: ['todo'], methods: { remove() { this.$emit('remove', this.todo.id) }, toggleCompletion() { this.$emit('toggle-completion', this.todo.id) } } } </script> // TodoList.vue <template> <ul> <todo-item v-for="todo in todos" :key="todo.id" :todo="todo" @remove="removeTodo" @toggle-completion="toggleCompletion" ></todo-item> </ul> </template> <script> import TodoItem from './TodoItem.vue' export default { components: { TodoItem }, data() { return { todos: [] } }, methods: { addTodo(title) { this.todos.push({ id: this.todos.length + 1, title, completed: false }) }, removeTodo(id) { this.todos = this.todos.filter(todo => todo.id !== id) }, toggleCompletion(id) { const todo = this.todos.find(todo => todo.id === id) if (todo) { todo.completed = !todo.completed } } } } </script> -
创建主应用
<!-- App.vue --> <template> <div> <h1>Todo App</h1> <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" /> <todo-list :todos="todos"></todo-list> </div> </template> <script> import TodoList from './components/TodoList.vue' export default { components: { TodoList }, data() { return { newTodo: '', todos: [] } }, methods: { addTodo() { this.todos.push({ id: this.todos.length + 1, title: this.newTodo, completed: false }) this.newTodo = '' } } } </script>
使用组件化和状态管理构建应用
-
集成 Vuex
// store.js import { createStore } from 'vuex' export default createStore({ state: { todos: [] }, mutations: { addTodo(state, todo) { state.todos.push(todo) }, removeTodo(state, id) { state.todos = state.todos.filter(todo => todo.id !== id) }, toggleCompletion(state, id) { const todo = state.todos.find(todo => todo.id === id) if (todo) { todo.completed = !todo.completed } } }, actions: { addTodo({ commit }, todo) { commit('addTodo', todo) }, removeTodo({ commit }, id) { commit('removeTodo', id) }, toggleCompletion({ commit }, id) { commit('toggleCompletion', id) } } }) -
在组件中使用 Vuex
// App.vue <template> <div> <h1>Todo App</h1> <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" /> <todo-list :todos="todos"></todo-list> </div> </template> <script> import { mapActions, mapState } from 'vuex' import TodoList from './components/TodoList.vue' export default { components: { TodoList }, computed: { ...mapState(['todos']) }, data() { return { newTodo: '' } }, methods: { ...mapActions(['addTodo', 'removeTodo', 'toggleCompletion']) } } </script>
项目部署与发布
-
构建项目
npm run build这将生成一个
dist文件夹，里面包含了可以部署到生产环境的静态资源。例如，构建输出的index.html和main.js文件会位于dist文件夹下。 -
部署到静态服务器
将dist文件夹中的所有文件上传到你的服务器或托管服务（如 Netlify、Vercel 等）。 - 配置域名和 HTTPS
可以选择配置域名和 HTTPS，以提高用户体验和安全性。
通过以上步骤，你可以创建一个完整的 Vue 3 应用，并将其部署到线上。
随时随地看视频
