vue項目開發中遇到的幾個問題

1、使用elment或者mintUI庫時，需要全局引入ui庫的css文件；然后在修改自己樣式時，需要將自己的css文件引入到main.js中才會生效，全局引用
2、使用v-html展示dom字符串時，相應的css文件中的樣式是不會生效的，需要使用組件展示dom

3、axios使用，是需要一個qs的node模塊，然后請求的數據格式是表單格式的，需要設置header的Content-Type格式

import Vue from 'vue'
import axios from 'axios'
import qs from 'qs'


Vue.prototype.$axios = axios    //全局注冊，使用方法為:this.$axios
Vue.prototype.qs = qs           //全局注冊，使用方法為:this.qs，序列化data數據

　　axios({

　　　　method: 'post',

　　　 url:prefix + url,

　　　　data: qs.stringify(data),

　　　　timeout: 30000,

　　　　headers: {

　　　　　　// 'X-Requested-With': 'XMLHttpRequest',

　　　　　　'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'

　　　　}

　　})

4、watch監聽object時，需要進行深度監聽，因為vue默認只監聽data中的屬性一級

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里聲明了firstName這個方法之后立即先去執行handler方法
    immediate: true
  }
}

5、寫props時可以寫成對象{ }，里面配置數據類型

6、axios請求是異步的，需要注意在其then之后操作，否則拿不到數據，此時可以保存axios返回的Promise對象，然后在Promise的then方法中做異步操作

7、使用事件總線傳值時，$emit 和$on方法是存在先后順序的，必須是$on事件監聽的綁定要在$emit事件發送之前建立，否則就是能監聽到事件，但是傳遞的值也會丟失，謹記

 8、vue-cli打包后，圖片資源的路徑報錯，出現雙層static/css/static/mig路徑，是打包的時候路徑配置的不對。可以通過添加配置項publicPath:"../../"解決該問題：需要修改build文件夾下的utils.js代碼，如圖所示：

publicPath配置后，打包之后的使用的引入的圖片就會在圖片文件引入的路徑前添加該路徑配置

  原因是，默認圖片加載引用的路徑是相對於：項目根目錄+static/css的，如圖對了兩級，所以要向上再返回兩級

配置正常如下

9、用vue-cli創建項目時，有個路徑文件夾是static，作用是里面放置html中直接引入的靜態資源，在打包項目時，會將其內部的資源直接復制到打包的路徑下面，這樣在打包過后的html中的路徑是一致的，就不用手動更改了

這一段就是復制資源的配置代碼

 10，vue中的計算屬性完整寫法

computed : {//計算屬性相當於data里的屬性
            //什么時候執行：初始化顯示/ 相關的data屬性發生變化
            fullName1(){//計算屬性中的get方法，方法的返回值就是屬性值，寫成函數形式默認就是get方法
                return this.firstName + ' ' + this.lastName
            },
 　　　　　　//寫成對象形式，有get方法和set方法，可以設置計算屬性
            fullName3 : {
                get(){//回調函數 當需要讀取當前屬性值是執行，根據相關數據計算並返回當前屬性的值
                    return this.firstName + ' ' + this.lastName
                },
                set(val){//監視當前屬性值的變化，當屬性值發生變化時執行，更新相關的屬性數據
                    //val就是fullName3的最新屬性值
                    console.log(val)
                    const names = val.split(' ');
                    console.log(names)
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
}

 11、使用vue自定義的組件時，不能有大寫字母，否則無效

　　並且父組件給子組件傳遞數據是也不能使用大寫字母，否則傳遞失敗