一、项目开发流程

1.创建项目

一是通过CLI命令行创建，二是通过图形化界面创建项目，我个人觉得通过图形化界面创建项目相对简单方便些。

2.下载依赖

• vue-router：路由是必须要有的，有时需要手动下载安装
• element ui：特别推荐这个组件库，里面的组件相当齐全，足够应对一般项目的开发使用
• axios：用于发起Ajax请求，设置拦截请求和响应等
• ······

3.开发项目

本次开发的是一个电商后台管理系统，主要页面有登录页和管理页（内容页），这两个是兄弟关系，其他的都是管理页面的子组件，子组件全部放在components文件夹中；assets文件夹内是需要用到的资源，图片或者字体都可以放在这里面；router文件夹是用来配置路由的。接下来就是根据用户需求进行项目开发，添加组件，完善功能。

4.测试功能

项目完成后需要对其功能进行完整的测试，找出其中的未实现功能和不合理现象，进行修改和优化

二、开发过程中遇到的问题

1.导航复用

几乎每个页面都有路径导航信息，可以引用element UI里面的面包屑导航组件，但是如果每个页面都写一遍，也是相当浪费时间的，所以为了简化代码，对其进行了复用，导航路径信息在路由配置时进行添加，只需要在组件内直接把面包屑导航组件引用过来，然后挂载注册一下就可以了

2.实现父子组件间的通信

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，那么不同组件之间的数据就无法相互引用。父子组件之间的数据传递只能从上往下，不能逆流。这正是 Vue 的设计理念之单向数据流。

props

子组件通过props属性，在子组件中接收父组件传过来的值，props是单向绑定的，即只能父组件向子组件传递，不能反向。

$ref

通过$ref实现通信,ref可以给子组件注册引用信息。引用信息将会注册在父组件的$refs对象上，此时就可以在父组件中通过$refs调用子组件中的方法。如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可以获取到在子组件里定义的属性和方法。

$emit

通过$emit实现通信，$emit绑定一个自定义事件demo，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@demo监听并接收参数。

3.使用v-for遍历数组时，代码总是出现警告

:key是用来标识数据唯一的，如果不加，在删除其中某条数据后，vue会复用之前的节点，如果被删除节点有遗留的选项，将会导致数据混乱。
可以这样简单地理解，没有:key属性时，状态默认绑定的是位置；有:key属性时，状态根据:key的属性值绑定到了相应的数组元素。

三、总结

父子组件之间通信的三种方法prop、$ref和$emit的区别

prop着重于数据的传递，它并不能调用子组件里的属性和方法。
$ref着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。
$emit前两种方法主要都是父组件向子组件通信，而通过$emit可以实现子组件向父组件通信。

v-for中的:key

从数据库中获得的数据，一般都具有唯一识别的id，而不是使用index作为:key值。如果你用索引作为键，那么在删除第二项的时候，索引就会从1 2 3变成1 2(因为索引)永远都是连续的，所以不可能是1 3)，那么Vue依然会认为你删除的是第三项.

router和route的区别

route为当前router跳转对象里面可以获取name、path、query、params等
router为VueRouter实例，想要导航到不同URL，则使用router.push方法

弹性布局

最后为大家推荐一个贼好用的页面布局————flex布局（弹性布局）
flex布局是css3的新特性之一，用起来相当的便捷，下面附上我在网上查到的常用布局链接：blog.csdn.net/qq_34648000…
这个是详解链接：www.jianshu.com/p/15519b7a9…