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

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原理
    Vue学习计划-Vue3--初识Vue3,vite创建Vue3项目_第1张图片

vite原理
Vue学习计划-Vue3--初识Vue3,vite创建Vue3项目_第2张图片

  1. 创建项目

    1. 想要创建项目的文件夹中输入命令:npm create vue@latest,然后按需选择配置项
      Vue学习计划-Vue3--初识Vue3,vite创建Vue3项目_第3张图片

    2. 使用VSCode打开项目,安装插件:TypeScript Vue Plugin (Volar),Vue Language Features (Volar)
      Vue学习计划-Vue3--初识Vue3,vite创建Vue3项目_第4张图片

    3. 文件目录分析:Vue学习计划-Vue3--初识Vue3,vite创建Vue3项目_第5张图片

    • 入口文件有两行重要的代码:
    // 这是准备一个容器
    
    // 引入src文件中的main.ts
    • 我们打开src文件
      Vue学习计划-Vue3--初识Vue3,vite创建Vue3项目_第6张图片

    • 我们认识一下App.vue
      Vue学习计划-Vue3--初识Vue3,vite创建Vue3项目_第7张图片

    • 我们可以打开控制台,安装依赖npm i,运行命令npm run dev,启动项目,查看效果
      Vue学习计划-Vue3--初识Vue3,vite创建Vue3项目_第8张图片
      总结:

    1. vite项目中,index.html是项目的入口文件,在项目最外层
    2. 加载index.html后,vite解析

你可能感兴趣的:(vue,#,vue3,学习路程,vue.js,学习,前端)