Vue学习计划-Vue3--初识Vue3,vite创建Vue3项目

发布时间:2024年01月01日

1. Vue3简介

  1. 性能的提升
    • 打包大小减少41%
    • 初次渲染快55%,更新渲染快133%
    • 内存减少54%
  2. 源码的升级
    • 使用Proxy代替defineProperty实现响应式
    • 重写虚拟DOM的实现和Tree-Shaking
  3. 拥抱TypeScript
    • Vue3可以更好的支持TypeScript
  4. 新的特性
    1. Composition Api(组合Api)
      • setup
      • refreactive
      • computedwatch
    2. 新的内置组件:
      • Fragment
      • Teleport
      • Suspense
    3. 其他改变:
      • 新的生命周期钩子
      • data选项应始终被声明为一个函数
      • 移除keyCode支持作为v-on的修饰符

2. 创建Vue3工程

  1. 基于vue-cli创建可以打开这里看一些vuecli创建项目
  2. 基于vite创建(推荐)

vite是新一代前端构建工具,官网地址:https://vitejs.cn,vite的优势如下:

  1. 轻量快速的热重载【HMR】,能实现极速的服务启动
  2. TypeScriptJSXcss等支持开箱即用
  3. 真正的按需编译,不再等待整个应用编译完成
  4. webpack构建与vite构建对比图如下:
    webpack原理
    在这里插入图片描述

vite原理
在这里插入图片描述

  1. 创建项目

    1. 想要创建项目的文件夹中输入命令:npm create vue@latest,然后按需选择配置项
      在这里插入图片描述

    2. 使用VSCode打开项目,安装插件:TypeScript Vue Plugin (Volar),Vue Language Features (Volar)
      在这里插入图片描述

    3. 文件目录分析:在这里插入图片描述

    • 入口文件有两行重要的代码:
    // 这是准备一个容器
    <div id="app"></div>
    // 引入src文件中的main.ts
    <script type="module" src="/src/main.ts"></script>
    
    • 我们打开src文件
      在这里插入图片描述

    • 我们认识一下App.vue
      在这里插入图片描述

    • 我们可以打开控制台,安装依赖npm i,运行命令npm run dev,启动项目,查看效果
      在这里插入图片描述
      总结:

    1. vite项目中,index.html是项目的入口文件,在项目最外层
    2. 加载index.html后,vite解析<script type="module" src="xxx">指向JavaScript
    3. vue3中是通过createApp函数创建一个应用实例
  2. 一个简单的效果

    1. App.vue
      在这里插入图片描述

    2. Person.vue
      在这里插入图片描述

    3. 运行效果
      在这里插入图片描述

总结:可以看出Vue3还是支持Vue2的语法

文章来源:https://blog.csdn.net/qq_35940731/article/details/135320428
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。