2

慕课网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的样式,列表选中后,系统就会自动去绑定这个样式

https://router.vuejs.org/zh-c...

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老是报我文章不通过审核烦死了都不想写了


yint
388 声望21 粉丝

转AIing