vue-element-admin 基础
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
- 一个数组，包含当前路由的所有嵌套路径片段的路由记录，当前页面所欲路由组成的数组
- 一个路由匹配到的所有路由记录会暴露为
$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})
}
}