vue-vueadmin记录

title: vue-vueadmin记录categories: Vuetags: [vue, vueadmin, js, 记录]date: 2019-09-06 17:37:10comments: falsevue-vueadmin记录相关资料官方资料GitHub - https://github.com/PanJiaChen/vue-element-admin/...

蝶泳奈何桥.

2687人浏览 · 2019-09-23 19:14:51

蝶泳奈何桥. · 2019-09-23 19:14:51 发布

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],
  })
})

Vue

前往低代码交流专区

更多推荐

Mac 使用vscode 创建vue项目后修改文件提示：权限不足，以超级用户身份重试

Vue

基于nodejs+vue云计算的城乡医疗卫生服务系统[程序+论文+开题]-计算机毕业设计

Vue

ElasticSearch迁移至openGauss

Vue

所有评论(0)

查看更多评论

蝶泳奈何桥.

@yangxuan0261

已为社区贡献1条内容

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 类型

所有评论(0)

蝶泳奈何桥.

去掉缩进校验

去掉单引号双引号校验

去掉代码结尾分号校验

去掉对象构建最后一个逗号校验

hot reload 忽略部分文件监听

运行时惰性加载 import 问题

报错: `__webpack_require__("xxx"`

报错: `must be accessed with "$data."`