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

html 复制代码

<!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

html 复制代码

<!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中用的用法

python 复制代码

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

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

python 复制代码

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

python 复制代码

## 查看@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的镜像站，效果是一样的

python 复制代码

# 配置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

js 复制代码

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

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

vue 复制代码

<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>

后期我们可以自己引入 vuex，pinia，vue-router，代码需要自己写
以后在vue3上，建议使用pinia 做状态管理，pinia更适合组合式api的写法，而pinia和vuex是一个功能