vue全家桶搭建前端頁面注意細節及遇到的難題

點擊訪問專案

一、使用vue腳手架創建專案

不懂點這里

下載原始碼

• 下載相關插件

二、插件注冊具體細節(以下操作是在 main.js)

• element-ui （ PC端組件庫 ）

// main.js檔案中
import 'element-ui/lib/theme-chalk/index.css'
// 按需加載
import { Message } from 'element-ui'
import { Button } from 'element-ui'
// 在 html 中直接<el-button></el-button> 只要注冊即可無需掛載
Vue.use(Button)

//掛載 在js環境下使用直接可這樣使用 this.$message.error("錯誤");
Vue.prototype.$message = Message

• 具體使用可以看這里

• axios （ ajax 的封裝 ）

import axios from 'axios'

// 在請求地址前加api (如請求localhost:8080/a 實際請求路由 localhsot:8080/api/a)
axios.defaults.baseURL = '/api';
// 設定超時時間
axios.defaults.timeout = 8000;

// axios 掛載 vue 原型上 后期直接使用 this.axios 直接使用即可
Vue.prototype.axios = axios

// 發請求時直接 this.axios.get("/a", {params});

• bootstap （ 回應式布局 ）

import 'bootstrap/dist/css/bootstrap.min.css'

• vue-cookie （ 操作 cookie ）

import VueCookie from 'vue-cookie'
// 注冊
Vue.use(VueCookie)
// 掛載
Vue.prototype.$cookie = VueCookie;

• vue-lazyload ( 圖片懶加載 )

import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad,{
  loading:'/imgs/loading-svg/loading-bars.svg'
})

// 使用時 <img v-lazy="ph.mainImage" alt="" />

• vue-router （ vue 路由）

// 路由引入時要在其他css樣式引入后,避免造成上線后，樣式未生效，
import router from './router'
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

// router.js
import Vue from 'vue'
import Router from 'vue-router'
const router = new Router({
    routes: [] // 配置路由 注意：是 routes 不是 router 
})
export default router

• vuex （ 狀態管理 ）

import store from './store/index'
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

• index 是 vuex 的入口檔案，具體配置

三、路由、頁面、及其組件配置

• 前期在搭建靜態頁面及組件時，并沒有發現太大的問題，這里就不細寫，懂的都懂，哈哈哈哈！
• 主要是路由這部分，一個權限的問題：沒有登錄前是不能進入到主頁面的，
• 查閱 vue 官方檔案 vue-router 核心插件庫中有 router.beforeEach() 方法（全域前置守衛）可以解決這個問題，
• 接下來就是判斷是否登錄的標志，標志是在后端開發的時候，用戶登錄成功，后端給 cookie 設定一個好密鑰，因此只要判斷 cookie 中的某一個值是否存在即可，

/*
  to(去哪里) from(從哪里來) 
  next(只是一個方法而已，說白了就是讓其通過或者跳轉到相對應路徑)
*/
router.beforeEach((to, from, next) => {
    if (to.path == "/login") {
        next()
    } else if (to.path == "/register") {
        next()
    } else {
        if (Cookie.get(constant.COOKIE)) {
            next()
        } else {
            next('/login')
        }
    }
})

• 在這里我遇到一個問題：在 main.js 中我將 vue-cookie 掛載到 vue 實體上了，所以我自然而然的使用 this.$cookie.get(constant.COOKIE); 但這樣寫是不對的，因為在 router 中 this 并不是指向 vue 的，因此只能將插件直接在 router.js 中直接引入，

import Cookie from 'vue-cookie'

• 還有一點：后端設定 cookie 時 httpOnly 不能設定為 true, 否則前端是無法獲取到的，

四、跳轉到同一頁面時，頁面資料不重繪

• 業務描述：用戶可以進入到其他用戶主頁面時，出現了資料不更新的情況，

// router.js
path: '/Otherprofile/:username',

• 查閱官方資料得到的結論是：vue跳轉到同一路徑時，路由引數改變，資料不更新，最主要的地方是：參考了相同的組件的時候，頁面就無法更新，
• 網上的解決方法有很多：
• 方案一：watch監聽路由引數變化（不包括傳遞的引數），并重新渲染（謹慎選擇）；
• 方案二：provide和inject結合使用(推薦使用)；
• 方案三：直接在 app.vue 中的 <router-view> 添加一個 key 值

<template>
  <div id="app">
  <!--
    通過系結一個fullPath, 直接識別頁面路徑的完整地址，
    當地址發生改變（包括引數改變）則重新渲染頁面，
  -->
    <router-view :key="$route.fullPath"></router-view>
  </div>
</template>

• 而我一開始選擇的方案是：結合方案一以及方案二的一部分原理：父組件通過監聽 route 的變化，一旦發生改變，這些方案二的相關操作，
• 由于前期代碼不斷修改后，沒有保存代碼，具體代碼無法展示，
• 但這種方法，到后期上線時，出現了 bug：進入到其他人主頁后，跳轉到個人首頁時，無法訪問到編譯后的 js 檔案（第十點會具體提到），
• 最終我選擇了方案三，

五、頁面重繪導致 vuex 資料丟失

• 業務描述：由于對于當前用戶的資訊在前端是比較重要的（很多請求都需要用戶資訊的憑證），
• 因此想到了用 vuex 狀態管理，
• 到了后期，又出現了一個問題，業務需要時不時重繪頁面，這就導致了 vuex 資料丟失，
• 查閱資料有一個解決方法：結合 sessionStorage 以及監聽器，
• 監聽重繪時，將 vuex 資料存入到 sessionStorage 中，

// 根據業務，我在 app.js中設定監聽器
 window.addEventListener("beforeunload", () => {
      const state = this.$store.state;
      window.sessionStorage.setItem("store", JSON.stringify(state));
    });
    
 init() {
    let store = window.sessionStorage.getItem("store")
    if (store) {
      this.$store.dispatch("saveUserInfo", JSON.parse(store).userInfo);
      // 避免造成污染
      sessionStorage.removeItem("store"); 
    } else {
      // 獲取用戶資訊
      this.axios.get("/user/isLogin").then((res) => {
      if (res) {
        this.$store.dispatch("saveUserInfo", res);
      }
    });
   }
 }

• 但專案完成后，細想其實這個功能使用 vuex 是不對的，vuex 只要用在一個變數值可以控制多個頁面的行為，或者多個變數控制一個頁面，
• 比如：專案中有一個功能點（進入到其他人主頁是判斷當前用戶是否關注了此人）使用了vuex 我認為就適合，
• 所以，最開始用戶資訊就應該使用 sessionStorage 即可，

六、多個請求發送出現相互依賴

• 業務描述：用戶進入到主頁面時，需要發送多條請求，但后倆條請求的引數時基于第一條請求來的資料（第一潭訓取用戶資訊，二三條通過用戶資訊獲取關注人以及粉絲資訊），
• 解決方法：（1）直接鏈式呼叫、（2）根據用戶需求在發送二三條請求（用戶要查看粉絲或者關注人時，觸發點擊事件在發送請求，）

七、@功能

• 業務描述：發布微博時可以@自己所關注的用戶，
• 可以原生開發，但為了開發速度，我使用用了一個插件 vue-at，完全符合業務要求，

<at-ta :members="members" name-key="fullName">
     <template v-slot:item="s">
       <img :src="s.item.picture" />
       <span>{{ s.item.nickName }} - {{ s.item.userName }}</span>
     </template>
     <el-input
       id="textarea"
       type="textarea"
       class="element-editor resizeNone"
       v-model="fullcontent"
       rows="7"
      ></el-input>
</at-ta>

import AtTa from "vue-at/dist/vue-at-textarea";
export default {
  name: "inputitem",
  data() {
    return {
      members: [],
      fullcontent: "",
    };
  },
}

八、資料渲染，無法渲染監聽事件

• 業務描述：發布微博可以@用戶，向后端發送請求獲取的是純文本，因此前端需要用正則運算式來匹配，進而將其嵌套到a標簽中，用戶點擊時可以跳轉到相應個人主頁，
• 正則運算式匹配成功，并且添加了點擊事件，但使用 {{content}} 是無法渲染的，

• 后來想到一種方法直接在 a 添加 href 屬性，可以跳轉，但在個人主頁我是通過檢測 router 路由的變化，來更新頁面的，而使用 href 是無法同步到 router 的路由的，因此這個方法被否決了，

查閱 vue 官方檔案，看到可以使用渲染函式 render

render(createElement) {
   // contentList 是你要渲染的內容陣列（已經通過正則運算式匹配過的）
    return createElement(contentList)
  },

• 但在我的專案中，很難去使用，要考慮到很多問題，比如說我如何將物件陣列中的某一個欄位（內容）放到同一個陣列中，渲染完畢后，又如何分發到對應物件陣列中，這部分應該是可以實作的，（本人基礎也不是很牢固，需要去查資料才可以實作）

九、使用 history 模式上線，導致某些資源訪問不到

• 專案如果不是部署在根路徑下的就必須使用 history 模式，比如localhost:8080/login（根路徑下） localhost:8080/weibo/login （子路徑下）
• 不使用 history 模式時，會在訪問路徑下添加 #
• 而我主要出現的問題是在，首先對于前后端代碼上線我是零基礎的，一直處在摸索中，

• 第一個處錯的地方：router.js 中的 base 值應該是你 nginx 中的訪問路徑值，我寫成了專案在服務器的地址，（我專案地址和訪問地址是不一樣的）
  
• 第一個地方改好后，運行專案是可以訪問的，但又報了一個錯誤
  
• 查資料，可能是使用了 history 模式下，導致某些資源訪問不到，這個地方花費了最長時間，
• 其實只要修改 vue.config.js 即可， 內部就是修改 webpack 的打包配置，但我從來沒有接觸過 webpack ，也造成很大困難，
• 專案只要修改 publicPath: ‘./’，即可，按我的理解是訪問靜態資源是在上一層目錄，不使用 history 就正常訪問，如今你加了子路徑，因此再訪問靜態資源時需要跳轉到上一層，
• 還有一點訪問一些靜態資源盡量放在 public 檔案夾中，而不是放在 assets 檔案中，防止打包時造成不必要的錯誤，
• 在 app.Vue 全域引入時
  

十、解決第四點埋下的坑

• 前面幾點解決后，上線部署，此時出現報了這個錯誤

• 不是一運行就報錯的，而是進入到其他人主頁后，跳轉到其他頁面就報這個錯誤，
• 意思是沒有訪問到編譯后的 js 檔案，

• 后來看了請求的地址和其他頁面請求的地址，看到了多了一個 /Otherprofile 路徑，
• 報著試一試的態度訪問了 /weibo/js/chunk-07853974.d3c97a8d.js

• 很明顯是路徑訪問錯了，然后接下來：我就去看了路由的配置，

• 很明顯：其他人主頁是要進入到倆層路徑的，而主頁要進入一層路徑，但這還不是最關鍵的，最關鍵的是 vue.config.js 中靜態訪問路徑是訪問上一級目錄，

• 因此導致說：在一層路徑下的上一級目錄（/weibo）可以被 nginx 識別到，進而訪問到 js 檔案，而二層目錄的上一級目錄是 Otherprofile,不是 weibo，得是上上層目錄，
• 因此解決方法是，進入到其他人主頁不能使用倆級路徑，
• 此時修改 router.js 兩種方式：

path: '/Otherprofile',
path: '/:username',

• 我選擇前者，然后再跳轉路由時添加 username 即可：

 this.$router.push({
          path: "/Otherprofile",
          query: {
            otherName,
          },
        });
 
 // 獲取引數
 this.$route.query.otherName

• 此時，第四點使用的監聽路由變化就不能生效了，因為這里訪問的路徑都一樣，只是傳遞的引數不一樣，因此只能選擇方案三，
• 如果選擇后者，按理論也可以使用之前的方案，但在我的專案中，出現問題，有時會跳轉到其他頁面，
• 啟動專案：
  
• 在本地是不會出現這個問題的，重新打包也會出現這個問題，但是，不知道被我怎么弄的，現在就沒有出現這個問題，
• 查資料說是需要配置webpack，webpack 我也不熟，而且在 vue.config.js 中的配置方法跟 webpack 還有點不一樣，
• 最終這個 bug 就不了了之，

十一、部分效果圖

• 主頁
  
• 廣場頁
  
• 設定頁
  
• 個人主頁
  

十二、總結

• 不足的地方：
  原先設計是發布微博是可以添加圖片，后期完善是想可以上傳視頻的，設想是利用阿里OSS（Object Storage Service）物件存盤服務，原理及使用都會了點這里，但使用圖片鏈接直接在瀏覽器訪問時，是不能訪問的，只會下載到本地電腦，而要實作這個功能，需要系結域名，且域名需要備案，備案目前一直還過不了，
• 體會：
  在寫前端代碼時遇到很多問題，一度真的想放棄，但過了幾天還是埋頭苦干，遇到問題就查資料，有時是自己粗心大意寫錯代碼，有時是真的有坑，開發前期不知道，沒有去避開這些坑，總體上開發程序中磕磕碰碰，特別是上線打包部署這部分，本身就對這部分一點基礎都沒有，就是摸著石頭過河，一步步試，