vue3.x相对比vue2.x主要的应用区别在于setup的使用，这个也是vue3.x的特色，所有的功能都得通过vue钩子引入使用，因为 setup 语法糖环境是不支持 this 的，这种开发方式有点回到原始的感觉，针对小项目还好，但如果页面模块功能复杂，如果都放到一个文件里堆叠，不仅会造成可读性差，而且时间长了难以维护，所以这就需要...

作者采用的项目架构：vue3.x + typescript + element-plus + axios，知道这一点很重要，因为目前 vue3.x 和 element-plus 还在不断更新迭代中，可能后面又会有所变化，导致具体的解决方案也会跟着改变。

vue-router3.x通配规则vue2.x对应的vue-router3.x的404路由通配方式： {代码...} vue-router4.x通配规则上面的代码在vue3.x对应的vue-router4.x的路由通配中就没有效果了，需要改成这样才行： {代码...} 匹配优先级有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级...

默认 dev 环境下使用 .env.development 环境变量配置，build 环境下使用 .env.production，所以不需要在 package.json 中再指定模式了

默认 dev 环境下使用 .env.development 环境变量配置，build 环境下使用 .env.production，所以不需要在 package.json 中再指定模式了

简单来讲vuex-router-sync插件就是将vue-router的状态同步到vuex中一、安装npm下载地址：[链接] {代码...} 二、使用 {代码...} 打印store.state即可看到当前路由状态三、使用场景假如您想在一个组件中显示一条消息，希望在几乎每一个页面上都显示“Have a nice day, Jack”，除了首页，因为首页要显示"Welcome back, Jack"...

key是为了添加唯一标识，让Diff算法可以正确识别节点并把它插入正确的位置，提高Vue对虚拟DOM的更新效率。比如：无key，逐条更新值有key，只需要增加个F节点，插入到B和C之间

原文链接：[链接] 如果要在scope作用域下修改外部样式，这里就需要穿透（深度）选择器 一、CSS使用>>> {代码...} 二、less使用 /deep/ {代码...} 三、scss使用::v-deep {代码...} 参考链接： 官方说明：[链接] 官方说明(中文)：[链接]

一、组件按需加载 {代码...} 二、大数据处理 vxe-table（功能齐全）：[链接] {代码...} 三、使用keep-alive <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 {代码...} 四、图片懒加载 安装地址：[链接] main.js {代码...} template {代码...} 五、清除定时器 组件中写在setTimeout、setI...

路由分为静态路由，如事先写好的，公共的路由，如：404、login等还有一部分是根据权限接口返回，动态追加的一些页面模块路由，如：user 在处理权限的时候，可以先允许一些不需要权限认证的路由，如下： {代码...} 具体路由拦截全在router.beforeEach里处理 首先如果没有登录，直接跳转登录页 {代码...} 如果已登录，使用...

一、img标签 {代码...} 二、scss文件 通过在vue文件引入scss样式文件 {代码...} 如果scss文件有引入背景图片，这里不能使用相对路径了，需要使用~开头的方式，如下： {代码...} VUE CLI中的解释：如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析。 VUE CLI静态资源引入 不然改成以下也是可以的 {代码...}...

基于vue全家桶 目录结构 {代码...} components/Loading/index.js {代码...} components/Loading/index.css {代码...} main.js {代码...} 调用 {代码...} 参考链接：[链接] 写到最后，欢迎关注作者：[链接]

基于vue全家桶 目录结构： {代码...} components/Toast/index.js {代码...} components/Toast/index.css {代码...} main.js {代码...} 调用 {代码...} 参考链接：[链接] 写后最后，欢迎关注作者：[链接]