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. 一个数组，包含当前路由的所有嵌套路径片段的路由记录，当前页面所欲路由组成的数组
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})
  }
}

vue-element-admin 基础

相关推荐