Vue 實戰餓了麼（一）

時間 2019-11-13

標籤 vue 實戰餓了简体版

原文原文鏈接

1、$mount()手動掛載

當Vue實例沒有el屬性時，則該實例尚沒有掛載到某個dom中；假如須要延遲掛載，能夠在以後手動調用vm.$mount()方法來掛載。

new Vue({
   router,
   render: h => h(App)
 }).$mount("#app");
`
`new Vue({
  el: '#app',
  router,
  render: h => h(App) 
});

解釋： render: x => x(App)

這裏的render: x =>x(App)是es6的寫法
     轉換過來就是：暫且可理解爲是渲染App組件
     render:(function(x){
          return x(App);
      });

2、mock數據

若是後端接口還沒有開發完成，前端開發通常使用mock數據。

注意：新版的vue-cli 自動搭建的build 文件裏沒有dev-server.js 和 dev-client.js ，所以咱們要在webpack.dev.conf.js 裏配置

配置以下：

（1）複製data.json 到該項目下

（2）找到bulid目錄下 webpack.dev.conf.js 找到 const portfinder = require('portfinder')，在其下添加mock 數據

// 添加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;
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

（3）接着找到 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
        })
      })
    }

（4）設置保存後 npm run dev 運行訪問http://localhost:8080/api/seller 就可接收到該路由對應的json 數據

3、關於路由 vue-router

* 直接定義路由

（1）首先定義路由

//  定義路由組件
	const goods = { template: '<p>我是對應的goods下面的內容</p>' };
	const seller = { template: '<p>我是對應的seller下面的內容</p>' };

（2）建立路由實例

// 建立路由實例
	var router = new VueRouter({
          routes:[
            //  路由重定向即設置默認路由  
            {path:'/',redirect:'/goods',component:goods}, 
            {path:'/goods',component:goods},
            {path:'/seller',component:seller}
          ]
      });

路由實例方法:

router.push({path:'goods'});  //直接添加一個路由,表現切換路由，本質往歷史記錄裏面添加一個
router.replace({path:'goods'}) //替換路由，不會往歷史記錄裏面添加
// router.go('goods')

（3）建立vue 實例

//  建立 vue 實例
	const app=new Vue({
		el:"#app",  //  掛載元素
		router
	})

（4）DOM 渲染

<body>
 <div id="app">
  <div class="nav">
   <router-link to='/goods'>good</router-link>
   <router-link to='/seller'>seller</router-link>
  </div>
  <div class="content">
   <router-view></router-view>
  </div>
 </div>
</body>

注意：

查看效果時，發現動態的給當前路由 添加le一個router-link-active的類名,因此若是須要設置當前路由樣式（好比：高亮）就能夠直接在style裏設置了

* （main.js）引入路由組件

（1）引入路由文件

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

（2）建立路由實例定義路由組件

const router = new VueRouter({
  routes: [{
    path: '/',
    component: goods
  },{
    path: '/goods',
    component: goods
  }, {
    path: '/ratings',
    component: ratings
  }, {
    path: '/seller',
    component: seller
  }]，
  linkActiveClass: 'active' //  將 router-link-active  改成 active（方便樣式操做）
})

（3）建立vue實例並掛載

new Vue({
  el:"#app",
  router,
  template: '<App/>',
  components: {
    App
  }
})

4、axios 請求數據

（1）安裝 axios

npm install axios

（2）引入axios組件

import axios from 'axios'

（3）axios 請求數據（在此以前建立一個接受數據的對sellerobj）

export default {
 //  獲取數據 準備  返回一個對象，後臺獲取數據後 賦予 該對象
   data (){
   	 return {
   	 	 sellerobj:{}
   	 }
   },
   created (){ //  建立以前 請求數據
   	 axios.get('static/data.json').then((result) => {
   	  	 console.log(result) //  控制檯檢查  數據存儲在  result.data 裏  
   	  	this.sellerobj = result.data.seller //  將數據存到sellerobj裏  	 	
   	  })
   }
}