（一）安装上Vue
搞Vue开发，没有是不可行的。它是个火狐和浏览器里的扩展，装了它，就可以给你的vue开发带来不尽的便利，不多说，用这个链接去装吧%?=-ntp-icon
（二）组件间通信
vue里面组件间的通信有好几种形式。你可以使用props从上到下地往组件里传递数据，这是一种单向的沟通：
如果你想着在子组件里通知父组件，告诉它某些事情发生了，或某个值发生了变化，可以用子组件发送事件的方式：
...
export default {
methods: {
onClick() {
this.$emit('nameOfEvent', someValue);
}
}
}
然后就可以在父级组件里，对这个事件的发生做相应监听和处理：
这里的$emit(）发送事件的方法，只能用在/child，也即父级和子级组件之间的通信。
如果你想着实现更复杂的组件间通信，比如两个子级组件之间，不通过父级，如何实现通信呢？这个时候你就可以使用或者vuex。在小中型的应用里，基本上就够用了，如果你并没有特别复杂的组件间状态管理的话。专栏里都讲解10种以上的通信方式，可以看看。
（三）使用VueX来做复杂的状态管理
我们说过模式处理小中型项目够用了，因为它简单直接，但如果你确定要做一个大中型的项目，你的前端应用里有较多数据处理，有很多贯穿整个应用的状态需要共享或处理，那么这个时候，就一般要使用VueX了。
学习和使用VueX的建议：
去学一下VueX里的state, , and 这些概念；研究一下Vuex ，建议如果用VueX，就最好上来就用上VueX ，如果你觉得VueX 繁琐、不值得，那么可能你的应用也没复杂到非得用VueX的地步；学一下如何创建出好的结构，因为VueX默认并没有给你任何限制学一下“”模式是如何运作的可以多参考一下这个Vuex ：//.com/vuejs-tips/vuex-（四）代码切割效果
现如今，性能是个热门话题，随着你应用越来越大、越来越复杂，我们得让其越快越好。尽可能地实现代码切割效果，这样可以极大减小你主要的或app文件的体积，因而能提高你应用的初始化时间。
const Loader = () => import(/* webpackChunkName: "aChunkName" */'../path/to/component.vue');
可以像这样来动态引入你的组件，需要的时候再去加载，而不是一下子都加载上。
（五）组件注册的简单方式
传统上，我们喜欢这样来注册vue组件：
import MyAwesomeComponent from './my-awesome-component.vue';
...
components: {
'my-awesome-component': MyAwesomeComponent
}
这没啥错，但你也可以更简洁一些：
...
components: {
MyAwesomeComponent,
MyAwesomeComponentTwo,
MyAwesomeComponentThree
}
（六）避免将所有组件都注册为全局组件
只有一些基本的组件，你在应用里到处用到，才应该被注册为全局组件，比如说一些/组件。
特定功能的组件，可以引入到其他的组件里，同时可以的话用动态引入，这样可以让你的文件小一些，性能更好一些。
（七）验证props属性
{id="Validateprops"}
当往一个组件里传参时，你最好是立马就进行一些验证，如果没有验证，没有声明一个props应该是什么类型(, Array, ……)，那么团队里其他调用你组件的人，他们就不知道该传个啥了，包括你自己，当数据类型发生变化或错误时，你也没有个很好的错误提示了。
（八）
如果你是要做个单页应用（spa），纯前端逻辑的话，那么很可能你会需要用到客户端方面的路由，需要在不同组件之间跳来跳去，这个时候就可以用上，它是vue官方的路由组件。用起来很简单，官方文档在这里//.vuejs.org/。
（九）url变了，但视图没有更新
当在一个SPA里时，你很可能会想着在视图里重复利用一些组件。假设你现在在一个博客文章页面上，然后你想从那个页面跳到另一篇文章上，你会期望相应的内容也改成新的文章的内容，但它却没有变化。
这往往是复用同一个组件的结果，vue还是用了之前的一个实例，这时候组件里this.$route是变了，但是相应的那些生命周期事件，比如(), () 和 ()，它们就没有被重新触发。
这个问题，一般有三种解决办法：
要强制vue创建一个新的组件实例，可以在设置一个 key：
或者你也可以设置个watch函数，当route路由变了的时候，就触发相应逻辑：
watch: {
"$route.params.somevalue": {
handler(somevalue) {
// do stuff
},
immediate: true
}
}
或者利用组件自身导航守卫，比如
（十）表单数据验证
当前端有表单时，我们可能会想着在前台页面直接加上验证，这样可以免去非得先往后端验证一下，当然这不是说你后端就不验证了，双重的验证仍是必要的，只是这样可以让前端体验更好更直接一些。
当然了，你没必要自己去处理前端验证的提示和逻辑，已经有这方面很好的组件了，可以试试 或 ，两个都不错，都可以帮你节省不少时间
（十一）好好理解一下vue的生命周期
要想真正发挥出vue的强大，就极其建议你好好理解vue的生命周期。
比方说，如果你想在()下去获取data里的一个值，那么就肯定获取不到；或者，你想在()里去获取一个ref元素，那么你也获取不到，因为这个时候还没有加载DOM元素呢。
关于vue的生命周期，可以看看下面这个完整的图：
（十二）避免直接修改DOM
使用Vue的一个首要原则就是，你不能直接去操作和修改DOM元素，这也是我们用一个像Vue这样的前端框架的目的，就不再像原生js或里那样了。
当然了，你可以用$refs来进行相关操作，这是更简洁更符合vue的方式的做法，这样也更容易日后维护，因为这样你就不需要依赖有着某个特定class或id的元素了。
（十三）进行数据交互
开发中，难免我们需要跟一些外部的服务沟通，来获取或发送数据，比如我们的后端API。
那么最简单的，你可以用浏览器自带的fetch()方法来获取数据，当然这个不一定所有浏览器都支持。
此外呢，建议使用axios组件来做各种数据访问和交互，它在vue和react社区里极其受欢迎。
（十四）列表遍历
vue里面可以用v-for很方便地进行列表遍历：
当你的v-for是用来循环输出一个简单的array时，其中的:key是可以不用指定的，但当你的v-for是用在一个组件上时，也即循环输出某个组件的内容和逻辑时，就必须得加上:key，这样的话，当你列出来的某一个组件逻辑发生变化时，vue才知道到底要去更新列表里的哪一个，所以这个:key就相当于是列表元素的一个辨识符。当然了，你也可以不管v-for的逻辑是否复杂，是否是用在子组件上，你默认都带上:key（始终推荐带上唯一key）。
（十五）计算属性和方法
当你想对vue实例里已有的data数据进行进一步处理时，就可以用计算属性，它的另一个好处是性能有保证，因为计算属性的结果是会被缓存的，只要它所依赖的数据不变，它 就不用来回去计算，不用每次都计算一下。
如果你有个很复杂的计算属性，那么最好的做法时，将其拆分成多个简单的计算属性，这样更容易测试、维护和阅读。
而一个方法，可以理解成是绑定到vue实例上的一个函数，它只有当你明确调用它的时候才执行，就跟一个普通的js或PHP里的方法一样。
（十六）学习和使用
当我们开发应用时，经常会遇到一些功能和逻辑，需要在不同的组件间多次使用，比如同样的方法逻辑，两个组件都要用到，但我们又不想也不应该完全复制两遍，这个时候就该用了。
这意味着，如果我创建了一个组件，它有X个不同的方法、周期逻辑、本地的状态等，我想复用它们，我就可以创建个，让其他的组件扩展这个，就可以在这些新的组件里使用原本它们没有的方法了。
当然是有缺点的，最主要是数据来源不清晰，Vue3.0会废弃使用。
（十七）用上vue自带的修饰符
在不同的场景下，vue有一系列不同的修饰符可以用，在一些场景下用起来还是比较方便的。
表单修饰符
.lazy
.
.trim
事件修饰符
原本我们经常需要用event.()来阻止提交按钮或点击事件的默认动作，但是有了vue的事件修饰符，我们就可以在绑定事件时加上个.stop来阻止单击事件继续传递，用.来阻止表单提交的默认刷新，非常方便，当然还有更多类似的。
.stop
.
.
.self
.once
.
按键修饰符，可以很方便地监听一些按键事件
.enter
.tab
. (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
（十八）好的系统布局和架构
Vue没有给你提供任何默认的系统布局或架构，除非比如说你用Nuxt之类的基于Vue的框架。
所以怎么组织你的应用结构，就取决于你自己了，取决于你的团队了，你们怎么样协商出一个好的、易于理解的应用结构，让所有的团队成员能更好地开展协作。
如果是个私人的小项目，可能不需要太在意这点，但如果是一个大中型的团队项目，那么这一点，将对你们极其重要，一个好的、有意义的系统结构，可以让你们的日常开发事半功倍、相互不牵扯。可以多借鉴后端应用和框架的通行做法，比如模块化，将原本单个的、相互牵扯的应用，开发成一个一个独立的模块，各个模块间相互不影响，只通过有限的途径进行沟通；也可以借鉴后端比较流行的微服务架构，将原本一个庞大的系统，拆分成多个微服务，它们完全独立、不相干，甚至不同的部分都可以用不同的语言、不同的框架。
（十九）做好必要的清理工作
当你在开发一个SPA应用时，如果不留意去移除一些自定义的事件、实例、等，就可能导致应用的内存占用越来越多，最终变得缓慢甚至无法响应。
可以是像类似这个样子：
created() {
refreshUserLoginTokenInterval(); //开启一个interval来刷新token
},
beforeDestroy () {
destroyUserLoginInterval(); //在组件销毁前，要记得移除这个interval
}
（二十）往一个元素上添加多个class
添加一个class是很简单的：
//当isError是true时，就加上red这个class
多个class：
// 相应属性为true时，就添加相应class本文是由用户"游客"发布，所有内容的版权归原作者所有。没有经过书面许可，任何单位或个人不得以任何形式复制、转载、引用本网站的内容。否则将追究法律责任。