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工程

$ npm create vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。

创建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

补充：vite工程的环境变量

• import.meta.env.MODE: {string} 应用运行的模式。
• import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。
• import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
• import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与import.meta.env.PROD相反)

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文件夹

存放各种组件

通过cdn引入vue

引入

• 使用script标签

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

这里我们使用了 unpkg，但你也可以使用任何提供 npm 包服务的 CDN，例如 jsdelivr 或 cdnjs。当然，你也可以下载此文件并自行提供服务。

• 使用ES的模块方式直接引入

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
</script>

• 启用 Import maps导入vue
  我们可以使用导入映射表 (Import Maps) 来告诉浏览器如何定位到导入的 vue：

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>
<script type="module">
  import { createApp, ref } from 'vue'
</script>

你也可以在映射表中添加其他的依赖——但请务必确保你使用的是该库的 ES 模块版本。

通过cdn引入vue的时候将无法使用单文件组件（SFC）语法。

使用

引入之后，引入版本的所有顶层 API 都以属性的形式暴露在了全局的 Vue 对象上。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

注意使用CDN方式引入的vue不能使用<script setup> 语法,<script setup> 需要使用构建工具，在没有构建工具的情况下使用vue，需要使用setup()语法。

vue3的开发者工具