慕課網vue教程「餓了麼」 ,在vue2.5vue-cli3 怎麼寫

慕課網vue教程「餓了麼」 數據請求,在vue-cli3 怎麼寫

哇我真的糾結了很久查了好多資料,話很少說上代碼,
主要牽扯到webpack的 devServe配置
主要是原來是在webpack.dev.conf.js的devServer
如今是在根目錄下修改vue.config.js的devServerhtml

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對縮進的要求嗎?vue

圖片描述
圖片描述

一點疑問,這個是否是能夠用axios作阿
不是很懂區別webpack

相關資料網址:ios

vue-cli3.0官方文檔
我在vue官方論壇的提問
webpack-devServer官方文檔
vue2.x寫法1
vue2.x寫法2
vue2.x寫法3git

文檔結構

我本身新建了一些文件夾
參見我寫的這篇github

router-link代替a標籤

https://router.vuejs.org/zh-c...
開始頁的最下面有這樣一句話:web

當 <router-link> 對應的路由匹配成功,將自動設置 class 屬性值 .router-link-active,

因此你只須要在本身的STYLE文件中,寫了.router-link-active的樣式,列表選中後,系統就會自動去綁定這個樣式vue-cli

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

active-class
類型: string
默認值: "router-link-active"
設置 連接激活時使用的 CSS 類名。默認值能夠經過路由的構造選項 linkActiveClass 來全局配置。

其實這個也是爲了方便導航欄切換狀態的,設置這個屬性就能夠讓連接在激活時自動切換相應的樣式。 json

本例中,在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總是報我文章不經過審覈煩死了都不想寫了

相關文章
相關標籤/搜索