前端基础之《Vue（25）—Vue3简介》

一、介绍

1、Vue3构想
2020年9月

2、Vue3正式发布
2022年春节

3、官网
Vue3：https://vuejs.org
VueRouter(V4)：https://router.vuejs.org
Pinia(V2)：https://pinia.vuejs.org

4、脚手架
不推荐使用@vue/cli，这个脚手架的背后是webpack
推荐使用vite，官网：https://cn.vitejs.dev/

5、组件库
PC端：element-plus
移动端：vant(v3)

二、搭建环境

1、vue3的环境搭建有两个
@vue/cli
vite（推荐）

2、创建命令
yarn create vite vue3-admin --template vue-ts

3、启动
（如果超时换成cnpm）
yarn install 或者 cnpm install
yarn dev 或者 cnpm run dev

4、目录结构
package.json：依赖包
vite.config.ts：vite的配置文件
tsconfig.json：ts配置文件（分层）
tsconfig.node.json：node环境配置文件
tsconfig.app.json：应用配置文件
index.html：SPA单页面
public目录：静态资源目录
src/vite-env.d.ts：ts的声明文件
style.css：全局样式文件
main.ts：入口文件

5、vue3单文件组织.vue简单理解
（1）template支持多节点（多个div）
（2）在单文件组织中script支持写多个
（3）style里面可以使用v-bind指令
（4）使用ts
<script lang="ts"></script>

6、vue3新写法可以不用data、methods
例子：

<script setup lang="ts">// ref是定义声明式变量的
import { ref, watch } from 'vue'
// num初始值是1000
const num = ref(1000)
// 点击事件
function add () {num.value++
}
// 监听器
watch(num, ()=>console.log('num变了'))
</script><template><h1 v-text='num'></h1><button @click="add">增加</button></template>

但是vue3是兼容vue2的写法的。

7、入口文件main.ts

// import Vue from 'vue' 在vue3中已经没有这个构造函数了
// 导入createApp工厂方法，用于创建vue实例
import { createApp } from 'vue'
// 导入全局样式
import './style.css'
// 导入根组件
import App from './App.vue'//createApp(App).mount('#app')
const app = createApp(App)
// 在vue3中，只能使用$mount挂载，已经淘汰了el选项
app.mount('#app')