Vue入门到关门之Vue3项目创建

一、vue3介绍

1、为什么要学习vue3？

vue3的变化：

首先vue3完全兼容vue2，但是vue3不建议用vue2的写法；其次，vue3拥抱TypeScript，之前vue2使用的JavaScript，ts完全兼容js

最后之前学的vue2 是配置项api，而vue3是组合式api

optionsAPI(旧) => compositionAPI（新）, 效果: 代码组织更方便了, 逻辑复用更方便了非常利于维护!!

vue3新特性：

数据响应式原理重新实现 (ES6 proxy 替代了 ES5 的 Object.defineProperty)
解决了: 例如数组的更新检测等bug, 大大优化了响应式监听的性能 —覆写
(原来检测对象属性的变化, 需要一个个对属性递归监听) proxy 可以直接对整个对象劫持
虚拟DOM - 新算法 (更快更小)
提供了composition api, 可以更好的逻辑复用
模板可以有多个根元素
源码用 typescript 重写, 有更好的类型推导 (类型检测更为严格, 更稳定)
废弃了 eventbus 过滤器

官方文档：

vue3官方文档：Vue.js - The Progressive JavaScript Framework | Vue.js
vue3中文文档：Vue.js

小结： vue3 性能更高, 体积更小, 更利于复用, 代码维护更方便

2、配置项api与组合式api快速体验

（1）配置项api

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><style></style>
</head>
<body>
<div id="app"><p>{{count}}</p><br><button @click="handleAdd">点我加1</button>
</div>
</body>
<script>let app=Vue.createApp({data(){return {count:100}},methods:{handleAdd(){this.count++}}})app.mount("#app")
</script>
</html>

（2）组合式api

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><style></style>
</head>
<body>
<div id="app"><p>{{count}}</p><br><button @click="handleAdd">点我加1</button>
</div>
</body>
<script>let app=Vue.createApp({setup() {let count=Vue.ref(0)let handleAdd=()=>{count.value++}return {count,handleAdd}},})app.mount("#app")
</script>
</html>

（3）API风格

选项式API(配置项api)，也就是之前vue2中用的用法

Vue.createApp({data:function(){},methods:{}，watch：{}# 同一个功能的代码，分到不同地方，代码越多，越乱
})

组合式API，之后vue3中的用法

Vue.createApp({setup() {# 所有代码写在这里面# 变量，函数，监听属性，生命周期# 同一个功能的代码，会在一起}
})

如果当你打算用 Vue 构建完整的单页应用，推荐采用组合式 API + 单文件组件

（4）拥抱TypeScript

之前学习vue2的时候用的都是js代码，在vue3既可以使用js也可以使用ts
ts是由微软推出的，但是最终也还是要被编译成js才能运行在浏览器中
如果使用ts写，可以避免很大错误，因为ts是js的超集，ts完全兼容js，也优化了js的一些问题

二、vue3项目创建和启动

1、 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 vue3_demo001
## 启动
cd vue3_demo001
npm run serve

如果没有配置cnpm的话，也可以配置直接配置npm的镜像站，效果是一样的

# 配置npm镜像站
npm config set registry https://registry.npmmirror.com
# 查看npm镜像站    
npm config get registry

2、使用vite创建（推荐）

这种方式目前是官方推荐使用的，Vite 官方文档：Vite | 下一代的前端工具链

（1）什么是vite？

Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验。它的工作流程与传统方式不同：

**传统方式：**webpack启动项目 -> webpack进行打包编译->将打包的结果交给浏览器 ->浏览器运行
- 先抓取并构建你的整个应用，然后才能提供服务。
- 更新速度会随着应用体积增长而直线下降。
**vite 方式：**vite启动项目 -> 将打包编译的工作交给了浏览器->浏览器直接解析业务
- Vite 以原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作。
- Vite 只需要在浏览器请求源码时进行转换并按需提供源码。
- 根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

（2）为什么使用vite？

优势：

💡 极速的服务启动，使用原生 ESM 文件，无需打包
⚡️ 轻量快速的热重载，始终极快的模块热重载（HMR）
🛠️丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用
📦传统构建与 vite构建对比图

在这里插入图片描述

（3）使用vite需要注意的地方

**兼容性注意：**Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

（4）vite创建vue3

① 指定名字创建

使用cnpm create vite vue3_demo001创建完的项目是没有安装依赖的，也没有安装插件

在这里插入图片描述

打开项目，安装依赖cnpm install

在这里插入图片描述

运行项目npm run dev或者pycharm配置运行项目

在这里插入图片描述

② 不指定名字创建

使用cnpm create vue@latest创建可以自选插件的vue3项目，但还是不带依赖

在这里插入图片描述

（5）使用vite和vue3创建项目的文件简单解释

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app') # 没有使用第三方插件

HelloWorld.vue 组合式api写法，跟之前不一样了

<script setup>import { ref } from 'vue'defineProps({msg: String,})const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card"><button type="button" @click="count++">count is {{ count }}</button></div>
</template>