Vue2.x實戰餓了麼專案筆記（一）

TDYWZ_發表於2018-11-08
Vue筆記

mack資料

如果後端介面尚未開發完成，前端開發一般使用mock資料。 注意：新版的vue-cli 自動搭建的build 檔案裡沒有dev-server.js 和 dev-client.js ，因此我們要在webpack.dev.conf.js 裡配置

複製data.json 到src/static/該專案下

找到bulid目錄下 webpack.dev.conf.js 找到 const portfinder = require('portfinder')，在其下新增mock 資料

// 新增mock 資料
const express = require('express')
const app = express()
var appData = require('../static/data.json')//載入本地資料檔案
var seller=appData.seller;
var goods=appData.goods;
var ratings=appData.ratings;
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
複製程式碼

接著找到 devServer 裡的 watchOptions，其後緊跟

watchOptions: {
      poll: config.dev.poll,
    },
    before(app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })//介面返回json資料，上面配置的資料appData就賦值給data請求後呼叫
      }),
      app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })
      }),
      app.get('/api/ratings', (req, res) => {
        res.json({
          errno: 0,
          data: ratings
        })
      })
    }
複製程式碼

npm run dev 執行 訪問http://localhost:8080/api/seller 就可接收到 該路由對應的json 資料

關於路由 vue-router

Vue1.0和Vue2.x的區別還是蠻大的 Vue2.x做的改變更方便我們實現路由的載入 我是直接在components裡建立三個元件，然後在router/index.js里載入元件

import goods from 'components/goods/goods'
import seller from 'components/seller/seller'
import ratings from 'components/ratings/ratings'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            redirect:'/goods' //預設其實頁面
        },
        {
            path:'/goods',
            component:goods
        },
        {
            path:'/seller',
            component:seller
        },
        {
            path:'/ratings',
            component:ratings
        }
    ]
})
複製程式碼

然後定義一個tab元件 在App.vue裡之間匯入元件 在tab元件裡引入之前建立三個元件

<div class="tab border-1px">
        <router-link tag="a" to="/goods" class="tab-item">商品</router-link>
        <router-link tag="a" to="/ratings" class="tab-item">評價</router-link>
        <router-link tag="a" to="/seller" class="tab-item">商家</router-link>
</div>
複製程式碼

axios 請求資料

安裝 axios

npm install axios 引入axios元件 import axios from 'axios'

axios 請求資料（在此之前建立一個接受資料的對sellerobj）

export default {
 //  獲取資料 準備  返回一個物件，後臺獲取資料後 賦予 該物件
   data (){
   	 return {
   	 	 seller:{}
   	 }
   },
   created (){ //  建立之前 請求資料
   	 axios.get('static/data.json').then((result) => {
   	  	 console.log(result) //  控制檯檢查  資料儲存在  result.data 裡  
   	  	this.sellerobj = result.data.seller //  將資料存到sellerobj裡  	 	
   	  })
   }
}
複製程式碼

專案的初始化工作就差不多完成了!!! 後面就開始開發header元件^-^

相關文章