Vue3简介

Vue3的简单介绍

github上的tags：https://github.com/vuejs/vue-next/releases/tag/v3.0.0
官网：https://v3.cn.vuejs.org/

vue3的优点

• 使用Proxy代替defineProperty实现响应式
• Vue3可以更好的支持TypeScript
• 新的特性：

1. Composition API(组合API)
   。 setup配置
   。 ref与reactive
   。 watch与watchEffect
   。 provide与inject
2. 新的内置组件
   。Fragment
   。Teleport
   。Suspense
3. 其他改变
   。新的生命周期钩子
   。 data选项应始终被声明为一个函数
   。移除keyCode支持作为v-on的修饰符

创建Vue3工程

创建vue-cli工程

官方文档: https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

查看@vue/ cli版本,确保@vue/cli版本在4.5.0以上

vue --version

安装或者升级@vue/cli

npm install -g @vue/cli

创建

vue create vue_test

启动

cd vue_test
npm run serve

创建vite工程

vite简介

什么是vite? ——新一代前端构建工具。（老大哥是webpack）
优势如下:
。开发环境中，无需打包操作，可快速的冷启动。
。轻量快速的热重载(HMR)。
。真正的按需编译，不再等待整个应用编译完成。
。速度比webpack快很多

传统构建与vite构建对比图：
传统构建：将所有的项目文件打包好之后放到服务器上，显示服务器准备好了

vite构建：上来先显示服务器准备好了，然后根据请求去找路由再去解析相应的模块。

创建vite工程

官方文档：https://v3.cn.vuejs.orglguide/installation.html#vite
创建工程

npm init vite-app <project-name>

进入工程目录

cd <project-name>

安装依赖

npm install

运行

npm run dev

vue-cli创建的Vue3工程的目录结构

入口文件main.js

// 引入的不再是Vue构造函数了，引入的是一个名为createApp工厂函数
// 工厂函数不用通过new就可以创建实例对象
import {
    
     createApp } from 'vue'
import App from './App.vue'

// 创建应用实例对象—app(类似于之前Vue2中的vm，但applvm更“轻”)
// createApp(App).mount('#app')
// 可以展开写成
const app = createApp(App)
// 挂载
app.mount('#app')

/*
//vue3的写法
const vm = new Vue({
    render:h=>h(App)
})
vm.$mount('#app')*/

与vue2的区别：使用createApp 创建应用实例对象

app.vue

<template>
<!-- Vue3组件中的模板结构可以没有根标签 -->
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
      
      
  name: 'App',
  components: {
      
      
    HelloWorld
  }
}
</script>

<style>
#app {
      
      
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

与vue2的区别：== Vue3组件中的模板结构可以没有根标签 ==

components文件夹

存放各种组件

vue3的开发者工具