【Vue3】Vue3工程的创建 及 开发者工具的安装
目录
一、创建Vue3工程的方式
方法一
方法二
二、区分Vue3 和 Vue2的构建
观察main.js
vue3不向下兼容，也就是说Vue3不支持Vue2的写法！
JavaScript 的模块导入有两种常见写法：
三、安装Vue3的开发者工具
总结不易~本章节对我有很大的收获，希望对你也是！！！
本节素材已上传至Gitee：yihaohhh/我爱Vue - Gitee.com
https://gitee.com/liu-yihao-hhh/i-love---vue/tree/master/01_src3_%E5%88%86%E6%9E%90%E5%B7%A5%E7%A8%8B%E7%BB%93%E6%9E%84
一、创建Vue3工程的方式
方法一
打开终端cmd，检查当前的vue版本是否是4.5.0版本以上，如果不是建议重新安装！
vue -V
进入桌面，创建vue3文件
cd DeskTop
vue create vue3 test
选择vue3版本
进入文件夹
cd vue3
观察是否能运行
npm run serve
能够正常运行，可以去看看界面
跟vue2没有什么区别，ok，vue3工程创建成功！
方法二
使用vite创建
官方文档：Quick Start | Vue.js
vite官网：Vite中文网
- 是什么是vite？—— 新一代前端构架工具
- 优势如下：
- 开发环境种，无需打包操作，可以快速冷启动
- 轻量快速的热重载
- 真正的按需编译，不在等待整个应用编译完成
传统构建 与 vite 构建对比图
cd 到桌面
cd Desktop创建工程 一直回车
npm init vite-app vue3_test_vite进入文件
cd vue3_test_vite进行手动配置
npm i启动vue3 选择Loacl
npm run dev
由于vite还没有进行大规模的应用，所以只是首先了解一下，后面的学习还是用最传统的模式来进行（CLI）
二、区分Vue3 和 Vue2的构建
观察main.js
我们把vue2 和 vue3文件拿出来对比发现有很大的区别，但是又很类似，这里创建Vue不再是通过构造函数Vue() 的写法了， 而是通过从 vue 包中导入一个叫 createApp 的函数（不是默认导出，而是按需导出）。来创建一个app应用实例！
// 引入的不再是Vue的构造函数了， 引入的是一个名为creatApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'// 创建应用实例对象——app（类似之前Vue2中的vm，到那时app比vm更轻）
const app = createApp(App)
// console.log('##', app)
// 挂载
app.mount('#app')// vue2
// eslint-disable-next-line no-undef
// const vm = new Vue({
// render: h => h(App)
// })
// vm.$mount('#app')vue3不向下兼容，也就是说Vue3不支持Vue2的写法！
这个时候就有小伙伴要问了！为什么这里createApp要加 {} 不加行不行啊！（不行哦，不加你养我啊！）
JavaScript 的模块导入有两种常见写法：
写法一：默认导入（default export）
// 假设有个模块 export.js
export default '小智'import name from './export.js'
// 不需要加 {}，名字可以自定义，比如 name、abc 都行
写法二：命名导入
// export.js
export const name = '小智'
export const age = 18import { name, age } from './export.js'
// 必须加 {}，名字要和导出的一样
回到Vue3，Vue 3 的 createApp 是“命名导出”的一部分：
// vue/dist/vue.esm-bundler.js（简化）
export function createApp(...) { ... }import { createApp } from 'vue' // 有大括号，说明是按名字精确导入
可以理解为，暴露的时候是（default export）那么就不用加 {}
进入App组件
最大的变化就是，不需要根标签了，再template里面可以有多个根标签
<template><img alt="Vue logo" src="./assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App"/>
</template>三、安装Vue3的开发者工具
再chrome应用商店直接搜索vue
此时我们的浏览器上就同时拥有Vue2 和 Vue3 的开发者工具
现在我们就可以正式开始Vue3的showtime了！