Vue-cli-webpack搭建斗鱼直播步骤详解(2)

红线区域我们引入了移动适配的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组件里边

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/1040.html