vue项目使用简略总结

1、利用iView Cli搭建项目结构
2、搭建完毕之后将proxy.js和'Server.js'放置到node_modules\webpack-dev-server\lib目录下，以实现跨域访问公司平台内的接口资源
3、实际开发中发现无论是开发环境还是打包之后的部署文件在ie、safari、iphone下无法访问，原因是开发过程中使用了es6语法，某些js文件没有编译成es5导致的，解决方法是：
安装两个组件es6-promise和'babel-polyfill'，并在main.js引入

import "babel-polyfill";
import Es6Promise from 'es6-promise';//ie访问需要
Es6Promise.polyfill();

加粗文字项目制作过程中的有关vue-router传参和vue组件通信的简单总结

传值的方法：
（1）子组件改变父组件的状态

//父组件.html
<router-view @zch68='aa'></router-view>
methods:{
  aa(item){
     //这里可以操作传过来的值--item
   }
}
//子组件.html
this.$emit('zch68',{name:'zhou'})

(2)
非父子组件的通信，新建一个空的 Vue 实例作为中央事件总线

//新建bus.js
import Vue from 'vue'

export var bus = new Vue()
//App.vue里created方法里定义事件
import { bus } from 'bus.js'
// ...
created () {
  bus.$on('tip', (text) => {
    alert(text)
  })
}
//Test.vue组件内调用
import { bus } from 'bus.js'
 // ...
bus.$emit('tip', '123')

（3）父组件通过props传值

//父组件.html
<router-view :mmm='msg'></router-view>
data(){
  return {
    msg:'aaaa'
  }
}
//子组件.html
export default{
  props:{
     mmm:'
  }
}

可以通过this.mmm获取值

（4）路由传参
千万要记住一点：
通过this.$router.push()来访问路由示例
通过this.$route.params或者this.$route.query来获取参数
一定要注意区分router和route 少一个单词！！！！！！！!马丹

（5）webpack环境下路由命名视图书写格式

<router-view @updateData='receiveData'></router-view>
<router-view @updateActionData='receiveActionData' name='schoolAction'></router-view>

{
                path: 'school',
                meta:{title:'应用管理-学校应用'},
                component: (resolve) => require(['./views/manageSchool.vue'], resolve),
                children:[
                    {
                        path: 'openApply',
                        name: 'openApply',
                        meta:{title:'应用管理-学校应用'},
                        components:{
                            default: (resolve) => require(['./views/manageOpenApply.vue'], resolve)
                        }
                    },
                    {
                        path: 'schoolAction',
                        name: 'schoolAction',
                        meta:{title:'应用管理-应用操作'},
                        components:{
                            schoolAction: resolve => require(['./views/manageSchoolAction.vue'], resolve)
                        }
                    }
                ]
            },

原文地址：https://segmentfault.com/a/1190000013197368