Vue-element-admin 基礎知識

1.安裝

　　　　建議不要用 cnpm 安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載速度慢的問題

　　　　npm install --registry=https://registry.npm.taobao.org

　　　　可以通過重新指定 registry 來解決 npm 安裝速度慢的問題。若還是不行，可使用 yarn 替代 npm。

　　　　安裝淘寶鏡像：

　　　　　　　　npm install -g cnpm --registry=https://registry.npm.taobao.org

2.router-view（相同組件切換）每一級一個router-view

　　　　創建和編輯的頁面使用的是同一個 component，默認情況下這兩個頁面切換時並不會觸發 vue 的 created 或者 mounted 鈎子，你可以通過 watch $route 的變化來進行處理，但還是蠻麻煩的。

　　　　其實可以簡單的在 router-view 上加上一個唯一的 key，來保證路由切換時都會重新渲染觸發鈎子了。

3.$route.matched

1. 1. 一個數組，包含當前路由的所有嵌套路徑片段的路由記錄，當前頁面所欲路由組成的數組
   2.  一個路由匹配到的所有路由記錄會暴露為 $route 對象 (還有在導航守衛中的路由對象) 的 $route.matched 數組

4.跨域問題：

　　　　每一次請求，瀏覽器必須先以 OPTIONS 請求方式發送一個預請求（也不是所有請求都會發送 options），通過預檢請求從而獲知服務器端對跨源請求支持的 HTTP 方法。

　　　　在確認服務器允許該跨源請求的情況下，再以實際的 HTTP 請求方法發送那個真正的請求。

　　　　推薦的原因：只要第一次配好了，之后不管有多少接口和項目復用就可以了，一勞永逸的解決了跨域問題，而且不管是開發環境還是正式環境都能方便的使用

5.eslint

　　　　1.取消 ESLint 校驗　　

　　　　　　如果你不想使用 ESLint 校驗（不推薦取消），只要找到vue.config.js文件。 進行如下設置 lintOnSave: false 即可。

　　　　2.vscode 配置 ESLint

　　　　　　首先安裝 eslint 插件

　　　　　　安裝並配置完成 ESLint 后，我們繼續回到 VSCode 進行擴展設置，依次點擊 文件 > 首選項 > 設置 打開 VSCode 配置文件,添加如下配置

{
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true
}

　　　　　　這樣每次保存的時候就可以根據根目錄下.eslintrc.js 你配置的 eslint 規則來檢查和做一些簡單的 fix。

　　　　自動修復

　　　　　　npm run lint -- --fix

　　　　　　運行如上命令，eslint 會自動修復一些簡單的錯誤。

6.路由懶加載

　　　　const Foo = () => import('./Foo.vue')

　　　　當打包構建應用時，Javascript 包會變得非常大，影響頁面加載速度。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了

7.圖標

　　　　ECharts 支持 webpack 引入，圖省事可以將 ECharts 整個引入 var echarts = require('echarts') 不過 ECharts 還是不小的，如果只使用它小部分功能或者圖表類型的話建議按需引入。

// 按需引入 引入 ECharts 主模塊
var echarts = require('echarts/lib/echarts')
// 引入柱狀圖
require('echarts/lib/chart/bar')
// 引入提示框和標題組件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

//全部引入
var echarts = require('echarts')

　　　　在 vue 中聲明初始化 ECharts 

　　　　因為 ECharts 初始化必須綁定 dom，所以我們只能在 vue 的 mounted 生命周期里進行初始化。

mounted() {
  this.initCharts();
},
methods: {
  initCharts() {
    this.chart = echarts.init(this.$el);
    this.setOptions();
  },
  setOptions() {
    this.chart.setOption({
      title: {
        text: 'ECharts 入門示例'
      },
      tooltip: {},
      xAxis: {
        data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
      },
      yAxis: {},
      series: [{
        name: '銷量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    })
  }
}

　　　　動態改變 ECharts 的配置     通過 watch 來觸發 setOptions 方法

//第一種 watch options變化 利用vue的深度 watcher，options 一有變化就重新setOption
watch: {
  options: {
    handler(options) {
      this.chart.setOption(this.options)
    },
    deep: true
  },
}
//第二種 只watch 數據的變化 只有數據變化時觸發ECharts
watch: {
  seriesData(val) {
    this.setOptions({series:val})
  }
}

v-charts官網： https://v-charts.js.org/#/