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)
}
}
]
},