vue-element-admin 基础

coderMozart 2020-04-20

1.安装

  <span>建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题</span>

<span>   <em> </em></span><span><span>npm <span>install --registry<span>=https://registry.npm.taobao.org</span></span></span></span>

    可以通过重新指定 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。

  自动修复

      <span>npm run lint -- --fix</span>

      运行如上命令,eslint 会自动修复一些简单的错误。

6.路由懒加载

    <span>const <span>Foo <span>= <span>(<span>) <span>=> <span>import<span>(<span>‘./Foo.vue‘<span>)</span></span></span></span></span></span></span></span></span></span>

<span><span><span><span><span><span><span><span><span><span>    当打包构建应用时,Javascript 包会变得非常大,影响页面加载速度。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了</span></span></span></span></span></span></span></span></span></span>

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

相关推荐