189 8069 5689
这次给大家带来Vue组件开发有哪些技巧，Vue组件开发的注意事项有哪些，下面就是实战案例，一起来看一下。
在凤冈等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供做网站、网站制作 网站设计制作按需定制开发,公司网站建设,企业网站建设,高端网站设计,成都营销网站建设,外贸网站建设,凤冈网站建设费用合理。
Vue 单文件组件开发
当使用vue-cli初始化一个项目的时候，会发现src/components文件夹下有一个HelloWorld.vue文件，这便是单文件组件的基本开发模式。
// 注册
Vue.component('my-component', {
template: 'pA 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的两个关键类名为[name]-enter-active和[name]-leave-active
通过Vue.extend继承一个组件的构造函数（不知道怎么说合适，就先这样说），然后通过这个构造函数，便可以实现组件相关属性的自定义（使用场景：js调用组件）
js调用组件时，为了维持组件的动画效果可以先document.body.appendChild 然后Vue.nextTick(() = instance.visible = true)
jQuery的诸多局限性导致前端工程师的发展受到了很多的限制，只能做一些表面性的工作，并不能实现前后端分离开发。
而近期出现的Vue，它给前端带来了无限的可能和改变。
改变一：真正意义上的前端工程师
之前开发都是前端做静态页面，把页面给到后台程序员改成jsp、php、asp等等...一顿乱改，一顿塞变量，做完以后页面样式乱七八糟，最后你再调整css。说白了你会html，css就行了，基本没什么门槛，可以这么说。
有了Vue和Node的前端工程化以后，前端工程师能做的事情越来越多，后台人员只需要抛过来一个Api，剩下的就可以都交给前端了。
改变二：服务端渲染VS客户端渲染
传统的jsp、php或是模板渲染也好，都是服务端渲染，就是客户端一个请求，服务器直接把整个页面返回给你，简单粗暴。（Spring Boot是通过模板引擎，由服务端完成的渲染工作）
但是vue开发是前后端分离开发，通过api进行交互，客户端请求服务器返回json数据，由客户端进行渲染。
不仅减轻了服务器的压力速度更快而且渲染更加优雅，代码更容易维护。
改变三：渲染优雅，代码易维护
jQuery是通过DOM来控制数据，不仅笨重而且渲染数据特别麻烦，而 Vue是通过数据来控制状态，通过控制数据来控制渲染，变量可以直接写在标签中，渲染更加优雅。
因为前端代码和后台代码都是分开的，所以项目更容易维护，开发效率更高。
改变四：项目工程化，结合npm直接安装第三方库
Vue让前端项目更加工程化，同时也规范了前端工程师的代码，而node和npm的加入才是vue能蓬勃发展的重要原因。
Node为Vue提供了本地server和模块化开发的思路，npm更能安装Vue项目需要的模块，配合Vue使用，比如Moment.js Element ui vuex等等，这些第三方库让Vue有了无限的可能。
敲黑板（补充下）：传统开发jQuery是命令式编程，现代框架开发是函数式编程。现代框架开发，可以使用Webpack（当然使用jQuery也可以使用Webpack），可以使用人家提供的现成的脚手架，比方说create-react-app，vue-cli。极大提高了开发的效率，并且可以使用最新的ES6、ES7语法进行开发，在编码体验上，就提高了一个档次。
总结
知其然，知其所以然，没有最好的框架，只有最合适的框架！
Vue是一个js框架。什么叫框架？个人理解是对原生JS ，html,css的功能进行封装之后形成的一个语言。
比如，你需要盖一座房子，你用原生js，html，css写代码相当于你用手一块砖一块砖地垒。而使用Vue，Vue已经给你了一面墙，一根房梁，一扇门，你需要做的是把门墙梁拼成房子。它帮助你提高开发效率。你只需要按照它的规矩来写三段部分：template、script、style就能完成平时html、css、js的功能。页面视图展示，前后数据交互都完成了。
之后使用webpack等工具，会将vue语法转换为html,js,css。
其实使用Vue开发和原生html,css,js开发步骤逻辑是一样的。
除此之外，vue还有动态绑定，数据驱动等等特点，这些都是题外话。我相信我的回答已经解决了你的问题，如果感觉有帮助，请采纳我的答案。
1 从浏览器中了解这个应用的呈现结果，对整个应用具有的大功能模块有个大致了解，比如包含欢迎页、用户管理、业务数据查询等；
2 学习了解Vue项目的默认目录结构及加载流程，比如文件index.html、package.json、main.js，目录/build、/config、/src等。
参考链接 ：
优雅的 Vue 项目目录结构设计
VUE启动流程
涉及state对象使用的，大部分是需要先引入vuex，而vuex对象的定义及处理文件，都默认存放在工程的/src/store目录下，到该目录下的相应文件中可找到其他文件依赖的变量数据。
参考链接 ：
Vuex 是什么？
import语法是很多其他语言中都有的关键词，较易理解，但export是干什么用的，export default和export又有什么区别，其他文件是如何使用export出去的变量的？
参考链接 ：
export default 和 export 区别
工程中经常见到v-auth指令，从字面意思上可以理解为权限的验证，但在网上搜不到该指令的含义和用法，后才得知为本应用的自定义指令，并有专门针对该指令进行定义的函数。
参考链接 ：
自定义指令
刚对Vue的组件概念有些了解时，会把所有的元素标签都认为是Vue自定义组件的一部分，然后开始到工程中去找该组件的定义，其实还有很多是官方组件，比如el-popover、el-table、el-table-column等，到相应的官网上找标签的定义和用法即可。
参考链接 ：
Element UI 教程
1 默认用的intellij idea作为Vue工程的开发IDE，在该IDE中启动Vue工程，需要安装node js，并在IDE中配置Run Configurations，详细配置见下面的参考链接；
2 配置好运行参数之后，在启动过程中报错：Error: listen EACCES: permission denied 0.0.0.0:80，该错误的原因为本地80端口被占用，通过关闭80端口占用进程或修改配置文件中的端口号即可正常启动。
参考链接 ：
idea运行vue项目
用idea在本地调试时，只要运行npm run dev即可，但若将分支部署到服务器上，则需先在本地运行npm run build进行编译，然后将编译完的文件上传至git，这样用自动化集成工具进行集成时，才可从git中拉取解析后的文件并正常被web服务读取（该操作与java工程在git中只保存源码不同）。
对于前端开发来说，组件化技术已经是一门必修课了，这其中又主要以 react 和 vue 为主。但平时在开发组件，尤其是公共组件或者第三方组件库的时候，往往会有一些困扰：
所以， storybook 就是为了解决这些问题而出现的，它为你的组件搭建了一个强大的开发环境，主要提供了以下的几个功能：
社区已经有很多组件库都在使用 storybook 开发，比如：
再顺便截个图吧
查看 storybook - Writing Stories ，了解怎么写 stories 与怎么用插件。
如果需要手动添加 storybook 或它的插件，可以查看：
更多博客，查看
这是一个前端使用vue，后台使用spring boot开发的论坛项目，旨在熟悉前后的开发技术，随做随记，记录一些知识要点。
HBuilderX
npm
1.Vue 渐进式JavaScript 框架。
2.ElementUI 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
3.axios 易用、简洁且高效的http库。
4.vue-router Vue.js 官方的路由管理器。
5.Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
6.font-awesome 提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。
7.Normalize.css 提供HTML元素样式上跨浏览器的高度一致性。
前端项目需要对以上使用到的内容有一定的了解。熟悉以后就可以正式开始开发工作了。