您现在的位置是:首页 >技术交流 >Vue3基本知识点网站首页技术交流
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/
-
首次渲染更快
-
diff 算法更快
-
内存占用更少
-
打包体积更小
-
更好的 Typescript 支持
-
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>