vue餓了麼--筆記
阿新 • • 發佈:2018-12-11
1.vue-router:點選導航按鈕顯示相應頁面
1.router/index.vue
import Vue from 'vue' import Router from 'vue-router' import header from '@/components/header/header' import ratings from '@/components/ratings/ratings' import seller from '@/components/seller/seller' import goods from '@/components/goods/goods' Vue.use(Router) export default new Router({ routes: [ { path: '/header', name: 'header', component: header }, { path: '/ratings', name: 'ratings', component: ratings }, { path: '/seller', name: 'seller', component: seller }, { path: '/goods', name: 'goods', component: goods } ] });
2.App.vue
<template> <div id="app"> <v-header></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 header from './components/header/header' export default{ components:{ 'v-header':header } } </script> <style type="text/css" lang="stylus" rel="stylesheet/stylus"> #app .tab display: flex width: 100% height: 40px line-height: 40px .tab-item flex: 1 text-align: center </style>
3.main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) router.push('/goods')//這裡不再使用router.go() 改用router.push()
2.mock後臺資料,axios獲取資料
1.webpack.dev.conf.js
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
//新增mock 資料
const express = require('express')
const app = express()
var appData = require('../data.json')//載入本地資料檔案
var seller=appData.seller
var goods=appData.goods
var ratings=appData.ratings
const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)
watchOptions: {
poll: config.dev.poll,
},
before(app) {
app.get('/api/seller', function (req, res) {
res.json({
errno: 0,
data: seller
});
});
app.get('/api/goods', function (req, res) {
res.json({
errno: 0,
data: goods
});
});
app.get('/api/ratings', function (req, res) {
res.json({
errno: 0,
data: ratings
});
});
}
},
plugins: [
new webpac
2.npm run dev之後,App.vue驗證資料正確性
<script>
import header from './components/header/header'
import axios from 'axios'
export default{
data(){
return {
seller: {}
};
},
components: {
'v-header':header
},
created:function(){
//常用商品
axios.get('http://localhost:8082/api/goods')
.then(response=>{
console.log(response);
})
.catch(error=>{
// console.log(error);
alert('網路錯誤,不能訪問');
})
}
}
</script>
3.seller.supports加入判斷 否則出錯。因為資料created()後才傳入
<div class="header">
<!-- 內容區 -->
<div class="content-wrapper">
<div class="avatar">
<img width="64" height="64" :src="seller.avatar">
</div>
<div class="content">
<div class="title">
<span class="brand"></span>
<span class="name">{{seller.name}}</span>
</div>
<div class="description">
{{seller.description}}/{{seller.deliveryTime}}分鐘送達
</div>
<div v-if='seller.supports'>
<div class="icon"></div>
<span class="text">{{seller.supports[0].description}}</span>
</div>
</div>
</div>
<!-- 公告區 -->
<div class="bulletin-wrapper"></div>
</div>