01-为什么学vue3

Vue3现状：

• vue-next (opens new window)2020年09月18日，正式发布vue3.0版本。

• 现在主流组件库都已经发布了支持vue3.0的版本，其他生态也在不断地完善中，这是趋势。

  • element-plus (opens new window)基于 Vue 3.0 的桌面端组件库
  • vant (opens new window)vant3.0版本，有赞前端团队开源移动端组件库
  • ant-design-vue (opens new window)Ant Design Vue 2.0版本，社区根据蚂蚁 ant design 开发

Vue3优点：

• 最火框架，它是国内最火的前端框架之一，官方文档 (opens new window)中文文档(opens new window)
• 性能提升，运行速度事vue2.x的1.5倍左右
• 体积更小，按需编译体积比vue2.x要更小
• 类型推断，更好的支持Ts（typescript）这个也是趋势
• 高级给予，暴露了更底层的API和提供更先进的内置组件
• ★组合API (composition api)  ，能够更好的组织逻辑，封装逻辑，复用逻辑

Vue3展望：

• 这是趋势，越来越多的企业将来肯定会升级到Vue3.0
• 大型项目，由于对Ts的友好越来越多大型项目可以用Vue3.0

02-vite基本使用

vite是什么：官方文档(opens new window)

• 它是一个更加轻量（热更新速度快，打包构建速度快）的vue项目脚手架工具。
• 相对于vue-cli它默认安装的插件非常少，随着开发过程依赖增多，需要自己额外配置。

vite基本使用：

• 创建项目 npm init vite-app 项目名称 或者 yarn create vite-app 项目名称
• 安装依赖 npm i 或者 yarn
• 启动项目 npm run dev 或者 yarn dev

03-创建vue应用

基本步骤：

• 在main.js中导入createApp函数
• 定义App.vue组件，导入main.js
• 使用createApp函数基于App.vue组件创建应用实例
• 挂载至index.html的#app容器 具体步骤:

创建项目

• yarn create vite-app vue3-demo创建一个名为vue3-demo的项目 目录结构如下

• 因为学习的缘故,删除src下所有文件,自己重新构建有助于理解
• 创建main.js

• main.js的主要职责:创建一个vue应用(理解为vue2中的根实例)

  • 1.导入createApp函数从vue中 import {createApp} from 'vue'

  • 2.创建根组件App.vue导入至main.js

  // App.vue
  <template>
    <div class="container">
      我是根组件
    </div>
  </template>
  <script>
  export default {
    name: 'App'
  }
  </script>
  

  • 3.使用createApp创建应用实例 const app=createApp(App)
  • 4.将实例挂载到#app容器中 app.mount('#app')

  // 完成后的main.js
  import {createApp} from 'vue'
  import App from './App.vue'
  const app=createApp(App)
  app.mount('#app')