Vue3基本知识点

为什么要学vue3

1、Vue是国内 最火的前端框架

2、Vue3是2020年09月18日正式发布的

目前以支持Vue3的UI组件库

库名称	简介
ant-design-vue	PC 端组件库：Ant Design 的 Vue 实现，开发和服务于企业级后台产品
arco-design-vue	PC 端组件库：字节跳动出品的企业级设计系统
element-plus	PC 端组件库：基于 Vue 3，面向设计师和开发者的组件库
Naive UI	PC 端组件库：一个 Vue 3 组件库，比较完整，主题可调，使用 TypeScript，快，有点意思
vant	移动端组件库：一个轻量、可靠的移动端组件库，于 2017 年开源
VueUse	基于 composition 组合式 api 的常用函数集合

Vue3的优点特点

Vue3设计理念 组合式 API 征求意见稿 | Vue 组合式 API/

1. 首次渲染更快

2. diff 算法更快

3. 内存占用更少

4. 打包体积更小

5. 更好的 Typescript 支持

6. Composition API 组合 API

Vite构建工具

Vite介绍

Vite 官方文档：Vite | 下一代的前端工具链/

Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet") 是一种新型前端构建工具，能够显著提升前端开发体验。

优势

• 💡 极速的服务启动，使用原生 ESM 文件，无需打包

• ⚡️ 轻量快速的热重载，始终极快的模块热重载（HMR）

• 🛠️ 丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用

• 📦 等等

为什么选Vite？

传统方式（webpack）

• 必须将应用中所有模块都打包后，然后才能提供服务并访问。

• 更新速度会随着应用体积增长而直线下降。

vite 方式

• Vite 只在浏览器用到某个模块时，才会将该模块打包。

• Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包的部分工作。

 

 Vite的基本使用

目标：能够使用 vite 创建一个 vue3 的项目

使用 vite 创建项目

npm create vite
# or
yarn create vite
# or
pnpm create vite

vite 快捷命令

如果想要快速创建一个 vue3 项目，可以使用如下命令

• 创建普通 vue3 项目

yarn create vite vite-demo --template vue

创建基于 ts 模板的 vue3 项目

yarn create vite vite-demo-ts --template vue-ts

vscode 插件说明

• vue2 中需要安装插件 vetur，可以实现组件高亮。但是 vue3 的一些语法在 vetur 中报错。

• vue3 中需要安装插件 Vue Language Features (Volar)，提供了更加强大的功能。

 

了解 vue3 项目

• 删除 src 下所有的文件和代码

• 创建 App.vue

<template>
  <div>我是 App 组件</div>
</template>

创建 main.js 文件

// 1. 引入 createApp 方法
import { createApp } from 'vue'

// 2. 引入根组件
import App from './App.vue'

// 3. 创建应用实例，并传入 App 根组件
const app = createApp(App)

// 4.将根组件挂载到页面指定的区域
app.mount('#app')

index.html

<div id="app"></div>
<script type="module" src="/src/main.js"></script>