Vue2.x實戰餓了麼專案筆記(一)
阿新 • • 發佈:2018-11-10
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元件-