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

第一节：Vue2升级Vue3的优势

优势一、更容易维护

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 带来了全新的响应式解决方案

2

第二节：如何创建项目

create-vue是Vue官方新的脚手架工具,底层切换到了vite(下一代构建工具),为开发提供急速响应

1.前提环境条件

Node.js大于等于16.0
node -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

<!DOCTYPE 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>