vue-element-admin 基础
Posted yxknotes
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
- 一个数组,包含当前路由的所有嵌套路径片段的路由记录,当前页面所欲路由组成的数组
- 一个路由匹配到的所有路由记录会暴露为
$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 基础的主要内容,如果未能解决你的问题,请参考以下文章