这里写目录标题
创建项目
基于webpack打包的vue项目
vue init webpack -s
- 选择项目的相关配置
npm install
npm run dev
项目中的内容
- 创建后台虚拟数据:mock数据
- router文件夹下的index.js文件中存放的是路由,在main.js中已挂载,所以只写路由就够了
- 改配置后要重启
- vue-router的使用:首先生成组件,再将组价在index.js中导入,再配置路径和对应的组件名,使用就是在App.vue中添加
<router-link to='路由地址'>
,再<router-view>
就行了 - axios请求数据:在main.js中导入axios后,用
Vue.prototype.$axios = axios
语句将axios变成全局变量,用this.$axios
使用方法,在App.vue中使用mounted()钩子函数,在其中使用
this.$axios.get(‘path’).then(res=>{ res.data就是获取到的数据,可以查看对应的数据后在进行相关的数据操 作}})
- 关于父组件传值给子组件:首先父组件中,导入子组件,挂载组件,在组件便签中":传递的自定义变量名"=在父组件中定义的变量名。在子组件中,props引入自定义的变量名,就可以使用了。
- better-scroll库的使用:
- 目的:父盒子固定时使得超出部分顺滑的滚动
- 步骤:先下载库,在导入库,获取父盒子(加ref属性,用
this.$refs
获取),在钩子函数中用this.$nextTick(() => { this.自定义名=new BScroll(this.$refs.ref属性值,{}); })
- 注意:滚动只对父盒子下的第一个子盒子有效。