vue项目使用简略总结
2023-09-27 14:26:44 时间
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)
}
}
]
},
相关文章
- (尚049)Vue_源码分析_数据代理_效果+(尚050)Vue_源码分析_数据代理_效果_debug+(尚051)Vue_源码分析_数据代理_分析
- 如何在vue项目中使用svg图标
- 宝塔webhook自动化打包Vue项目时,npm不生效问题
- vue自定义轮播图组件 swiper
- vue 的 生命周期
- JavaScript - 判断今天是星期几(周几 / 礼拜几),适用于 Vue.js uni-app Nuxt.js 等前端项目
- vue项目中router路由配置
- vue 3.0 项目搭建移动端 (四) 全局路由拦截 vue-router beforeEach
- 15个 Vue 技巧,开发有段时间了,才知道还能这么用(你所知道真的包括这些吗?)
- 手写实现Vue核心功能EventBus事件派发机制
- 【Vue】Vue2做项目时遇到的小bug,简单总结一下~
- Vue 项目调试总结
- vue中使用原生swiper
- vue-cli3 一直运行 /sockjs-node/info?t= 解决方案
- Vue上传图片预览组件
- Vue之双向数据绑定
- 30个值得关注的Vue开源项目
- SpringBoot+Vue实现的在线点餐系统 附带详细运行指导视频
- flask+vue:创建一个数据列表并实现简单的查询功能(一)