首页 前端知识 《Vue.js 3.x 快速入门》一篇万字文章教会你什么是Vue3

《Vue.js 3.x 快速入门》一篇万字文章教会你什么是Vue3

2025-03-15 13:03:37 前端知识 前端哥 463 728 我要收藏

引言

在学习了前端三件套HTML、CSS、和JavaScript的简单开发之后,进一步学习前端开发框架是前端开发者必要的阶段,能更容易简单的完成项目开发,因此,我入手了现阶段流行的Vue框架,带大家了解一下什么是Vue3。

《Vue.js 3.x 快速入门》由申思维、杜骁编写,于 2022 年 7 月 1 日由清华大学出版社出版。本书依托作者所在公司多年实际项目开发经验,聚焦于 Vue.js 3.x 企业应用快速开发技术,是 Vue.js 初学者、web 前端开发人员不可多得的学习资料,同时也为高等院校和培训机构的师生提供了有益参考。我花费约一天时间大致通读了全书,在此分享对本书内容的梳理以及个人的观点见解。

一、基础开篇

(一)单页应用的出现背景

在移动互联网蓬勃发展的浪潮下,移动电话和微信等社交平台的普及,使得 Wap(H5)应用如雨后春笋般涌现。但早期,受限于手机硬件设备性能,处理器运算能力有限,内存容量不足,再加上网络基础设施建设尚未完善,网络速度迟缓,传统 Webpack 技术开发的网页在手机端表现不佳。例如,页面整体刷新机制使得每次用户操作都要等待整个页面重新加载,在网络不佳时,页面加载时间可长达数秒甚至数十秒,极大地影响了用户体验。而且,频繁的 JS/CSS 请求导致流量消耗过大,对于流量套餐有限的用户来说极不友好。

与之形成鲜明对比的是单页应用(SPA)。它的页面局部刷新机制,使得当用户进行操作时,仅需更新页面的部分内容,无需重新加载整个页面。以常见的电商 APP 商品详情页切换为例,用户在浏览商品不同规格参数时,SPA 应用能够迅速响应,仅替换相关的参数显示区域,无需重新加载页面的头部、底部导航等其他无关部分,响应速度比传统网页快了数倍。同时,SPA 无需每次加载所有 CSS/JS,减少了网络请求次数,降低了流量消耗,在提升用户体验的同时,也减轻了服务器的压力。

(二)Web 应用分类

传统 Web 页面应用:传统 Web 页面应用就像是一座每次都要整体重建的房子。当用户打开浏览器访问页面时,整个页面的所有资源,包括 HTML 结构、CSS 样式表、JavaScript 脚本以及各种图片、字体等文件,都要一次性加载到本地。

这就好比要一次性把房子里所有的家具、装饰都搬进屋内。每次用户进行单击操作,比如点击一个链接跳转到新页面,浏览器就如同要把整座房子推倒重建一样,需要重新解析并加载所有资源文件。这不仅浪费时间,而且在资源加载过程中,页面处于空白状态,用户只能干巴巴等待,体验感极差。在早期网络速度慢的情况下,这种整体刷新的方式让用户在浏览网页时频繁遭遇长时间的等待,大大降低了用户对网站的好感度。


单页应用:单页应用则像是一座可以灵活改造局部的房子。用户点击链接时,页面不会整体刷新,而是仅通过 JavaScript 这一 “神奇的装修工具” 来替换局部内容。它借助 Ajax(异步 JS 与 XML,如今随着 JSON 格式因其简洁性和更好的可读性,在数据传输中广泛取代 XML)实现异步请求。这意味着,当用户操作时,页面无需重新加载所有资源,只需像更换房子里某个房间的家具一样,通过异步请求获取所需的新数据,然后更新页面的相应部分。

例如,在一个社交 APP 中,用户刷新动态列表,页面不会重新加载整个页面,而是通过 Ajax 请求获取新的动态数据,再利用 JavaScript 将新数据插入到页面的动态列表区域,整个过程流畅迅速,节省了大量带宽,同时也极大地减轻了客户端和服务端的负担,使得应用能够在各种网络环境下都保持良好的性能表现。


(三)单页应用框架对比

1.Angular:作为业内首个 SPA 框架,由 Google 推出的 Angular 可谓是开天辟地。它成功实现了前端 MVC(Model - View - Controller,模型 - 视图 - 控制器)解耦,这就像是把一个复杂的机器拆分成不同功能的部件,使得代码结构更加清晰,易于维护。

双向绑定功能更是其一大亮点,模型数据的变化能够实时反映在视图上,视图的操作也能立即同步到模型中,就像有一双无形的手在实时协调两者的变化。然而,Angular 就像一把难用的高级工具,学习难度极大。早期其文档匮乏,对于开发者来说,就像在黑暗中摸索,没有足够的指引。在使用第三方组件时,由于其严格的架构和设计规范,常常会遇到各种兼容性问题,使用起来极为不便,陡峭的学习曲线让许多初学者望而却步,即使是有经验的开发者也需要花费大量时间来适应。


2.ReactFacebook 推出的 React 以其独特的理念和强大的功能在前端开发领域占据了重要地位。它的一大特色是使用 JS 一种语言即可编写前后端代码,这对于熟悉 JavaScript 的开发者来说,就像是掌握了一门通用语言,可以在前后端开发中自由切换,极大地提高了开发效率。

React Native 更是让前端开发者能够直接开发出性能接近原生 App 的移动应用,为移动应用开发带来了新的思路和方式。React 周边丰富的组件生态,就像一个巨大的零件库,开发者可以轻松找到各种功能的组件来构建自己的应用。但 React 也有其不足之处,它的 HTML 代码需写在 JS 文件中,这种 “多语言混合式编程” 方式,就像把不同风格的家具放在同一个房间,容易导致代码结构混乱,可读性降低。而且前后端代码混写的情况,也增加了代码维护和管理的难度,在大型项目中,这种混乱的代码结构可能会引发诸多问题。


3.Vue.js:Vue.js 作为一个 MVVM(Model - View - ViewModel)的 SPA 框架,就像是一个设计精巧、易于使用的工具。它简单好学好用,学习周期短,对于初学者来说,能够快速上手,掌握其基本使用方法。它兼具 Angular 和 React 的功能,既实现了数据的双向绑定,又拥有丰富的组件系统。

截至 2022 年 1 月,Vue.js 在 GitHub 上的关注度位居榜首,这充分证明了其在开发者社区中的受欢迎程度。国内众多公司,如腾讯、阿里巴巴等,纷纷采用其进行项目开发,官方文档为中文这一优势,更是让国内开发者在学习和使用过程中没有语言障碍,能够迅速理解和掌握相关知识,大大降低了上手难度。

(四)用到 Vue.js 的项目

Vue.js 在实际应用中展现出了强大的生命力,众多知名项目都采用了该框架。

微信小程序借助 Vue.js 的灵活性和高效性,实现了丰富的交互功能和流畅的用户体验。阿里巴巴的 Weex 利用 Vue.js 构建跨平台应用,能够将同一套代码运行在 Web、iOS 和 Android 等多个平台上,大大提高了开发效率,降低了开发成本。

在出行领域,滴滴出行使用 Vue.js 打造了简洁易用的用户界面,方便用户快速叫车、查询行程等。外卖行业的饿了么,通过 Vue.js 优化了订单管理、菜品展示等功能模块,提升了用户下单的便捷性。在代码托管平台方面,GitLab 采用 Vue.js 改进了其前端界面,提高了用户操作的流畅性。国外的 Facebook 也在部分功能模块中引入 Vue.js,增强了页面的交互性。国内热门社交平台新浪微博,同样借助 Vue.js 优化了其移动端页面,为用户带来更好的浏览体验。这些项目的成功应用,充分展示了 Vue.js 在不同领域和场景下的强大能力和适应性,也吸引了更多开发者选择 Vue.js 进行项目开发。

(五)本书使用说明

本书基于 Vue.js 3.2.2 编写,为了帮助读者更好地学习,作者建议读者先下载 Demo 代码。通过对照 GitHub 下载的可运行代码进行学习,读者能够更加直观地看到代码的实际运行效果,理解代码的逻辑和功能。Vue.js 3 支持 Option API 和 Composition API 两种方式,书中核心内容讲解基于 Option API,这种方式对于初学者来说更容易理解和掌握。需要注意的是,使用 Windows 7 的读者需升级到 Windows 10 并安装 Node 14.17.5 才能顺利运行书中 Demo。这是因为 Windows 7 系统在一些新的技术支持和兼容性方面存在不足,而 Node 14.17.5 版本则提供了本书代码运行所需的环境和依赖,确保读者能够按照书中的指引,顺利进行实践操作,加深对知识的理解。

二、技术详述

(一)原生 vue.js 与项目入门

书中详细介绍了原生 vue.js,并通过实际项目引导读者极速入门。在运行整个项目环节,读者需要了解项目的目录结构配置文件的作用等。

例如,项目的根目录下通常包含 src 文件夹用于存放源代码public 文件夹用于存放静态资源配置文件webpack.config.js 用于配置项目的打包规则package.json 用于管理项目的依赖包

在 html 与 js 代码部分,读者将深入理解 Vue.js 中数据绑定事件处理等基础操作的实现方式。

比如,通过 v - bind 指令可以将数据绑定到 HTML 元素的属性上,当数据发生变化时,元素的属性也会随之更新

在一个简单的商品展示页面中,通过 v - bind:src 指令可以将商品图片的路径数据绑定到 img 标签的 src 属性上,实现商品图片的动态展示

在事件处理方面,使用 v - on 指令可以绑定事件,如 v - on:click 用于绑定点击事件,当用户点击按钮时,可以触发相应的 JavaScript 函数,实现如添加商品到购物车等功能。

(二)开发准备

1.nvm、npm 与 node 的安装及使用

nvm 作为 Node.js 版本管理工具,就像是一个智能的版本仓库管理员。在不同的项目中,可能需要使用不同版本的 Node.js,nvm 能够方便地帮助开发者切换和管理这些版本。

例如,一个旧项目依赖于 Node.js 10 版本,而新项目需要使用 Node.js 14 版本,通过 nvm,开发者可以轻松在这两个版本之间切换,无需重新安装和配置环境。

npm 则是 Node.js 的包管理工具,它如同一个庞大的软件超市,开发者可以在其中搜索、安装、管理和分享项目依赖的包。在安装包时,npm 会自动处理包与包之间的依赖关系,确保项目所需的所有依赖都能正确安装。比如在创建一个 Vue.js 项目时,通过 npm install vue 指令即可安装 Vue.js 框架及其相关依赖包。


2.git 在 windows 下的使用

git 作为一款分布式版本控制系统,在团队协作开发中起着至关重要的作用。对于 Windows 系统用户,在安装 git 后,首先要配置好用户名和邮箱,这就像给自己在团队中贴上一个独特的标签。

在项目开发过程中,开发者可以使用 git clone 指令将远程仓库的代码克隆到本地,开始进行开发工作。当完成一部分功能开发后,使用 git add 指令将修改的文件添加到暂存区,再通过 git commit 指令提交代码,并附上详细的提交说明,方便团队成员了解代码的变更内容。在与团队成员协作时,使用 git push 指令将本地的代码推送到远程仓库,同时也可以使用 git pull 指令从远程仓库拉取最新的代码,确保自己的代码与团队保持同步,避免代码冲突。


3.webpack 的功能、安装与使用

webpack 是一个现代 JavaScript 应用程序的静态模块打包器,它就像是一个神奇的资源整合大师。其具备强大的功能,代码拆分能够将大的代码文件拆分成多个小的模块,在需要时按需加载,提高页面的加载速度。模块热替换功能则允许开发者在不刷新整个页面的情况下,实时更新修改的代码,大大提高了开发效率。

在安装 webpack 时,首先要确保已经安装了 Node.js 和 npm,然后通过 npm install webpack webpack - cli - D 指令进行安装。安装完成后,需要在项目根目录下创建 webpack.config.js 文件,在其中配置项目的入口文件、出口文件、模块规则等。

例如,配置入口文件src/main.js出口文件dist/bundle.js,配置对 CSS 文件的处理规则,使用 css - loader style - loader 将 CSS 文件打包到 JavaScript 文件中,实现样式的加载和应用。


4.开发环境的搭建和 vue.js 的安装

在完成上述工具的安装后,接下来就是搭建完整的 Vue.js 开发环境。首先创建一个项目目录,然后在该目录下初始化项目,使用 npm init - y 指令可以快速生成 package.json 文件,这个文件记录了项目的基本信息和依赖包信息。

接着通过 npm install vue@3.2.2 指令安装 Vue.js 3.2.2 版本及其相关依赖包。安装完成后,就可以开始创建 Vue.js 项目的基本结构,如创建 src 文件夹用于存放组件、页面等源代码,创建 public 文件夹用于存放 index.html静态文件。在 index.html 文件中引入 Vue.js 的核心脚本文件,在 src/main.js 文件中创建 Vue.js 的根实例,配置路由等,为后续的项目开发奠定基础。


(三)vue.js 开发关键技术点

1.定义页面、渲染视图

定义页面和渲染视图是 Vue.js 开发中的基础且核心的操作。在定义页面时,开发者使用 Vue.js 的模板语法来构建页面结构。模板语法类似于 HTML,但增加了一些特殊的指令插值表达式

例如,使用 {{}} 插值表达式可以将数据插入到 HTML 元素中,实现数据的动态展示。在一个用户信息展示页面中,可以通过 {{user.name}} 来显示用户的姓名

v - bind 指令用于绑定数据到 HTML 元素的属性上,如 v - bind:class 可以根据数据动态添加或移除 CSS 类,实现页面样式的动态变化。v - if、v - else、v - show 等指令用于条件渲染,根据条件决定是否显示某个元素。

在一个商品促销活动页面中,可以使用 v - if 指令根据活动是否开始来决定是否显示促销信息。通过这些指令和表达式,将数据与页面结构紧密结合,实现了数据驱动视图的效果。当数据发生变化时,Vue.js 会自动更新视图,无需开发者手动操作 DOM,大大提高了开发效率和代码的可维护性。


2.路由

路由在单页应用中扮演着导航员的角色,负责管理页面的导航和切换。Vue.js 提供了强大的路由功能,通过创建路由实例配置路由规则来实现页面之间的跳转和参数传递。

首先要安装 vue - router 插件,然后在项目中创建 router 文件夹,在其中的 index.js 文件中定义路由。

例如,定义一个商品详情页的路由,路径为 /product/:id,其中:id 是参数,用于传递商品的唯一标识。

在组件中,可以使用 router - link 组件来创建链接,实现页面跳转,如

<router - link :to="{name: 'product', params: {id: productId}}"> 查看商品详情 </router - link>。

当用户点击链接时,Vue.js 会根据路由规则找到对应的组件,并将其渲染到指定的位置,同时将参数传递给组件,组件可以通过 $route.params.id 获取参数值,从而展示相应商品的详细信息,确保应用具有良好的导航体验,用户能够在不同页面之间自由切换,获取所需信息。


3.发送 http 请求

在与后端服务器进行数据交互时,发送 http 请求是必不可少的环节。在 Vue.js 项目中,通常使用 Axios 等工具来发送 http 请求。Axios 是一个基于 Promise 的 HTTP 客户端,它支持在浏览器和 Node.js 环境中使用,具有简洁易用、功能强大的特点。

首先要通过 npm install axios 指令安装 Axios。在使用时,在项目中创建一个 api 文件夹,在其中定义各种请求接口。例如,定义一个获取商品列表的接口:

import axios from 'axios';

export const getProductList = () => {

return axios.get('/api/products');

};

组件中,可以调用这个接口来获取商品列表数据,如:

import { getProductList } from '@/api';

export default {

data() {

return {

productList: []

};

},

mounted() {

getProductList().then(response => {

this.productList = response.data;

}).catch(error => {

console.error('获取商品列表失败', error);

});

}

};

通过 Axios 发送 http 请求,能够方便地处理常见的 GET、POST、PUT、DELETE 等请求方法,并且可以在请求拦截器和响应拦截器中处理一些通用的逻辑,如添加请求头、处理错误信息等,确保与后端服务器的数据交互顺畅进行。


4. 表单的绑定和提交

表单是用户输入数据的重要方式,Vue.js 提供了便捷的表单绑定和提交处理功能。

通过 v - model 指令可以实现表单元素数据双向绑定

例如,在一个用户注册表单中,对于用户名输入框,可以使用 v - model 指令绑定一个数据变量,如:


<input type="text" v - model="user.username" placeholder="请输入用户名">

这样,当用户在输入框中输入内容时,user.username 变量的值会实时更新,反之,当 user.username 变量的值发生变化时,输入框中的内容也会相应改变。

处理表单提交事件时,使用 v - on:submit 指令绑定提交事件处理函数。例如:

<form v - on:submit.prevent="submitForm">

<input type="text" v - model="user.username" placeholder="请输入用户名">

<input type="password" v - model="user.password" placeholder="请输入密码">

<button type="submit">注册</button>

</form>

在组件的 methods 中定义 submitForm 函数,在函数中可以对用户输入的数据进行验证、处理,并发送到后端服务器进行注册操作,确保用户输入的数据能够正确传递到后端进行处理,实现用户与应用之间的数据交互。


5. 打包、部署

项目开发完成后,打包和部署是将项目发布到生产环境的关键步骤。使用 webpack 等工具对项目进行打包,webpack 会根据配置文件将项目中的各种资源文件,如 JavaScript、CSS、图片等,打包成优化后的静态文件,压缩文件体积,去除冗余代码,提高文件加载速度。

例如将多个 JavaScript 文件合并压缩成一个 bundle.js 文件,将 CSS 文件合并压缩并提取成单独的样式文件。部署项目时,可将打包后的文件上传到服务器,常见的部署方式有使用云服务器,如阿里云、腾讯云等,将文件部署到服务器指定目录,配置好服务器的域名解析和 Web 服务器(如 Nginx、Apache),确保用户能够通过域名访问到项目,使项目在生产环境中稳定运行,为用户提供服务。



6. 解决 js 的跨域问题

在前端开发中,跨域问题是常见挑战。当浏览器请求的资源与当前页面所在域名不同时,会出现跨域限制。书中介绍多种解决方法,使用代理服务器是常见方式之一。在开发环境中,可在 webpack.config.js 文件中配置代理,将前端请求转发到后端服务器,绕过浏览器的跨域限制。例如配置如下代理:

devServer: {
    proxy: {
        '/api': {
            target: 'http://backend - server.com',
            changeOrigin: true
        }
    }
}

这样前端发送到 /api 路径的请求会被代理到 http://backend - server.com,解决开发环境中的跨域问题。

生产环境中,可通过设置 CORS(跨域资源共享),在后端服务器配置响应头,允许特定域名的前端请求访问资源,如在 Node.js 的 Express 框架中,使用 cors 中间件进行配置:

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());

通过这些方法,确保项目能顺利与不同域名下的后端服务进行数据交互,保障项目功能的完整性。


7. debug

调试是开发过程中定位和解决代码问题的重要环节。在 Vue.js 项目中,常用浏览器的开发者工具进行断点调试。在代码中设置断点,当代码执行到断点处时,浏览器暂停执行,开发者可查看当前变量的值、调用栈信息等,逐步分析代码执行过程,找出问题所在。

例如在一个商品添加到购物车的功能模块中,通过在相关 JavaScript 代码行设置断点,查看点击添加按钮后变量的变化情况,判断是否正确执行了添加逻辑

还可通过输出日志信息辅助调试,在代码中使用 console.log () 函数输出关键信息,如在发送 http 请求前后输出请求参数和响应结果,帮助开发者了解数据流向和处理过程,快速定位代码中的错误,提高开发效率。


8. component、mixin、vuex、页面的生命周期

组件(component)是 Vue.js 的核心特性,将页面拆分成多个独立组件,实现代码复用和维护。例如在一个电商项目中,商品列表组件、购物车组件、订单结算组件等可独立开发和复用,提高开发效率。混入(mixin)是分发 Vue 组件中可复用功能的方式,将一些通用功能代码封装成混入对象,在多个组件中使用,减少重复代码。

Vuex 是 Vue.js 的状态管理模式,用于管理应用的共享状态,在多组件交互频繁的项目中,通过 Vuex 集中管理状态,确保数据一致性和可维护性。例如在一个多人协作的项目管理应用中,使用 Vuex 管理用户登录状态、项目列表等共享数据。

页面的生命周期定义了组件在不同阶段(如创建、挂载、更新、销毁等)的行为和钩子函数。

在组件创建阶段的 beforeCreate 和 created 钩子函数中,可进行数据初始化等操作;

在挂载阶段的 beforeMount 和 mounted 钩子函数中,可操作 DOM 元素等;

在更新阶段的 beforeUpdate 和 updated 钩子函数中,可处理数据更新时的逻辑;

在销毁阶段的 beforeDestroy 和 destroyed 钩子函数中,可进行资源清理等操作。合理运用这些概念和技术,能优化项目架构,提升项目性能和可维护性。

三、实战案例

本书给出一个农产品销售实战案例,为读者提供将理论知识应用到实际项目的机会。案例从项目搭建开始,首先创建项目目录,初始化项目,安装所需依赖包,包括 Vue.js 框架、相关插件以及用于处理农产品数据展示、订单管理等功能的第三方库。

搭建过程中,根据项目需求设计目录结构,创建 src 文件夹用于存放组件、页面、业务逻辑代码,创建 public 文件夹用于存放静态资源文件,如图片、图标等。

接着实现各项功能,在商品展示功能中,通过发送 http 请求获取农产品数据,使用 Vue.js 的模板语法和指令将数据渲染到页面上,展示农产品的图片、名称、价格、描述等信息。

为每个商品添加点击事件,当用户点击商品时,跳转到商品详情页,展示更详细的农产品信息,包括产地、规格、用户评价等。在购物车管理功能方面,实现商品添加到购物车、从购物车移除商品、修改商品数量、计算购物车总价等功能。

通过 Vuex 管理购物车状态,确保购物车数据在不同页面和组件间的一致性。在订单提交功能中,收集用户填写的收货地址、联系方式等信息,与购物车中的商品信息一起通过 http 请求发送到后端服务器,完成订单提交操作,并根据后端返回的结果提示用户订单提交是否成功。

最终成项目的部署。在这个过程中,读者能够将前面所学的定义页面、路由、发送 http 请求、表单绑定等知识有机结合起来,全方位熟悉 Vue.js 开发流程,切实提高实际开发能力。​

四、个人观点​

(一)优点​

  • 内容全面:本书几乎涵盖了 Vue.js 3.x 开发过程中涉及的各个方面知识,从基础概念到复杂的实战项目,无论是新手入门还是有一定经验的开发者想要深入学习,都能从书中获取有价值的内容。例如,在讲解开发准备阶段,详细介绍了 nvm、npm、git、webpack 等工具的使用,为读者搭建了完整的开发环境基础;在技术详述部分,对 Vue.js 开发中的各种关键技术点进行了全面且详细的讲解,让读者能够系统地掌握 Vue.js 开发技能。​
  • 理论与实践结合:通过实际项目案例帮助读者理解和掌握知识点,不仅讲解了 Vue.js 是什么、怎么用,还通过农产品销售案例让读者在实践中运用知识,提高实际开发能力。这种理论与实践相结合的方式,能够让读者更好地理解和吸收所学知识,避免了单纯理论学习的枯燥和抽象,同时也增强了读者解决实际问题的能力。​

(二)不足​

  • 深度有限:对于一些想要深入研究 Vue.js 底层原理的开发者来说,内容不够深入,比如响应式原理、虚拟 DOM 等只是在实际使用层面讲解,未深入剖析底层实现。这可能会让有深入学习需求的开发者在阅读本书后仍感到意犹未尽,需要进一步查阅其他资料来深入了解 Vue.js 的底层机制。​
  • 实践项目讲解不够细致:本书中最终的实践项目更多的是大篇幅的代码展示,对于每一部分没有详细讲解,对于整个项目的开发流程还是不够熟悉的。这可能会导致读者在跟随项目实践过程中,对于一些关键步骤和代码逻辑理解不够清晰,影响学习效果。例如,在农产品销售案例中,对于某些功能模块的实现思路和代码结构的讲解可以更加详细,帮助读者更好地理解和掌握项目开发的整体流程。​

总体而言,《Vue.js 3.x 快速入门》是一本非常适合 Vue.js 新手入门的书籍,它以清晰的结构、丰富的内容和理论实践结合的方式,为读者打开了 Vue.js 开发的大门。尽管存在一些不足之处,但对于初学者来说,仍然是一本极具价值的学习资料。在学习过程中,读者可以结合其他深入讲解 Vue.js 底层原理和实践项目的书籍,进一步提升自己的 Vue.js 开发水平。​

喜欢就点点关注和评论一起进步吧

转载请注明出处或者链接地址:https://www.qianduange.cn//article/23762.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!