前言使用了ts最头疼的是什么，除了类型声明应该没有第二家了，那么在vue3中如何正确的声明ts类型，代表着我们踏出了认识vue3的第一步，这非常重要，所以为此水个文章，分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要，因为一直使用的Vetur，而且这个插件刚出来时并不完善，各种视频up讲的那个一键分屏功能其实也并不好用，虽然是个很有意思的东西，但是没有那种非要使用它的点，所以当时的我怀着这么一个疑问？为什么要用Volar ？现在我就通过两张图告诉你，它有多香！我们在template里面写代码，绑定变量最烦的是什么，就是我们写了个对象，但是忘了它的属性有哪些啊，使用...

前言为了兼容之前的旧浏览器版本，特别是安卓4.4这种低版本，transform是一定得增加浏览器前缀的，但是我在项目中遇到了设置无效的问题，极度蛋疼，下面是我的解决教程，当然没这个问题，看这篇文章，相信你对如果给项目增加浏览器前缀，会有很充分的认识。教程给css增加浏览器前缀，业界的做法就是使用postcss，目前webpack与vue cli他们需要安装的依赖略有不同：webpack：pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...

npm有nrm，我yarn怎么能没有呢全局安装npm install -g yrm --registry=https://registry.npm.taobao.org安装完毕，查看ls列表yrm ls如果提示你什么禁止运行脚本，且是win10 powerShell的话可以这样做：get-executionpolicy //他会返回Restricted set-executionpolicy remotesigned //旧win10可以用，新版不行 Set-ExecutionPolicy -Scope CurrentUser //最新win10使用该命令，输入完会让你输入...

npm换源应该是国内的基本操作了，但是每次用的时候，可能是百度啊，各种搜，总之搜到的结果，可能都很一般，不是你复制我，就是我复制你，东西缺胳膊少腿是常有的事。为此，npm有一个插件，可以快速的进行源的切换，而且方便，还能测速。首先我们需要安装，务必全局nrmnpm install -g nrm安装完毕后我们可以查看源列表nrm ls如果提示你什么禁止运行脚本，且是win10 powerShell的话可以这样做：get-executionpolicy //他会返回Restricted set-executionpolicy remotesigned //旧win10可以用，新版不行...

经常可以看到各种组件的文档，都是可交互，点开code按钮，还能查看对应的源码。那么我们如果要写一个这种的话，最省事的，应该就是在源代码的基础上，我们增加一个按钮，然后点开可以查看源码，反正就是尽量和书写vue项目一样。为了达到这个需要，我们有两个需求：怎么把vue文件作为代码文本显示代码文本怎么高亮解决这两点我们也能简单的搭建一个类似的可以交互的组件文档了。当然还有更高端的办法，就是自己写一个loader解析器，这个成本就很高了，一般人也不会这个，所以就不考虑了。怎么把vue文件作为代码文本显示webpack有一个插件： raw-loader他可以把text文本或者vue文件这些文件，拿...

默认情况下，我们这种引用方式，是全引用的import echarts from "echarts";但是我们并没有用到echarts中所有的图表，所以，我们尽量的按需引入。let echarts = require('echarts/lib/echarts') require('echarts/lib/chart/bar') //柱状图 require('echarts/lib/chart/pie') //饼图 //下面的是需要的提示框 require('echarts/lib/component/tooltip') req...

moment作为一个时间插件，使用的地方是非常广泛的，但是我们使用moment的时候，需要注意下他的语言包。默认情况下，他的语言包是全加载的，也就是有多少个预设的语言包，就加载多少个。为此，我们需要对他进行优化优化前优化打开vue.config.js文件const webpack = require('webpack'); module.exports = { //... configureWebpack: { plugins: [ // Ignore all locale files of moment.js new webpack.Ignore...

关于图标的方案，现阶段也就三种：雪碧图字符图标svg雪碧图雪碧图就是将多个图标图片合并到一张图里面，前端通过控制图片的大小位置来进行显示。但是也有缺陷，就是图片的清晰度了，如果放大了，就会显的很模糊。字符图标字符图标是目前最成熟的一种方案，使用简单，并且是和字体一样的，放大依旧很清晰。但是他的缺点就是不支持多色图标，也就是一个字符图标，他无法同时显示多种颜色。svgsvg是最近开始兴起的，它是一种组件化封装的方式，将svg代码化，以达到控制的目的，而且相对于字符字体，svg本身有很多优势，比如动画，多色等等因为组件化了，所以我们可以按需引入，虽然字符图标也可以，但是那种是需要平台的支持，...

当我们请求一个api的时候，他返回的数据可能会有很多，这些数据可能需要分别拆分存放在data预设的变量中。这就导致我们可能要写好几个赋值操作this.xxx = xxx; this.xx = xxx; this.xx = xxx;我们可能会重复很多次上面这种操作，是不是有点麻烦。为此，我们可以利用Object.assign来达到我们的偷懒效果Object.assign(this,{xx:xxx},{xxx:xxx});使用这种方式，我们的vue可以检测到动态改变的值，也就是说watch监听是可以触发的。且效果和你写多个this.xxx=xxx是一样的。感觉这个方法妙啊，所以分享出来，当然...

目前国内的图表库，除了百度的echarts就是蚂蚁的antv了，蚂蚁的图表样式更好看，相对来说，他的学习成本也很高，echarts已经是一个老牌图表了，有着比较完善的用法和社区。这里就了解下vue里面使用echarts需要注意的一些问题。使用EChartsECharts有提供一个vue版本的插件，也是由百度官方vue团队维护，有兴趣可以看看。vue-echarts我们这里就先不用这个插件了，用npm的方式安装npm install echarts安装完毕后我们就可以import引入<script> import echarts from "echarts&quo...

路由的鉴权只能处理大的方面，而更精细度的权限控制，就做不到了，如果我页面有一些按钮是需要有权限才能显示，那么，单路由鉴权根本无法做到。所以我们还需要更加精细化的权限控制。这里有两种权限的控制方式：权限组件权限指令权限组件权限组件可以理解为一个插槽组件，这个组件自身做一个权限判断，如果有权限我们就允许这个插槽内容展示。但是这么一个小小的功能其实也没必要做做一个传统组件，使用函数式组件他的性能会更高，因为用的地方很多，组件本身也没太多东西。既然是鉴权，我们自然需要一个用于判断是否有权限的函数，我们依旧可以使用上一章的check函数auth.js//后端返回权限 function getAut...

以前弄个一个路由鉴权，其原理就是判断用户是否已经登录，未登录就跳转至登录页。通过给meta设置一个元数据，然后判断这个页面是否有权限，如果访客没有权限，就跳转至登录页。这个用于一般情况完全是足够了，但是当你的网站权限分级的情况，就不太够用了，因为已经不能用单纯的是否已登录来判断，访客时候有权限浏览该页面。多级权限假设我们网站有四个等级：master（站长）、admin（管理员）、user（注册用户）、guest（游客）那么最先，我们给路由设置权限，设置哪些等级可以访问export default [ { path: "", component: () =&...

路由的数组，他也是层级的关系，而我们的导航菜单与路由数组一样，也是一个层级关系，并且大部分内容都是对应的，一个路由页对应一个菜单按钮。所以，其实我们可以直接将路由数组，作为我们的导航菜单的数据，我们对他进行遍历。针对性隐藏父级但是不一定每个路由都要显示在菜单栏上，所以我们可以给路由数组的对象，增加一个key值用于判断，这个路由对象是否需要出现在导航栏上，如：export default [{ path: "/admin", component: () => import ("@/views/adm...

如果要实现这个功能，我们就需要去写一个layout布局的文件，然后通过一个动态的设置去响应这个变化。这个问题其实可以分两个方面去解析：布局文件怎么去做怎么去响应设置布局文件对于写一个布局文件，其实也不是很难，但是就是不要钻牛角尖，就好比，你可能会去想，一个侧边栏导航要怎么变成顶栏的横向导航？其实这种想法太过于钻牛角尖，为什么我们不能做两个导航呢？侧边栏sidebar我们使用一个导航，header里面我们也放一个导航，然后v-if判断不就好了。没必要想那么复杂，很多东西就是组件化，响应式数据进行显示。而且很多框架都预设了一些布局，我们可以利用那些布局，然后针对性的操作，大部分框架对这个些布...

vue-router本身提供了很多扩展性的东西，这里将一些常用的使用方案分享出来。默认子路由基本写法export default [ { path: "/admin", component: () => import("@/views/admin"), meta: { title: "管理" }, children: [ { path: "", name: "Admin", component: () => import(&quo...

vuex作为一个共享的数据对象，用于不同组件的共用一个数据，并且动态响应数据变化，配合computed属性，可以对数据进行缓存。在vuex里面，在异步处理actions上，最终也还是要用到commit同步操作方法操作数据，并不是actions方法本身处理了数据，原因是因为需要有操作记录，方便在插件上查看。废话不多说，直接上底层原理。原理vuex其实就是一个重新封装的new Vue 对象，他的动态响应数据就是data属性，而commit这些方法，都只是回调而已。import Vue from "vue"; const Store = function(options ...

templatetemplate是html的扩展语法，数据绑定使用Mustache语法（双大括号）<span>{{message}}</span>所以template容易上手，入门极简，大量内置指令，拥有组件作用域css，但是因为简单，所以灵活性不高。jsxjsx是JavaScript的语法扩展，数据绑定使用单引号。<span>{message}</span>jsx相对于template，jsx更灵活，但是也不一定要完全抛弃template。jsx为什么灵活，原因就是他不是html模板，所以jsx中的标签，他可以是变量，我们改变这个变量，这...

refref是vue预设的一个属性，通过$refs我们可以获取dom或者组件实例。<p ref="p">获取到dom</p> <child-component ref="child">获取到一个组件实例</child-component>通过this.$refs.p我们获取到的是html元素p的dom通过this.$refs.child获取的是组件child-component的实例。但是this只能获取到当前组件上下文的实例或者dom，但是如果我们跨层级获取，那就有点麻烦了。ref只能获取当前组件...

父组件与子组件的传参，使用的是props，如果是父组件与孙子组件传参，大部分可能会采用递归的方式，也就是子组件props接收，然后再props传给孙子组件。或者使用vuex。但如果是迭代的方式，组件的层级越深，不断迭代的props会是代码越来越无法维护，冗余。于是官方出了provide inject。provide有父组件设置，inject由子组件接收，他们的特性：祖先组件不需要知道哪些后代组件使用它提供的属性后代组件不需要知道被注入的属性来自哪里例子：父组件<script> export default { provide: { foo: 'bar' }, }...

vue会对data中的值进行处理，如果在template中使用到了，就会对这个值进行setter和getter处理，等于就是添加到了watch一样，当数据发生变化时，就会触发的方对应的getter、setter方法，方法针对性的更新。这个setter和getter的绑定触发，是必须现在data预设好才行，否则vue都运行完毕了再进行添加，是无法响应式更新的。也就是说。vue的响应式更新，他只能监听你一开始就预设好的值，如果你是后面再手动添加的，是无法检测到的，也就无法进行更新。比如：data(){ return { obj:{} } }有一个obj的空对象我们手动给他附加...

vue渲染html时，会生成一个虚拟dom树，被称之为vdom，然后每次数据的更新，旧的dom树和新的dom树进行比对，然后针对性的更新。两个dom树之间的对比，最佳的体验是深层遍历，也就是遍历每个节点，但是这种遍历是非常损耗性能的，所以现在都是浅层遍历。也就是同层对比。两个层级之间进行对比，如果某一项变化了，就要发生改变，这样就会导致，该层级的下一级的元素是重绘的。因为这一层重新弄了，下面的东西自然就要切断，重新生成。而key的作用，就是对这个层级打上标识，如果有了标识，就能够判断是这个元素是不是相同的，相同的，如果只是移动了，那就不用删除重新生成，直接移动即可。如果是相同的元素，位置...

双向绑定和单向数据流什么是双向绑定？双向绑定指的是：数据model的更新会触发可视层的更新，而可视层的更新会触发数据model的更新。这就是v-model绑定input元素所做的事情。单向数据流单向数据流：数据model的更新触发可视层的更新，而可视层的更新和model不会有任何关系。vue的几个概念vue是单向数据流，不是双向绑定vue的双向绑定不过是语法糖Object.defineProperty是用来做响应式更新的，和双向绑定没有关系。v-model做了什么v-model默认限制只能用在：input、select、textarea、components也就是除了表单元素，还有可以用...

插槽vue 2.6后，插槽变动了，推荐使用最新版写法。创建一个插槽<slot></slot> //默认插槽 <slot name="demo"></slot> //具名插槽使用插槽假设插槽的组件标签为：ddd<ddd> <span>我会被插入默认插槽</span> <template v-slot:demo> <span>我会被插入demo插槽</span> </template> </ddd>2.6的...

vue的组件有一个特性，当我们给组件设置attr属性，而这个属性在组件中并没有props设置的，那么他就会默认挂载到组件的根元素上。例子：<template> <div>我是一个ddd组件</div> </template><template> <ddd class="ddd" /> </template> <script> import ddd from "./ddd"; export default { components:{ ...