2024重大更新！Blog.Admin更新Vue3.0
BCVP社区自从成立以来，一直致力于在国内推广以ASP.NETCore+VUE为核心的前后端分离架构的技术传播，从几年前我自己开发代码，到现在成立了BCVP开发组的五名成员，以“学以致用，学以分享”为目的，对开源的项目也一直从未收费，也一直从未断更，其实我们每个人都是开源社区的既得利益者，只是总需要一批人去把更多的内容继续进行分享升华，BCVP开发者社区成员就是这样一批人。
这几年主要是BlogCore项目上做更新，从3.0一直到了现在的8.0，前端一直改动不多，但是最近几个月，开发组内有两位小伙伴在学习VUE3.0，那就以他们两个为核心（@繁星、@闲月疏云）推动Blog.Admin项目，升级到vue3.0版本。我目前也在跟着学习中，就是一个打酱油的。
项目地址：
https://github.com/BlogCore-Any-Vue-Pro-Team/Blog.Admin.Vue3.Beta
当然目前还是免费，不过如果您愿意打赏，我们也很开心和增加更大的动力。社区的发展离不了大家的鼓励和支持。目前3.0的版本BCVP开发组还在开发中，相信在不久的将来，会越来越完善！当然大家也可以选择其他的前端框架，只要能保证和后端BlogCore相互匹配即可，之所以要把BlogAdmin进行升级，就是想着带着大家学一学新知识。
代码如图：目前还是以JS为主，慢慢向TS转移，先把功能实现了。
启动截图（速度是毫秒级别的）：
界面截图（和之前风格类似）：
在说代码之前，我们先简单学习一下，大家一直说的很多的——VUE3.0，作者尤大本人在直播中也提到新的Vue会比老的Vue有1.3到2倍的提升，来看看有哪些变化。
1.采用组合式API
2.更好的TypeScript支持
那什么是组合式API?
组合式API是一系列API的集合，使我们可以使用函数而不是声明选项的方式书写Vue组件。它是一个概括性的术语，涵盖了以下方面的API:·
1、响应性 APl：例如ref()和reactive(），使我们可以直接创建响应式状态、计算属性和侦听器。
2、生命周期钩子：例如onMounted(）和onUnmounted(），使我们可以在组件各个生命周期阶段添加逻辑。
3、依赖注入：例如 provide() 和 inject(），使我们可以在使用响应性 APl 时，利用Vue 的依赖注入系统。
举个例子：
Vue2采用的是选项式API，而Vue3是组合式API，来看一下二者的区别
Vue2的写法
<script>export default{data(){return{count: 0}}methods:{addCount(){this.count++}},}</script>
Vue3的写法
<script>import { ref } from 'vue'const count = ref(0)const addCount = () => count.value++</script>
为什么要使用组合式API:
1.代码量减少，更好的逻辑复用
2.分散式维护转为集中式维护，更易封装复用，更灵活的代码组织
搭配<script setup>使用组合式 API 比等价情况下的选项式 API 更高效，对代码压缩也更友好。
这是由于<script setup>形式书写的组件模板被编译为了一个内连函数，和<script setup>中的代码位于同一作用域。不像选项式 API 需要依赖 this 上下文对象访问属性，被编译的模板可以直接访问<script setup> 中定义的变量，无需一个代码实例从中代理。这对代码压缩更友好，因为变量的名字可以变得更短，但对象的属性名则不能。
1.重写diff算法
2.模版编译优化
3.更高效的组件初始化
说明：
使用了高效的模板编译器，这将模板的编译过程从运行时移到了构建时。这减少了 DOM 操作、组件实例化和响应式对象的重复计算。
使用了静态提升技术，改进了编译器，这使得在渲染过程中，只有动态内容需要再次计算。这显著减少了不必要的重新计算，并减少了 DOM 操作和虚拟 DOM 对象的生成。
对于非常深套的嵌套组件结构，Vue 3.0 改进了它的 diff 算法，这可以在处理虚拟 DOM 树时显著提高性能。Vue 3.0 的 diff 算法使用更高效的机制来跳过不需要更新的子树。
1.良好的TreeShaking
2.按需引入
说明：
Vue 3.0引入了Tree-shaking特性，目的是优化构建过程，以及减小最终生成的代码大小。Tree-shaking是一种在构建时移除未使用代码的技术，通过分析模块的依赖关系，将没有被引用的部分从最终的打包文件中排除掉。这可以大大减少应用的体积，提高性能。
比如：你在开发vue的时候，有没有考虑过一个问题，使用各种工具和库来帮助我们构建功能，但是其中我们只用到了一个小功能，而大部分功能其实是用不到的。Tree-shaking 就可以帮助我们只留下我们需要的东西，把其他不需要的东西都自动丢掉，从而减小体积。
Vue3 使用 Proxy 替代了 Object.defineProperty 来做响应式. 因为 Object.defineProperty 的功能有限 (无法监听删除、数组下标、in事件、apply等), 所以 Vue2 做了很多功能补齐, 甚至有的就不支持. 而到了 Vue3 使用 Proxy 带来了全新的响应式解决方案
create-vue是Vue官方新的脚手架工具,底层切换到了vite(下一代构建工具),为开发提供急速响应
1.前提环境条件
Node.js大于等于16.0node -v
注意：安装的时候，可能会有一些node版本提示，比如要16.4，或者≥18.0
这里推荐使用nvm-desktop来进行安装，可以同时安装多个版本，而且版本切换也很直观和方便。
如图：
2.创建一个Vue应用
注意以下内容仅仅是为了BlogAdmin而做的选择，自己可以先练习一下，根据自己公司具体的情况来定是否勾选：
npm init vue@latest√ 请输入项目名称：... vue-project√ 是否使用 TypeScript 语法？... 否√ 是否启用 JSX 支持？... 否√ 是否引入 Vue Router 进行单页面应用开发？... 是√ 是否引入 Pinia 用于状态管理？... 是√ 是否引入 Vitest 用于单元测试？... 否√ 是否要引入一款端到端（End to End）测试工具？» 不需要√ 是否引入 ESLint 用于代码质量检测？... 是√ 是否引入 Prettier 用于代码格式化？... 是
正在构建项目 C:\Users\laozh\Desktop\3333\vue-project...
安装截图：
3.主要核心文件解析：
1.vite.configjs-项目的配置文件：基于vite的配置，类似之前的vue.config.js，相关功能比如路由前缀，又比如反向代理配置
2.package.json-项目包文件：核心依赖项中，Vue变成3.x版本和增加了vite
3.main.js-主程序入口文件：注意app创建的方式发生了重大变化，createApp函数创建应用实例
4.app.vue-项目根组件：SFC单文件组件（script - template - style）
变化一:脚本script和模板template顺序调整
变化二: 模板template不再要求唯一根元素
变化三:脚本script添加setup标识支持组合式API
5.index.html-前端单页面入口：提供id为app的挂载点
4.主要代码说明
vscode打开项目
可以尝试安装插件Vue Language Features (Volar)
作用：默认的vue文件在vs code里全部是一样的文字，且不能点击。该插件让vue文件的内容有了颜色区分，同时支持点击相对路径文件的跳转，class名的样式定位（前提是这个class名和样式必须在同一个文件里）
App.vue
<!-- 加上setup标识允许在script中直接编写组合式api --><script setup>import HelloWorld from './components/HelloWorld.vue'import TheWelcome from './components/TheWelcome.vue'</script><template><!-- 不再要求template中只能有一个根元素了 --><header><img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /><div class="wrapper"><HelloWorld msg="You did it!" /></div></header><main><TheWelcome /></main></template><style scoped></style>
main.js
import './assets/main.css'import { createApp } from 'vue'import App from './App.vue'//mount设置我们的挂载点 #app(id为app的盒子)createApp(App).mount设置我们的挂载点('#app')
index.html
<html lang="zh"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body></html>