脚本宝典收集整理的这篇文章主要介绍了慕课网vue教程“饿了么” ，在vue2.5vue-cli3 怎么写，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

慕课网vue教程“饿了么” 数据请求，在vue-cli3 怎么写

哇我真的纠结了好久查了好多资料，话不多说上代码，
主要牵扯到webpack的 devServe配置
主要是原来是在webpack.dev.conf.js的devServer
现在是在根目录下修改vue.config.js的devServer

module.exports = {
  devServer: {
    before (app) {
      VAR appData = require('./data.json')
      var seller = appData.seller
      var goods = appData.goods
      var ratings = appData.ratings
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })
      })
      // app is the exPRess instance that the dev server uses
      app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })
      })
      app.get('/api/ratings', (req, res) => {
        res.json({
          errno: 0,
          data: ratings
        })
      })
    }
  }
}

谁知道怎么改一下这个eslint对缩进的要求吗?

一点疑问，这个是不是可以用axios做阿
不是很懂区别

相关资料网址：

vue-cli3.0官方文档
我在vue官方论坛的提问
webpack-devServer官方文档
vue2.x写法1
vue2.x写法2
vue2.x写法3

文档结构

我自己新建了一些文件夹
参见我写的这篇

router-link代替a标签

https://router.vuejs.org/zh-c...
开始页的最下面有这样一句话：

当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active，

所以你只需要在自己的STYLE文件中，写了.router-link-active的样式，列表选中后，系统就会自动去绑定这个样式

@L_304_9@

active-class
类型: string
默认值: "router-link-active"
设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

其实这个也是为了方便导航栏切换状态的，设置这个属性就可以让链接在激活时自动切换相应的样式。

本例中，在app.vue中

<template>
  <div>
    <v-header/>
    <div class="tab">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link> 
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评论</router-link> 
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link> 
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import vHeader from "@/components/header/vHeader.vue";

export default {
  components: {
    vHeader
  }
};
</script>

<style lang="stylus">
.tab
  display: flex
  width: 100%
  height: 40px
  line-height: 40px

  .tab-item 
    flex: 1
    text-align: center
    & > a
      display:block
      font-size: 14px
      color: rgb(77, 85, 93)
      &.active
        color: rgb(240, 20, 20)

</style>

其中需在router.js中加入类似:

let router =new Router({
  linkActiveClass: 'active'
});

麻烦看过觉得Ok的给个赞或者收藏，sf老是报我文章不通过审核烦死了都不想写了

脚本宝典总结

以上是脚本宝典为你收集整理的慕课网vue教程“饿了么” ，在vue2.5vue-cli3 怎么写全部内容，希望文章能够帮你解决慕课网vue教程“饿了么” ，在vue2.5vue-cli3 怎么写所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。