vue-cli3.0+vue-router+vuex+vant搭建簡易項目問題記錄

要實現的功能

問題一：布局

想動態獲取列表容器的高度，實現局部滑動。

想法一：flex布局

結果：失敗

因為每個組件樣式為了不污染全局，加了scope，大的框架布局到了組件內獲取不到，研究了好久只好放棄

想法二：js動態獲取

所以最終用的js動態計算

<template>
    <div :style="style"></div>
</template>
<script>
    data(){
        return{
           style:`${height}px`//height為動態計算出來的值
        } 
    }  
</script>    

問題二：默認路由

我這里用了兩種方式

//方式一：'/'
{
    path: '/',//默認為home頁
    name: 'home',
    component: Home
}
//方式二：redirect:'',路由重定向
{
    path: '/',
    name: 'home',
    component: Home
    children:[
        {
              path:'/resultList/:type',
              name:'resultList',
              component:ResultList
         }
    ],
    redirect:'resultList/hot'//默認參數為hot
}

問題三：底部導航顯示問題

首頁跟我的頁底部導航顯示，關於我們底部導航隱藏

實現步驟：

一：使用vuex定義全局狀態，不會vuex?

五分鍾搞懂Vuex

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    showTabBar:true//定義一個開關
}

export default new Vuex.Store(option:{
   state 
})

二：在組件上使用v-show判斷是否顯示

Home.vue

<footer v-show="$store.state.showTabBar">
      <Footer/>
</footer>             

三：使用生命周期鈎子函數

在el沒有被掛載到實例上之前的函數都可以，即，beforeCreate()、created()、beforeMount

操作全局狀態　　

 

export default {
  name:'about',
  created(){
     this.$store.state.showTabBar = false;  
  }  
}

 

問題四：axios跨域配置獲取本地json

聲明：vue-cli3.0的靜態文件放在public里

在新目錄新建vue.config.js

/**
 * 配置服務
 */
module.exports = {
    devServer:{
        host:'10.12.10.88',
          proxy:{
          　　'/api':{
                  target:'http://10.12.10.88:8080/',
                  ws:true,
                  changeOrigin: true,
                  pathRewrite:{
                      '^/api':''
                  }
              }
         }
    }
}            

main.js

import Vue from 'vue'
import axios from 'axios'
//因為axios不是vue的內置方法，所以不能用Vue.use()
Vue.prototype.$axios = axios;
//設置axios的默認配置
axios.defaults.baseURL = '/';
axios.defaults.headers.post['Content-Type'] = ['application/json']

使用

this.$axios.get('/resultData.json')//靜態文件路徑
   .then((data)=>{
       console.log(data); 
   })
                   

問題五：同一組件根據參數不同，渲染不同的數據

一、起初想到的是計算屬性：computed，功能倒是實現了，切換組件，根據參數渲染不同數據

然后發現后台在一直請求接口，為啥呢，因為computed發現data里的屬性發生變化，就會再次執行這個函數，所以放棄了。

二、要實現的效果就是點擊一個組件，請求一次接口，變的是type參數，所以想到了監聽路由或者路由導航守衛，詳情

//監聽路由
watch:{
   '$route'(to,from){
        this.type = to.params.type;
        this.$axios.get('/resultData.json')
          .then((data)=>{
              this.resultData = data.data[this.type]
          })
   }
}
//導航守衛也可以實現
//beforeRouteUpdate在當前路由改變，但是該組件被復用時調用
beforeRouteUpdate(to,from,next){
    this.type = to.params.type;
    this.$axios.get('/resultData.json')
      .then((data)=>{
           this.resultData = data.data[this.type]
      })
}

問題六：build打包時，index.html放瀏覽器上顯示空白

npm run build之后想要看看dist里的index.html能不能運行，發現不行，因為滅有服務器

然后你會發現你build完之后，他會提示你一個網站 ==》vue-cli 部署

然后提示我們需要全局安裝一個serve，然后運行

npm install -g serve
# -s flag means serve it in Single-Page Application mode
# which deals with the routing problem below
serve -s dist

然后根據提示打開，發現可以了