红线区域我们引入了移动适配的lib-flexible,和font-awesome,style公共样式
接下来,我们来引入axios和vue-axios,请看下图:
这里我们引入了vue-axios和axios,并通过vue.use来进行绑定
跑起项目
准备工作已经做完了,接下来可以跑起项目了:
npm run dev
根据命令行的提示打开网页即可看到效果:
好的,我们的项目初始化就到这里了。
配置映射和测试斗鱼API
配置映射
来到根目录下的 config/index.js 这里是配置开发,构建,及路由映射的地方
如图修改proxyTable中内容,这里解释一下几个参数:
target : 目标地址,
changeOrigin : 是否跨域,
pathRewrite : 键值对中用值替换键的值,其中^是正则中表示开始的符号
随手请求一个API
进入src/App.vue,如下修改文件:
created是我们的生命钩子函数,vue实例在created阶段会执行里面的代码。
this.$http相当于this.axios,$http的具体实现可以去node_modules里面看,很简单的
重启webpack服务,看下效果
ctrl+c
npm run dev
看到以上效果的话,证明数据请求成功了。
搭建首页应用
思维导图解析
我们要写的应用较为复杂,写vue的项目就是这样,需要清晰的思想,不然很容易崩溃,最后重来
好,接下来为大家讲解一下我们的组件:
Root是根组件,一切的源(废话)
App,应用组件,对应src/App.vue
Side-menu :侧边栏,因为较为容易且不需要改变单页路由来显示不同内容,所以直接放在app组件里边