最近由于公司需要,一直在专研vue和element,vue和bootstrap的用法,以下是我开发中所牵扯到的,希望对友人们有所帮组。
vue和必须依赖安装,在此略过(大家都轻松可以搞定哒)
axios跨域设置
打包相对路径设置
config/index.js
assetsPublicPath: '/web/',
build:{
assetsPublicPath: '/web/',
}
步入正题,页面开发,接口渲染
关于组件
当时纠结点在于全局组件和局部组件,开始老想着PHP一体网站那样,公共头部、底部、主题,后来绕了好久,决定用局部组件,一路下来,局部组件确实灵活好用
局部组件添加步骤
1、src/components mkdir common/top.vue
2、目标home.vue文件引入组件:
import ctop from '@/components/top'
渲染组件:
<ctop></ctop>
跨域请求数据渲染
1、搞清楚三个常用设置
//模板渲染,数据绑定
data(){
return {
str:'',//单变量
arr:[],//数组
arrs:{},//多维数组,即字典
}
},
//方法定义
methods{
democlick(){//类似q点击事件
},
},
//初始加载
mounted(){
//页面初始值、初始方法数据获取和绑定
}
2、路由传递参数,最后才明白有两种
a、路由定义传参,比如 paht/:id
b、跳转路由传参
that.$router.push({
name: 'demo',
params: {
hourseid: that.hid,
type: type,
}
})
二者区别,路由定义传参,强制刷新,参数依旧可以使用
跳转路由传参,刷新后,参数失效,需要借助于localstorage等