VUE3学习

最新推荐文章于 2024-05-10 23:39:40 发布

前端sunny

最新推荐文章于 2024-05-10 23:39:40 发布

阅读量181

点赞数

分类专栏：笔记文章标签：学习 vue.js javascript

本文链接：https://blog.csdn.net/qq_45861785/article/details/127094267

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

一、VUE3 准备前提
二、常用的 Composition API
三、其他 Composition API
四、Composition API 的优势
五、新的组件
六、其他

一、VUE3 准备前提

创建 vue3 工程的方式

1. 使用vue-cli创建

步骤：

## 查看@vue/cli的版本，必须在4.5.0以上
vue --version
## 安装或升级@vue/cli
npm i -g @vue/cli
## 创建
vue create <project-name>
## 启动
cd <project-name>
npm run serve

2. 使用 vite 创建

vite 定义：新一代前端构建工具
优势：

开发环境中，无需打包操作，可快速的冷启动
轻量快速的热重载（HMR）
真正的按需编译，不再等待整个应用编译完成
步骤：

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

分析vue3工程的文件

main.js文件

// 引入的不再是Vue构造函数，而是名为createApp的工厂函数
import { createApp } from "vue";
import App from "./App.vue";
// 创建应用实例对象app（类似于Vue2中的vm，但app更“轻”）
const app = createApp(App);
// 挂载
app.mount("#app");
// createApp(App).mount('#app')

// vue2
/**
 * 
import Vue from 'vue'
import App from './App.vue'
const vm=new Vue({
  render:h=>h(App)
})
vm.$mount('#app')
 */

2.App.vue文件
template可以不是一个根标签