vue-vueadmin記錄

酷到被通緝_發表於2019-09-23

Vue

title: vue-vueadmin記錄
categories: Vue
tags: [vue, vueadmin, js, 記錄]
date: 2019-09-06 17:37:10
comments: false

vue-vueadmin記錄

TODO

webpack 打包
全域性變數或函式
- https://blog.csdn.net/qq_30669833/article/details/81706217

vscode 外掛

Vuetur
vue
ESLint

chrome 外掛

https://github.com/vuejs/vue-devtools

安裝完後外掛欄有個 vue icon 出現, 按 f12 調出除錯工具, 頂欄有個 vue 的選項.

取消 eslint 校驗

官方文件 - https://eslint.org/docs/rules/

去掉縮排校驗

參考: https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/eslint.html#%E9%85%8D%E7%BD%AE%E9%A1%B9

.eslintrc.js 檔案中的 'indent': [2, 2, { 修改為 'indent': [0, 0, {

就可以 4 個空格為縮排

去掉單引號雙引號校驗

參考: https://eslint.org/docs/rules/quotes

.eslintrc.js 檔案中的 'quotes': [2, 'single', 修改為 'quotes': [0, 'single',

去掉程式碼結尾分號校驗

參考:

.eslintrc.js 檔案中的 'semi': [2, 'never'], 修改為 'semi': [0, 'never'],

去掉 no use 校驗

.eslintrc.js 檔案中的檔案中的 'no-unused-vars': [2, { 修改為 'no-unused-vars': [0, {

去掉空行校驗

.eslintrc.js 檔案中的檔案中的 'no-multiple-empty-lines': [2, { 'max': 1 修改為 'no-multiple-empty-lines': [2, { 'max': 9999

去掉物件構建最後一個逗號校驗

.eslintrc.js 檔案中的檔案中的 'comma-dangle': [2, 修改為 'comma-dangle': [0,

生命週期

詳解 Vue 生命週期實現 - https://juejin.im/post/5c6d48e36fb9a049eb3c84ff

查詢呼叫棧

在 chrome 中按 F12 鍵, 在 sources 下 ctrl + shift + F, 查詢日誌, 然後設定斷點.

環境變數配置

參考: https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F

配置檔案為 .env.xxx
環境變數必須以VUE_APP_為開頭。如:VUE_APP_API、VUE_APP_TITLE
```
console.log(process.env.VUE_APP_xxxx)
```
修改配置檔案後必須重新 npm run dev 才生效

跨域配置

使用vue-element-admin框架呼叫後端介面及跨域問題 - https://blog.csdn.net/ywdhzxf/article/details/90518807

在 vue.config.js 檔案中

    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      // [process.env.VUE_APP_BASE_API]: {
      //   target: `http://127.0.0.1:${port}/mock`,
      //   changeOrigin: true,
      //   pathRewrite: {
      //     ['^' + process.env.VUE_APP_BASE_API]: ''
      //   }
      // },
      '/hello': {
        target: `http://127.0.0.1:8001`,
        changeOrigin: true
      }
    },

import 別名設定

  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': resolve('src') // 這也是為什麼 很多地方 import 有個 @
      }
    }
  },

狀態儲存 Vuex

參考: https://vuex.vuejs.org/zh/guide/state.html

訪問資料

通過在根例項中註冊 store 選項，該 store 例項會注入到根元件下的所有子元件中，且子元件能通過 this.$store 訪問到

Element UI

官方資料
- https://element.eleme.io/#/zh-CN/component/layout

頁面資料使用

vuex 中關於 mapGetters 的作用 - https://www.cnblogs.com/crazycode2/p/7636082.html

ui 使用多語言

參考: https://codeday.me/bug/20190430/1010561.html

在 main.js 中引入多語言

import locale from 'element-ui/lib/locale/lang/en'

Vue.use(Element, {
  locale,
  size: Cookies.get('size') || 'medium' // set element-ui default size
})

自定義元件

踩坑

報錯: The “MyComponent” component has been registered but not used

沒有使用元件命名不正確

import MyComponent from './components/MyComponent'

// 使用時的命名必須是 my-component, 不能用駝峰命名, 必須全小寫, 用 - 分割. 繫結值也一樣
<my-component :arg1="123" :is-show="isShow" :arg3="'hello'" @on-my-notify="onMyNotify666" />

報錯: Syntax Error: SyntaxError: Assigning to rvalue

參考: https://blog.csdn.net/u014182411/article/details/80071198

html的模板中引用的值如: v-module 繫結的屬性並沒有在 data 屬性中定義

報錯: Attribute ‘fileNameTitle’ must be hyphenated

參考: https://blog.csdn.net/qq_35366269/article/details/90644180
原因

出現該錯誤的原因是元件的屬性fileNameTitle使用了駝峰命名法，導致ESLint 檢測出語法錯誤
解決辦法:

將fileNameTitle改為file-name-title即可
<my-component :arg1="123" :isShow="isShow" :arg3="'hello'" @onMyNotify="onMyNotify666" />

<my-component :arg1="123" :is-show="isShow" :arg3="'hello'" @on-my-notify="onMyNotify666" />

元件

命名方式

傳參 props

  props: {
    dialogStatus: { // 變數
      required: true,
      type: Boolean,
      default: false
    },
    dataArr: { // 陣列
      required: true,
      type: Array,
      default: () => []
    },
    userData: { 物件
      required: true,
      type: Object,
      default: () => {}
    },
  },

監聽 watch

  watch: {
    dialogStatus(newVal, oldVal) {
      this.isDialogShow = newVal
    },
    userData: {
      immediate: true, // 解決第一次顯示頁面不生效問題
      handler(newVal, oldVal) {
        this.singleData = deepClone(newVal)
      }
    }
  },

參考報錯: [元件賦值 object 第一次不生效問題](#元件賦值 object 第一次不生效問題)

靜態載入

動態載入

Vue動態元件和非同步元件 - https://segmentfault.com/a/1190000018018502
官網: 動態元件 & 非同步元件 - https://cn.vuejs.org/v2/guide/components-dynamic-async.html

非同步載入

Vue中的非同步元件 - https://juejin.im/post/5c3c7435e51d4551cd71cf5c
官網: 動態元件 & 非同步元件 - https://cn.vuejs.org/v2/guide/components-dynamic-async.html

父元件控制子元件顯示隱藏

https://segmentfault.com/q/1010000014179934

不能同步一個值

tree

https://element.eleme.io/#/zh-CN/component/tree

自定義唯一 key

node-key，其值為節點資料中的一個欄位名，該欄位在整棵樹中是唯一的。

半選狀態

this.checkStrictly = false 程式碼動態設定時, 選中子節點時, 父節點才有半選狀態

mock 伺服器

https://www.jianshu.com/p/7cbf83eff644

使用 json 當做臨時資料庫

使用 const fs = require('fs') io 本地檔案即可

hot reload 忽略部分檔案監聽

修改 mock-server.js 增加忽略檔案

  // watch files, hot reload mock server
  chokidar.watch(mockDir, {
    ignored: /mock-server/,
    ignoreInitial: true
  }).on('all', (event, path) => {
      
  //修改為
  // watch files, hot reload mock server
  chokidar.watch(mockDir, {
    ignored: [/mock-server/, /fakedb/], // 這樣 fakedb 目錄下的檔案就不會被監聽
    ignoreInitial: true
  }).on('all', (event, path) => {

忽略寫法參考: https://github.com/micromatch/anymatch

重啟 mock. done

踩坑

在 mock 目錄下, 檔案變化會導致 hotload 重啟伺服器

通常在使用 [使用 json 當做臨時資料庫](#使用 json 當做臨時資料庫) 是 io 檔案後, 回導致重啟伺服器, 導致伺服器 token 被重置, 解決辦法: hot reload 忽略部分檔案監聽

許可權驗證

許可權驗證 (靜態許可權) - https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/permission.html#%E9%80%BB%E8%BE%91%E4%BF%AE%E6%94%B9
手摸手，帶你用vue擼後臺系列二(登入許可權篇) (動態許可權) - https://juejin.im/post/591aa14f570c35006961acac

動態路由

將前端的路由丟個後端, 後端鑑權後獲取該使用者可訪問的路由表通過 json 方式發給前段, 前端在轉成路由, router.addRoutes(accessRoutes) 的方式動態新增進去.

執行時惰性載入 import 問題

webpack 打包不能再執行時 import 一個變數, 會報錯找不到頁面: __webpack_require__("xxx", 只能 import 一個常量值, 所以曲線救國的方式是用一個 map 去對映

const routerMap = {
    'layout': () => import('@/layout'),
    '~/views/permission/page': () => import('~/views/permission/page'),
    '~/views/permission/directive': () => import('~/views/permission/directive')
}

item.component = routerMap[item.component] // 正確姿勢
// item.component = () => import(item.component) // 報錯, 執行時變數

參考
- vue 非同步元件採用引數路徑報錯 - https://segmentfault.com/q/1010000012485066

增加頁面

因為 [執行時惰性載入 import 問題](#執行時惰性載入 import 問題) 的原因, 所以每次新增頁面需要服務端路由表增加一個 router, 在客戶端 map 對映表增加一個頁面對映

伺服器下發路由表 component 值問題

下發的路由中的 component 欄位不要有 @ 字元, 比如 component: '@/views/excel/select-excel', 用 mock 下發時報錯, 換別的語言的伺服器應該不會有問題,

vue.config.js 加個別名

configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
        '~': path.resolve(__dirname, 'src') // 加的別名
      }
    }
  },

就可以這樣下發 json : component: '~/views/excel/select-excel'

踩坑

從後臺獲取路由Map後，前臺轉route的時候報錯

參考: https://github.com/PanJiaChen/vue-element-admin/issues/2381

報錯: `__webpack_require__("xxx"`

vue-router.esm.js:1897 Error: Cannot find module 'function () {
      return Promise.resolve().then(function () {
        return (0, _interopRequireWildcard2.default)(__webpack_require__("./src/router sync recursive ^.*$")

webpack 打包不能再執行時 import 一個變數, 參考: [執行時惰性載入 import 問題](#執行時惰性載入 import 問題)

報錯: `must be accessed with "$data."`

參考: 從後臺獲取路由Map後，前臺轉route的時候報錯 - https://github.com/PanJiaChen/vue-element-admin/issues/2381

將伺服器下發的路由轉換一下

webpack 打包

構建和釋出 - https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/deploy.html

部署

https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/#%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84

# clone the project
> git clone git@github.com:PanJiaChen/vue-element-admin.git

# enter the project directory
> cd vue-admin-template

# install dependency
> npm install

# develop
> npm run dev

protobuf 接入

如何在前端中使用protobuf（vue篇） - https://www.fengxianqi.com/index.php/archives/129/

流程

安裝 pb 相關庫

npm install --save protobufjs protobufjs/light

將 xxx.proto 生成為 js 檔案

npx pbjs -t json-module -w commonjs -o src/proto/proto.js  proto/*.proto

將此命令加入 package.json, 方便以後生成

  "scripts": {
    "serve": "vue-cli-service serve",
   	...
    "proto": "npx pbjs -t json-module -w commonjs -o src/proto/proto.js  proto/*.proto"
  },

js 語法糖

獲取物件中的某個屬性

const response = {
    data: 111,
    name: 222,
}

const { data } = response // 獲取 data 欄位

多個 then

es6中Promise多個then的使用方法 - https://blog.csdn.net/qq575792372/article/details/83901397

踩坑

方法呼叫引數要一直

不一致會導致呼叫不到方法

請求 400 錯誤

可能是請求的引數封裝成 json 不對

request({
    url: ENetCmd.GetPermission,
    method: 'post',
    data: token
    
// 修改為
request({
    url: ENetCmd.GetPermission,
    method: 'post',
    data: { token: token, arg1: '666' }

報錯: TypeError: undefined is not iterable

報錯: Error in mounted hook: "TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

一般是由於路由為 undefined, 導致 vue 讀不到, 所以登出時重置路由不能設為 undefined, 設為一個空陣列就ok
const mutations = {
  CLEAN_ROUTES: () => { // 不能置為 undefined, 否則讀不到路由會報錯
    state.addRoutes = [] // addRoutes 這個是會被 router.addRoutes(accessRoutes) 進去的
    state.routes = []
  }
}

使用 el-image 報錯: Require self-closing on Vue.js custom components (el-image)

參考: https://github.com/PanJiaChen/vue-element-admin/issues/2400

這個元件是 2.9.0 之後才有, vue-element-admin 使用的是 2.7.0, 升級依稀版本就ok

直接修改 package.json 中的版本 "element-ui": "2.12.0", 在執行命令: npm i

訪問是報錯: Invalid Host header

參考: https://blog.csdn.net/guzhao593/article/details/85918869

在 vue.config.js 檔案加入 disableHostCheck: true,
module.exports = {
    devServer: {
        disableHostCheck: true, // 加入這個欄位
    }
}

元件賦值 object 第一次不生效問題

參考: https://blog.csdn.net/qq_37800886/article/details/82220574

解決辦法: watch 監聽寫法

  watch: {
    userData(newVal, oldVal) {
      this.singleData = deepClone(newVal)
    }
  },
  
  // 修改為
  watch: {
    userData: {
      immediate: true, // 增加這個 immediate 這個屬性可以解決 第一次賦值 object 不生效問題
      handler(newVal, oldVal) {
        this.singleData = deepClone(newVal)
      }
    }
  },

http 請求頭 header 上行後變為小寫的問題

參考: https://stackoverflow.com/questions/46200756/header-keys-become-lowercase-when-interacting-with-api-react-native

根據 RFC 2616, 應該大小寫不敏感

js map 的 Object.keys 遍歷時, number 型別的 key 變為了 string 型別

用 Number 轉換成功 number 型別

const permArr = []
Object.keys(this.appPermMap).forEach(key => {
  permArr.push({
    appId: Number(key), // 這裡有個坑, 
    permissionArr: this.appPermMap[key],
  })
})

記錄
2024-12-10
20240505記錄《程式碼隨想錄》筆記
2024-05-05
筆記
Conda常用命令記錄（自用記錄）
2024-10-23
planetype記錄
2019-04-10
Spring記錄
2018-10-18
Spring
Ionic記錄
2019-03-08
paper記錄
2018-09-08
GitText記錄
2018-04-09
Git
思路記錄
2018-06-06
MongoDB 記錄
2024-04-11
MongoDB
2024.3 記錄
2024-03-10
MyBatis記錄
2024-03-23
MyBatis
debian記錄
2024-03-06
工具記錄
2019-08-08
Git記錄
2020-02-18
Git
命令記錄
2019-12-04
explain記錄
2020-09-25
AI
地址記錄
2019-05-01
PEAC記錄
2019-04-19
PlaneLoc記錄
2019-03-26
科研記錄
2024-10-23
2024.10 記錄
2024-10-02
rabbitmq 記錄
2024-10-08
MQ
nginx 記錄
2024-10-06
Nginx
mybatis 記錄
2024-10-06
MyBatis
jvm 記錄
2024-10-06
JVM
spring 記錄
2024-10-06
Spring
Kafka 記錄
2024-09-28
Kafka
netty 記錄
2024-10-04
Netty
指令記錄
2024-11-25
照片記錄
2024-07-01
git 記錄
2024-06-28
Git
redis 記錄
2024-10-13
Redis
好文記錄
2021-03-15
ad記錄
2020-12-14
Duel 記錄
2024-12-10
學習記錄Spring Boot 記錄配置細節
2020-11-02
Spring Boot
淘寶記錄筆記
2024-04-18
筆記

vue-vueadmin記錄

相關資料

TODO

vscode 外掛

chrome 外掛

取消 eslint 校驗

去掉 縮排校驗

去掉 單引號 雙引號 校驗

去掉 程式碼結尾 分號 校驗

去掉 no use 校驗

去掉 物件構建 最後一個 逗號 校驗

生命週期

查詢呼叫棧

環境變數配置

跨域配置

import 別名設定

狀態儲存 Vuex

訪問資料

Element UI

頁面資料使用

ui 使用多語言

自定義元件

踩坑

報錯: The “MyComponent” component has been registered but not used

報錯: Syntax Error: SyntaxError: Assigning to rvalue

報錯: Attribute ‘fileNameTitle’ must be hyphenated

元件

命名方式

傳參 props

監聽 watch

靜態載入

動態載入

非同步載入

父元件控制子元件顯示隱藏

tree

自定義唯一 key

半選狀態

mock 伺服器

使用 json 當做臨時資料庫

hot reload 忽略 部分檔案監聽

踩坑

在 mock 目錄下, 檔案變化會導致 hotload 重啟伺服器

許可權驗證

動態路由

執行時 惰性載入 import 問題

增加頁面

伺服器下發路由表 component 值問題

踩坑

從後臺獲取路由Map後，前臺轉route的時候報錯

報錯: __webpack_require__("xxx"

報錯: must be accessed with "$data."

webpack 打包

部署

protobuf 接入

js 語法糖

獲取物件中的某個屬性

多個 then

踩坑

方法呼叫引數要一直

請求 400 錯誤

報錯: TypeError: undefined is not iterable

使用 el-image 報錯: Require self-closing on Vue.js custom components (el-image)

訪問是報錯: Invalid Host header

元件賦值 object 第一次不生效問題

http 請求頭 header 上行後變為小寫的問題

js map 的 Object.keys 遍歷時, number 型別的 key 變為了 string 型別

相關文章

去掉縮排校驗

去掉單引號雙引號校驗

去掉程式碼結尾分號校驗

去掉物件構建最後一個逗號校驗

hot reload 忽略部分檔案監聽

執行時惰性載入 import 問題

報錯: `__webpack_require__("xxx"`

報錯: `must be accessed with "$data."`