Vue實戰之【企業開發常見問題】

来源:https://www.cnblogs.com/qidaoxueyuan/archive/2020/02/21/12341822.html
-Advertisement-
Play Games

1.vue框架使用註意事項和經驗 1.1 解決Vue動態路由參數變化,頁面數據不更新 問題描述: 遇到動態路由如:/page/:id 從/page/1 切換到 /page/2 發現頁面組件沒有更新 解決方式1: 給增加一個不同:key值,這樣vue就會識別這是不同的了。 解決方案2: 在組件內使用v ...


1.vue框架使用註意事項和經驗

1.1 解決Vue動態路由參數變化,頁面數據不更新

問題描述:

遇到動態路由如:/page/:id
從/page/1 切換到 /page/2 發現頁面組件沒有更新

解決方式1:
給<router-view :key="key">增加一個不同:key值,這樣vue就會識別這是不同的了。

<router-view :key="key"></router-view>
  ...
  computed:{
        key(){
            return this.$route.path + Math.random();
        }
    }

解決方案2: 在組件內使用v2.2新增的beforeRouteUpdate

beforeRouteUpdate (to, from, next) {
    // 在當前路由改變,但是該組件被覆用時調用
    // 舉例來說,對於一個帶有動態參數的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉的時候,
    // 由於會渲染同樣的 Foo 組件,因此組件實例會被覆用。而這個鉤子就會在這個情況下被調用。
    // 可以訪問組件實例 `this`
  },

1.2 vue組件里定時器銷毀問題**

問題描述:

在a頁面寫一個定時器,每秒鐘列印一次,然後跳轉到b頁面,此時可以看到,定時器依然在執行。
推薦的解決方式:
通過$once這個事件偵聽器器在定義完定時器之後的位置來清除定時器。

const timer = setInterval(() => {
    // 定時器操作
}, 1000)
// 通過$once來監聽定時器,在beforeDestroy鉤子可以被清除。
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
})

也可以使用生命周期聲明的方式:

export default {
    beforeDestroy(){
        clearInterval(timer);
    }
}

1.3 vue實現按需載入組件的兩種方式**

1.使用resolve => require(['./ComponentA'], resolve),方法如下:

const ComponentA = resolve => require(['./ComponentA'], resolve)

2 使用 () => import(), 具體代碼如下:

const ComponentA = () => import('./ComponentA')

1.4 組件之間,父子組件之間的通信方案

組件之間的通信方案:

  • 通過事件匯流排(bus),即通過發佈訂閱的方式
  • vuex
  • 父子組件:
    • 父組件通過prop向自組件傳遞數據
  • 子組件綁定自定義事件,通過this.$emit(event,params) 來調用自定義事件
  • 使用vue提供的$parent/$children & $refs方法來通信
  • provide/inject
  • 深層次組件間的通信 $attrs, $listeners

1.5 vue中 $event 的用法--獲取當前父元素,子元素,兄弟元素

<button @click = “fun($event)”>點擊</button>
  ...
  
  methods: {
   fun(e) {
    // e.target 是你當前點擊的元素
    // e.currentTarget 是你綁定事件的元素
    #獲得點擊元素的前一個元素
    e.currentTarget.previousElementSibling.innerHTML
    #獲得點擊元素的第一個子元素
    e.currentTarget.firstElementChild
    # 獲得點擊元素的下一個元素
    e.currentTarget.nextElementSibling
    # 獲得點擊元素中id為string的元素
    e.currentTarget.getElementById("string")
    # 獲得點擊元素的string屬性
    e.currentTarget.getAttributeNode('string')
    # 獲得點擊元素的父級元素
    e.currentTarget.parentElement
    # 獲得點擊元素的前一個元素的第一個子元素的HTML值
  e.currentTarget.previousElementSibling.firstElementChild.innerHTML
  
    }
        }

1.6 axios二次封裝http請求

import axios from 'axios'
import router from '@/router'
import {removeSessionStorage} from './storage';
import Vue from 'vue'
import { Message } from 'element-ui' // 引用element-ui的載入和消息提示組件
// 請求超時時間配置
axios.defaults.timeout = 30000;
// api地址配置
axios.defaults.baseURL = "";
// console.log(process.env.VUE_APP_BASE_API)
Vue.prototype.$http = axios
// 在全局請求和響應攔截器中添加請求狀態
let loading = null

// 請求攔截器
axios.interceptors.request.use(
    config => {
      config.headers = {
        'Content-Type': 'application/json'
      };
      // loading = Loading.service({ text: '拼命載入中' })
      let token = sessionStorage.getItem('-_token_-');
      if (token) {
        config.headers['token'] = token;
      }
      return config
    },
    error => {
      return Promise.reject(error)
    }
)

// 響應攔截器
axios.interceptors.response.use(
    response => {
      if (loading) {
        loading.close()
      }
        // 自定義錯誤碼,各公司根據約定都不一樣
        // 此處省略業務處理代碼
        let errorCode = response.data.errCode;
        if(errorCode==='000000'){
          return Promise.resolve(response.data);
        }else {
            router.push({
              name: 'error',
              params: {
                isTimeout: false,
                path: router.currentRoute.path,
                desc: '您請求的資源找不到(錯誤碼:404) ',
              },
            });
        } 
    },
    error => {
      if (loading) {
        loading.close();
      }
        // 此處省略業務處理代碼
      return Promise.reject(error);
    }
);

1.7 開發環境中代理的切換配置

為了應對這樣的跨域場景,在代碼開發時,devServer要代理到本地後端,測試時,又要去修改代理到測試環境,上線後,調試新問題有可能代理到線上環境

該代碼運行環境為node.js,使用process.env可以獲取到系統環境變數,從而區分當前機器是公司的生產機器,還是個人的開發機器

對vue.config.js的進行配置

const Timestamp = new Date().getTime();  //當前時間為了防止打包緩存不刷新,所以給每個js文件都加一個時間戳
const proxyTargetMap = {
    prod: 'https://xxx.xxx.com/',
    dev: 'http://192.168.200.230:6379',
    test: 'http://test.xxx.com',
    local: 'http://localhost:8080/'
}
let proxyTarget = proxyTargetMap[process.env.API_TYPE] || proxyTargetMap.local
module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
    outputDir: 'dist',
    assetsDir: 'static',
    lintOnSave: false, // 是否開啟eslint保存檢測
    productionSourceMap: false, // 是否在構建生產包時生成sourcdeMap
    // 調整內部的 webpack 配置。
    // 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md
    chainWebpack: () => { },
    //configureWebpack 這部分打包文件添加時間戳,防止緩存不更新
    configureWebpack: {
        output: { // 輸出重構  打包編譯後的 文件名稱  【模塊名稱.版本號.時間戳】
            filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
        },
    },

    devServer : {
        proxy: {
            '/api' : {
                target: proxyTarget,
                changeOrigin: true,
                pathRewrite: {
                    '^/api' : ''
                }
            }
        }
    }
};

對應的package.json配置為

看下麵的cross-env API_TYPE=dev

cross-env是一個全局命令行工具,可以根據不同的平臺更改當前的環境變數,從而實現了可以在開發者的機器上,選擇性的調用開發模式或者生產模式

"scripts": {
  "serve": "vue-cli-service serve --mode development",
+  "serve:dev": "cross-env API_TYPE=dev vue-cli-service serve --mode development",
+  "serve:test": "cross-env API_TYPE=test vue-cli-service serve --mode development",
  "build": "vue-cli-service build --mode production",
  "test": "vue-cli-service build --mode test",
  },

圖片


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 網頁做三角形圖片,你還在拿ps調整嗎?out了,老鐵,來和我一起腦海暢想一個正方形是由4個等腰直角三角形構成,然後我想保留上邊的三角形,那下邊、左邊、右邊的三角形就沒了(設置背景色transparent或者與背景相近的顏色),最終結果就是一個保留上邊,方向朝下的三角形,需要註意一點的是設置的css樣... ...
  • Template本身也有自己的語言和語法,用來處理簡單的數據顯示 1. 常用語法 判斷指令 {% if 條件 %}...{%endif%} {% if 條件 %}...{%elif 條件 %}...{%endif%} {% if 條件 %}...{%elif 條件 %}...{%else%}...{ ...
  • 閉包 函數被調用之後,會創建一個執行環境及作用域鏈.函數被執行完之後就會被釋放掉. 閉包函數執行之後會保留當前活動變數在內部函數作用域鏈中,所以內部函數可以訪問外部變數. 示例一 列印出的結果是多少? 示例二 列印出的結果是什麼? 這隻是創建並執行了10個函數,每個函數都傳遞了個 變數給參數給 ,` ...
  • 邊框border通常簡寫為"border:1px solid red;"但其實一個完整的border邊框其實是由1.border-width/*邊框寬度*/,2.border-style/*邊框樣式*/,3.border-color/*邊框色彩*/三大屬性構成構成;邊框方位分為border-top,... ...
  • fancybox圖片燈箱功能 在頁面中引入幾個文件 在博客文件中需要載入圖片的地方插入下麵html代碼 效果: ...
  • 是誰在耳邊對我說!important提升權重優先順序,只為這一句,我用了3600s研究通配符與標簽!important的背景展示,也是讓我懷疑人生了!選擇器權值:標簽選擇器1,類選擇器和偽類選擇器:10,ID選擇器:100,通配符選擇器:0,行內樣式:1000,!important 在一定條件下,優先... ...
  • background如何簡寫?如何在背景圖像不變的情況下,依舊實現頁面文字滾動,為之奈何?別擔心,快用background-attachment: fixed;/*固定定位*/常用的background樣式如下,1.background-color2.background-image3.backgr... ...
  • 通過之前的站點導航案例,分離下拉菜單的共性和特性 dropdown.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dropdown</title> <link rel="stylesheet" h ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...