2023全新升级，基于Vue3新标准，打造后台综合解决方案
download: https://www.666xit.com/4117/
为什么要学习 vue 3为什么要学vue3:Vue是国内最火的前端结构Vue 3于 2022年 2月 7日星期一成为新的默许版别!原文链接：Vue 3 as the New Default The Vue Point中文链接：Vue 3将成为新的默许版别- 知乎Vue3功用更高，体积更小Vue3.0在经过一年的迭代后，越来越好用官方文档：vue3官方文档：Vue.js – The Progressive JavaScript Framework Vue.jsvue3中文文档：Vue.js现在已支持 vue3的UI组件库:element-plusA Vue 3 UI Framework Element Plus (PC组件库)Element Plus，一套为开发者、设计师和产品经理预备的根据 Vue 3.0的桌面端组件库。vantVant – Mobile UI Components built on Vue轻量、牢靠的移动端 Vue 组件库。Vant 是有赞前端团队开源的移动端组件库，于2016年开源，已继续保护4 年时间。现在 Vant 已完成了对 Vue 3.0的适配作业，并发布了 Vant 3.0版别ant-design-vue (PC组件库)https://antdv.com/docs/vue/introduce-cn/ant-design-vue 是 Ant Design 的 Vue 完成，组件的风格与 Ant Design 保持同步Vue3动机和 新特性- 面试题Vue3设计理念组合式 API 征求意见稿 Vue 组合式 API动机与目的:更好的逻辑复用与 代码组织(composition组合式api)optionsAPI(旧)=> compositionAPI（新）,作用:代码组织更便利了,逻辑复用更便利了十分利于保护!!更好的类型推导(typescript支持)vue3源码用 ts 重写了, vue3对 ts 的支持更友好了(ts 能够让代码愈加安稳,类型检测!)vue3新特性：数据呼应式原理重新完成(ES6 proxy 替代了 ES5的 Object.defineProperty)解决了:例如数组的更新检测等bug,大大优化了呼应式监听的功用—覆写(本来检测方针特点的变化,需求一个个对特点递归监听) proxy 能够直接对整个方针绑架虚拟DOM -新算法(更快更小)供给了composition api,能够更好的逻辑复用模板能够有多个根元素源码用 typescript 重写,有更好的类型推导(类型检测更为严厉,更安稳)…废弃了 eventbus 过滤器…小结： vue3功用更高,体积更小,更利于复用,代码保护更便利Vite 的运用vite介绍Vite 官方文档：Vite 下一代的前端东西链Vite（法语意为”快速的”，发音/vit/，发音同”veet”)是一种新式前端构建东西优势[gf]1f4a1[/gf]极速的服务发动，运用原生 ESM 文件，无需打包[gf]26a1[/gf][gf]fe0f[/gf]轻量快速的热重载，始终极快的模块热重载（HMR）[gf]1f6e0[/gf][gf]fe0f[/gf]丰厚的功用，对 TypeScript、JSX、CSS 等支持开箱即用[gf]1f4e6[/gf]等等为什么选 Vite ？webpack发动项目-> webpack进行打包编译->将打包的结果交给浏览器->浏览器运行vite发动项目->将打包编译的作业交给了浏览器->浏览器直接解析业务传统方法根据打包器的方法发动，必须优先抓取并构建你的整个运用，然后才能供给服务。更新速度会跟着运用体积增加而直线下降。vite 方法Vite 以原生 ESM 方法供给源码。这实际上是让浏览器接管了打包程序的部分作业。Vite 只需求在浏览器请求源码时进行转化并按需供给源码。根据情形动态导入代码，即只在当前屏幕上实际运用时才会被处理。问题小结:Vite 是否需求先打包才能供给服务？运用webpack能否创立vue3的项目？Vite 的根本运用方针：能够运用vite创立一个vue3的项目（1）运用vite创立项目npm create vite# oryarn create vite（2）输入项目名字，默许为vite-project（3）选择创立的项目类型，选择vue即可（4）选择创立的vue项目类型，不选ts（5）发动项目vite快捷运用假如想要快速创立一个vue3项目，能够运用如下指令创立一般vue项目yarn create vite vite-demo –template vue创立根据ts模板的项目yarn create vite vite-demo-ts –template vue-tsVue3.0项目介绍使命方针：把握vue3的项目目录结构删除src下一切的文件和代码创立App.vue我是App组件创立main.js文件import { createApp } from vueimport App from ./App.vuecreateApp(App).mount(#app)vscode插件说明vue2中需求装置插件vetur，能够完成组件高亮。但是vue3的一些语法在vetur中报错。vue3中需求装置插件volar，供给了愈加强壮的功用。所以，运用功用vue3，需求卸载vetur插件，装置volar插件。组合式APIcomposition API vs options APIvue2选用的便是 optionsAPI(1)优点:易于学习和运用,每个代码有着清晰的位置(例如:数据放 data 中,方法放 methods中)(2)缺陷:类似的逻辑,不容易复用,在大项目中尤为显着(3)虽然 optionsAPI 能够通过mixins 提取相同的逻辑,但是也并不是特别好保护vue3新增的便是 compositionAPI(1) compositionAPI 是根据逻辑功用组织代码的,一个功用 api 相关放到一同(2)即便项目大了,功用多了,也能快速定位功用相关的 api(3)大大的提升了代码可读性和 可保护性vue3推荐运用 composition API,也保留了options API即就算不用composition API,用 vue2的写法也彻底兼容!!问题小结:optionsAPI的优缺陷是什么? vue3新增的 compositionAPI 有什么特征?有什么优势?