Vue3官网使用及简介

Vue3带来了什么

性能的提升

打包大小减少41%
初次渲染快55%,更新渲染快133%
内存减少54%

源码的升级

使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Sharking

拥抱TypeScript

Vue3可以更好的支持TypeScript

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

创建Vue3.0工程

使用vue-cli创建
官网地址

https://cli.vuejs.org/zh/guide/creating-a-project.html

安装

1.查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --versionvue -V
2.安装或者升级你的@vue/cli
npm install -g @vue/cli
3.创建
vue create 文件名
4.选择Vue3

使用vite创建
官网地址

https://v3.cn.vuejs.org/guide/installation.html#vite
vite官网:https://vitejs.cn/

什么是vite?

新一代前端构建工具

优势
  • 开发环境中,无需打包操作,可快速的冷启动。
  • 轻量快速的热重载(HMR)
  • 真正的按需编译,不再等待整个应用编译完成
  • 传统构建与vite构建对比图
安装

创建工程 $ npm init vite-app <project-name>
进入工程目录 $ cd <project-name>
安装依赖 $ npm install
运行 $ npm run dev

内容介绍

main.js

//引入的不再是Vue构造函数了,引入的是一个名为createApp 的工厂函数
import { createApp } from 'vue'
import App from './App.vue'
//创建应用实例对象--app(类似于之前Vue2中的vm,但app比vm更“轻”)
const app = createApp(App)
//挂载
app.mount('#app')

App.vue

<!--Vue3组件中的模板结构可以没有根标签-->
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Vue3中使用heatmapjs-vue插件时,你需要按照以下步骤进行配置: 1. 首先,你需要从npm安装最新版本的热力图插件。你可以使用以下命令进行安装: ```shell npm install heatmapjs-vue ``` 2. 在你的main.js文件中,你需要全局引入heatmapjs-vue插件,以确保在整个应用程序中都可以使用该插件。你可以使用以下代码进行全局引入: ```javascript import Vue from 'vue' import heatmapjsVue from 'heatmapjs-vue' Vue.use(heatmapjsVue) ``` 请注意,heatmapjs-vue插件在Vue3中只能进行全局引用,不能进行局部引用,否则会报错并无法显示出来。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [heatmapjs-vue组件库项目简介](https://blog.csdn.net/weixin_34239592/article/details/91372081)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue+heatmapjs-vue实现热力图,点击/滑动可以监听并更新](https://blog.csdn.net/qq_44278289/article/details/131450051)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值