最全vue项目实战（Vue组件开发有哪些技巧）

本文目录

• Vue组件开发有哪些技巧
• Vue实战项目之获取手机短信验证码
• vue实战（7）：完整开发登录页面（一）
• Vue2/ArcGis4开发实战
• Vue实战（六）通用Table组件
• 实战项目：基于Vue第三方库element-ui实现的金融后台管理系统
• vue实战问题1：vue组件beforeUpdate和updated生命周期钩子不执行

Vue组件开发有哪些技巧

这次给大家带来Vue组件开发有哪些技巧，Vue组件开发的注意事项有哪些，下面就是实战案例，一起来看一下。

Vue 单文件组件开发

当使用vue-cli初始化一个项目的时候，会发现src/components文件夹下有一个HelloWorld.vue文件，这便是单文件组件的基本开发模式。

// 注册Vue.component(’my-component’, {template: ’《p》A custom component!《/p》’})// 创建根实例new Vue({el: ’#example’})

接下来，开始写一个dialog组件。

Dialog

目标对话框组件的基本样式如图：

根据目标样式，可以总结出：

• dialog组件需要一个titleprops来标示弹窗标题

• dialog组件需要在按下确定按钮时发射出确定事件（即告诉父组件确定了）

• 同理，dialog组件需要发射出取消事件

• dialog组件需要提供一个插槽，便于自定义内容

那么，编码如下:

• 《template》
• 《p class="ta-dialogwrapper"》
• 《p class="ta-dialog"》
•  《p class="ta-dialogheader"》
•  《span》{{ title }}《/span》
•  《i class="ios-close-empty" @click="handleCancel()"》《/i》
•  《/p》
•  《p class="ta-dialogbody"》
•  《slot》《/slot》
•  《/p》
•  《p class="ta-dialogfooter"》
•  《button @click="handleCancel()"》取消《/button》
•  《button @click="handleOk()"》确定《/button》
•  《/p》
• 《/p》
• 《/p》
• 《/template》
• 《script》
• export default {
• name: ’Dialog’,
• props: {
• title: {
•  type: String,
•  default: ’标题’
• },
• },
• methods: {
• handleCancel() {
•  this.$emit(’cancel’)
• },
• handleOk() {
•  this.$emit(’ok’)
• },
• },
• }
• 《/script》

这样便完成了dialog组件的开发，使用方法如下：

• 《ta-dialog
• title="弹窗标题"
• @ok="handleOk"
• @cancel="handleCancel"》
• 《p》我是内容《/p》
• 《/ta-dialog》

这时候发现一个问题，通过使用v-if或者v-show来控制弹窗的展现时，没有动画！！！，看上去很生硬。教练，我想加动画,这时候就该transition组件上场了。使用transition组件结合css能做出很多效果不错的动画。接下来增强dialog组件动画，代码如下:

• 《template》
• 《transition name="slide-down"》
• 《p class="ta-dialogwrapper" v-if="isShow"》
•  // 省略
• 《/p》
• 《/transition》
• 《/template》
• 《script》
• export default {
• data() {
• return {
•  isShow: true
• }
• },
• methods: {
• handleCancel() {
•  this.isShow = false
•  this.$emit(’cancel’)
• },
• handleOk() {
•  this.isShow = true
•  this.$emit(’ok’)
• },
• },
• }
• 《/script》

可以看到transition组件接收了一个nameprops，那么怎么编写css完成动画呢？很简单的方式，写出两个关键class(css 的 className)样式即可：

• .slide-down-enter-active {
• animation: dialog-enter ease .3s;
• }
• .slide-down-leave-active {
• animation: dialog-leave ease .5s;
• }
• @keyframes dialog-enter {
• from {
• opacity: 0;
• transform: translateY(-20px);
• }
• to {
• opacity: 1;
• transform: translateY(0);
• }
• }
• @keyframes dialog-leave {
• from {
• opacity: 1;
• transform: translateY(0);
• }
• to {
• opacity: 0;
• transform: translateY(-20px);
• }
• }

就是这么简单就开发出了效果还不错的动效，注意transition组件的name为slide-down,而编写的动画的关键className为slide-down-enter-active和slide-down-leave-active。

封装Dialog做MessageBox

Element的MessageBox的使用方法如下:

• this.$confirm(’此操作将永久删除该文件, 是否继续?’, ’提示’, {
• confirmButtonText: ’确定’,
• cancelButtonText: ’取消’,
• type: ’warning’
• }).then(() =》 {
• this.$message({
• type: ’success’,
• message: ’删除成功!’
• });
• }).catch(() =》 {
• this.$message({
• type: ’info’,
• message: ’已取消删除’
• });  
• });

看到这段代码，我的感觉就是好神奇好神奇好神奇（惊叹三连）。仔细看看，这个组件其实就是一个封装好的dialog,

接下来，我也要封装一个这样的组件。首先，整理下思路：

• Element的使用方法是this.$confirm，这不就是挂到Vue的prototype上就行了

• Element的then是确定，catch是取消，promise就可以啦

整理好思路，我就开始编码了：

• import Vue from ’vue’
• import MessgaeBox from ’./src/index’
• const Ctur = Vue.extend(MessgaeBox)
• let instance = null
• const callback = action =》 {
• if (action === ’confirm’) {
• if (instance.showInput) {
•  instance.resolve({ value: instance.inputValue, action })
• } else {
•  instance.resolve(action)
• }
• } else {
• instance.reject(action)
• }
• instance = null
• }
• const showMessageBox = (tip, title, opts) =》 new Promise((resolve, reject) =》 {
• const propsData = { tip, title, ...opts }
• instance = new Ctur({ propsData }).$mount()
• instance.reject = reject
• instance.resolve = resolve
• instance.callback = callback
• document.body.appendChild(instance.$el)
• })
• const confirm = (tip, title, opts) =》 showMessageBox(tip, title, opts)
• Vue.prototype.$confirm = confirm

至此，可能会疑惑怎么callback呢，其实我编写了一个封装好的dialog并将其命名为MessageBox,它的代码中，有这样两个方法:

• onCancel() {
• this.visible = false
• this.callback && (this.callback.call(this, ’cancel’))
• },
• onConfirm() {
• this.visible = false
• this.callback && (this.callback.call(this, ’confirm’))
• },

没错，就是确定和取消时进行callback。我还想说一说Vue.extend,代码中引入了MessageBox,

我不是直接new MessageBox而是借助new Ctur，因为这样可以定义数据(不仅仅是props)，例如：

• instance = new Ctur({ propsData }).$mount()

这时候，页面上其实是还没有MessageBox的，我们需要执行:

• document.body.appendChild(instance.$el)

如果你直接这样，你可能会发现MessageBox打开的时候没有动画，而关闭的时候有动画。解决方法也很简单，appendChild的时候让其仍是不可见，然后使用类这样的代码：

• Vue.nextTick(() =》 instance.visible = true)

这样就有动画了。

总结

• 通过transition和css实现不错的动画。其中，transition组件的name决定了编写css的两个关键类名为-leave-active

• 通过Vue.extend继承一个组件的构造函数（不知道怎么说合适，就先这样说），然后通过这个构造函数，便可以实现组件相关属性的自定义（使用场景：js调用组件）

• js调用组件时，为了维持组件的动画效果可以先document.body.appendChild 然后Vue.nextTick(() =》 instance.visible = true)

Vue实战项目之获取手机短信验证码

1，先判断手机号和验证是否为空， 2，点击发送验证码，1分钟计时，得到验证码 3，输入的验证码是否为空和是否正确， 4，最后向服务发送请求 初始界面如下： 获取验证码时进行倒计时效果如下：

vue实战（7）：完整开发登录页面（一）

vue实战（1）：准备与资料整理 vue实战（2）：初始化项目、搭建底部导航路由 vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由 vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态 vue实战（5）：总结一 vue实战（6）：异步显示数据、开发Star组件 vue实战（7）：完整开发登录页面（一） vue实战（8）：完整开发登录页面（二） vue实战（9）：总结二 vue实战（10）：开发店铺详情（一） vue实战（11）：开发店铺详情（二） vue实战（12）：完结 + 附学习视频 这一部分内容，回到之前完成的 Login.vue 页面，做逻辑之前先完成一些必要的效果。 2）判断是否可以发送验证码 3） login.vue 页调用并判断

Vue2/ArcGis4开发实战

更新：2021-8-18 最近用 Vue2结合 ArcGis4 做了一个项目，因为此前并没有怎么接触过ArcGis for JavaScript,所以整个过程还是比较痛苦的，虽然GIS官网有例子，并没有起到什么实质作用，网上关于vue/gis的资料又少的可怜，好了废话不多说，直接上干货！ 安装好 cli 后，开始引入 GIS ,在目录 src 》 assets》js 下新建下新建 ArcGisServe.js 文件,供我们编写 ArcGis Serve 服务地址。 这里可以定义自己服务器上的底图的地址，默认情况下是官网地址，也可以添加其它服务地址，随意。 这中方法就不多说了，直接 script 标签 引入 CDN 网址，要说明的是，可用 CDN 网址较少，官网提供的地址在国内加载较满。 .vue 组件 .vue 组件 二者都可以通过npm 安装的依赖包，不同的是：

Vue实战（六）通用Table组件

***隐藏网址***

随着业务的发展和功能的增多，我们发现不少页面都具备相似的功能，这里举几个比较俗的例子：可以多选的下拉菜单，带输入的对话框，日期选择器等等，于是我们会想办法将这些共有的功能抽取成一个个公共组件，以便能够在不同的页面或业务中使用。

对于一个中后台类的项目，一个比较常见的展示形式就是Table了，相信大家都不陌生，如下图所示：

一个Table通常由如下几个部分构成：

除此之外，由于 Table 中的数据往往都是从后端获取的，所以这个包含 Table 的页面还需要发起一个请求，并且将最终的内容渲染在表格之内，请求的过程由于是异步的，所以需要给用户展示一个 Loading 动画；当请求数据为空时，需要显示一个占位的空元素控件。

在 Falcon 项目的实践中，我们发现，每一个页面中的 Table 除了行数，列数，及单元格的内容不同之外，其它的地方，包括样式，分页及数据处理逻辑都是一样的，每次新增一个这样的页面无非就是拷贝粘贴了，那么在这种情况下，我们抽取出了一个通用的 Table 组件，取名为：TableBox。

说到这里插一个题外话：

关于这个问题我认为，如果一个功能只出现在了一个或两个页面中，往往是没有必要处理的，因为一两个功能的重复还不足以说明问题，也很难看出其中的共性，如果强行抽取的话，反而会增加维护的负担；如果出现的地方超过了两处，那么我们就需要考虑将这个功能进行抽取了，我也常常和 Team 的人说：“如果一个功能你拷贝粘贴了1次，没关系，不用纠结；2次的话，就得考虑其复用性和组件化了”。

当然，以上内容只适用于那些初期开发过程中无法预测未来变化的项目，如果刚开始产品设计的时候，就能够充分的预见和考虑未来的业务发展，并且给出详细的产品及UI设计方案，那么就另当别论了。

回到我们的主题，抽取这个 TableBox 其实并不是一气呵成的，而是在业务迭代中，不断地发现新的场景，新的问题，带着这些问题我们不断的优化 TableBox，最终达到一个较为完整的状态。这也符合 Vue 本身渐进式的理念。接下来我们花些时间，一起探讨一下这些场景和问题：

我们发现，对于不同的页面，只要带有 Table 的，其数据都需要从远端服务器获取，一般情况下，我们会在每个业务中都去写一下这个网络获取数据的逻辑，但是，如果仔细想想，你就会发现，其实这类列表数据获取和处理的逻辑都是一样的。所以针对这个情况，我们只要和后端协商好列表相关的统一 API 数据结构，如：

那么数据获取，渲染，Loading 动画展示隐藏，分页加载等操作都可以在 TableBox 中完成。 这个组件需要的只是向外暴露出数据请求的 API 地址及各种参数：

然后写好对应的获取数据的 fetchData 方法：

这样对于调用者来说，只需要简单的传入相关 API 地址及参数就可以了，数据加载的事情让 TableBox 去处理就好了，非常的方便。

因为 TableBox 组件本身是和业务无关的，所以其肯定无法知道我的这个 Table 的表头是什么，有多少行，也无法知道每一行展示什么数据，这些内容全部应该由父组件告知 TableBox。

要实现以上的功能，我们可以借助于 Vue 本身提供的强大的工具 Slot，如果简单点说，大家可以把 Slot 理解为一个坑位，因为大多数情况下，组件自己无法预先知道某块区域放置什么内容，那么组件可以先将个区域放置一个 Slot，就是挖个坑，当父组件引入子组件时，会告诉子组件往这个坑位中填充什么样的内容。

回到我们的 TableBox 组件，我们首先挖两个坑（放置两个 Slot ），命名为 ths 和 item ，分别用于表头和行列表内容：

这样对于表头的数据，可以由引入 TableBox 的父组件来指定，用法如下，其中 slot=’ths’ 就是刚才我们在 TableBox 中放置的 Slot

同样，对于每一行的内容，也是由引入 TableBox 的父组件来指定，用法如下：

在开发业务的过程中，遇到一个场景：当页面数据已经全部加载完毕后，在某些场景下需要改变 Table 中某些数据的状态（删除某列或改变某一列的数据）。

这里具体举个 Falcon 中的实际例子： 我们允许用户给每个项目分配多个环境，以区分测试，生产，开发和各种自定义的场景，在每个环境下，用户可以设置不同的 Git Branch 。用户点击 Choose Branch 按钮后，会触发一个请求到后端，变更当前环境的 Git Branch， 修改成功后该列表项的按钮会显示为 Current Branch 。

由于以上逻辑都是在引入了 TableBox 的父组件中完成的，其能够控制数据的刷新，由于 场景1 中我们已经把数据请求的逻辑都封装在了 TableBox 中，所以我们需要让其向外暴露出一个 Boolean 属性：reloadData，当此属性为 true 时，TableBox 会重新请求一次API，并刷新列表。

同理，由于操作数据是由父组件发起的，所父组件中也需要有同样的属性，并且和 TableBox 中的 reloadData 保持数据同步，这里用到了 Vue 2.3 版本增加的一个 .sync 修饰符进行处理 。

这样，当 reloadData 在数据更新完毕后还原为 false 状态时，我们可以显示的触发一个 emit 事件：

由于目前所有的数据获取都是在 TableBox 内部处理的，所以父组件本身是无法直接获取到数据的。但是在某些情况下，我们又希望父组件能够获取到数据，以便能够在顶层进行更灵活的处理，这时我们就需要在 TableBox 内部将数据抛出。

抛出的方式也很简单，我们可以使用 emit 方法抛出一个事件。根据这个思路我们改造一下上文提到的 fetchData 方法：

然后在父组件中监听这个事件，这样就能获取到完整的数据了。

解决了以上4个场景的问题后，我们这个 TableBox 可以说告一段落了，后续如果有遇到新的场景，新的问题，我们只需要不断的去优化去完善这个组件即可。 到目前为止，TableBox 已经应用到了我们内部的三个后台项目约几十个页面中，可以说大大节省了我们的时间，提升了整体效率。 并且随着这样的组件越来越多，甚至我们的后端工程师经过简短的培训，也可以上手部分前端页面的开发了。***隐藏网址***

实战项目：基于Vue第三方库element-ui实现的金融后台管理系统

***隐藏网址***

项目是 vue2.0 + element-ui + node+mongodb 构建的 后台管理系统 ，所有的数据都是从服务器实时获取的真实数据，具有真实的注册、登录、数据显示、新增数据、修改数据、删除数据等功能。

前端 ： vue2 + vuex + vue-router + webpack2.0 + ES6/7 + less + element-ui

服务端 ：nodejs + express + mongodb

***隐藏网址***

vue实战问题1：vue组件beforeUpdate和updated生命周期钩子不执行

        前段时间遇到的一个问题，项目是由支付宝小程序移植过来的vue项目，将didUpdate更换成了updated，跑起来后发现updated生命周期钩子没有执行。         组件通信使用的就是普通的父子组件的传值，当时以为是父组件上的数据没有更新，所以导致updated没有执行，不过后来发现父组件的值改变了，但是updated没有执行。找了下官方文档，发现文档中提到了这个坑。        updated可能并不会执行，最好的还是使用计算属性或者用watch监听数据变化         以为差不多这样就可以了，后来随着测试的加深，一般监听时是不能监听到对象属性值的变化的，发现如果监听的是Object类型的复杂数据类型的话，这样写是无法监听key和value的变化的，需要对Object类型进行深层监听这样的话，基本上就解决了vue组件beforeUpdate和updated生命周期钩子不执行的问题