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

var code = "1eb2e489-da58-4ba7-a381-f06cdebe7f2d"

1. Vue3简介

1. 性能的提升
   • 打包大小减少41%
   • 初次渲染快55%，更新渲染快133%
   • 内存减少54%
2. 源码的升级
   • 使用Proxy代替defineProperty实现响应式
   • 重写虚拟DOM的实现和Tree-Shaking
3. 拥抱TypeScript
   • Vue3可以更好的支持TypeScript
4. 新的特性
   1. Composition Api(组合Api)
      • setup
      • ref和reactive
      • computed与watch
        …
   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. 对TypeScript、JSX、css等支持开箱即用
3. 真正的按需编译，不再等待整个应用编译完成
4. webpack构建与vite构建对比图如下：
   webpack原理
   

vite原理

3. 创建项目

   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函数创建一个应用实例

4. 一个简单的效果

   1. App.vue
      

   2. Person.vue
      

   3. 运行效果
      

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