78 创建vue3.0项目
创建vue3.0项目有两种方式，最传统的还是cli脚手架创建，还有就是使用vite创建，下面一一演示，先从脚手架开始
推荐使用cli脚手架的方式而不是vite,因为目前主流的还是cli，vite并没有流行开
方式1：使用vue-cli脚手架创建
官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
首先需要确保vue-cli的版本在4.5.0以上！
查看vue-cli版本
想要查看vue-cli版本有两种方式，都是使用命令：
方式1 vue -V
打开命令窗口输入：vue -V
方式2 vue --version
打开命令窗口输入：vue --version
升级vue-cli版本
如果发现你的vue-cli脚手架版本低于4.5.0，那么就不能通过它创建vue3.0项目了，这个时候需要升级你的vue-cli脚手架版本，可以使用以下这个命令，它会帮助你安装最新的vue-cli版本
## 安装或者升级你的@vue/cli npm install -g @vue/cli
创建项目
确认完自己的vue-cli脚手架版本后就可以开始创建项目了
进入想要创建的目录
首先进入想要创建的目录
可以选择使用cd命令切换目录，也可以直接在目录输入输入cmd然后回车，我是选择的后者
输入命令
输入命令并回车： 注意：xxx就是项目名称
vue create xxx
这是我的项目名称叫vue3_test
然后按下回车，就开始创建项目了，需要等待一小会，这里我大约等了30s
注意：这个阶段可能会失败，失败原因可能是：网络问题，没有淘宝镜像等问题,出现问题不要着急，根据报错信息去搜索解决，总会解决问题的。
如果出现以下画面表示这一步成功了
选择vue3.0版本
因为我们要创建vue3.0版本，所以选择vue3.0选项并回车，然后就等待项目构建即可
注意：这一步别选错了，很有可以不小心选到vue2.0版本
大约等待1分钟左右，即可构建项目完成，如果卡住了，敲下回车即可
出现以下界面表示成功了。并且提供给我们两个命令：进入项目，启动项目
启动vue3.0项目
依次输入这两个命令即可：
首先是切换到项目目录，然后是启动项目
cd vue3_test npm run serve
出现以下界面表示项目启动成功
访问vue3.0项目
打开浏览器输入：http://localhost:8080/
这就是vue3.0提供给我们的界面，和vue2.0长的一模一样的
通过开发者工具发现也是提供了一个HelloWorld的组件
cli脚手架创建项目步骤总结
其实就是这几个命令：
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上 vue --version ## 安装或者升级你的@vue/cli npm install -g @vue/cli ## 创建 vue create vue_test ## 启动 cd vue_test npm run serve
至此使用vue-cli创建vue3.0项目到此就结束了，下面演示用vite创建
方式2：使用vite创建
注意：虽然也使用vite创建，但是并不推荐，因为它目前并不是主流，了解这种方式即可
那么既然要用到vite，那什么是vite呢？
vite简介
vite是由尤玉溪团队打造的新一代前端构建工具。扩展：现在的主流构建工具是webpack
- 优势如下：
- 开发环境中，无需打包操作，可快速的冷启动。
- 轻量快速的热重载（HMR）。
- 真正的按需编译，不再等待整个应用编译完成。
传统构建和vite构建的对比图：
首先是传统构建webpack的工作模式：构建的比较慢，要打包多个文件
然后是vite的工作模式：构建的比较快，动态打包
官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite
vite官网：https://vitejs.cn
创建项目
进入想要创建的目录
这一步和使用vue-cli创建的第一步如出一辙，就不废话了，直接跳过
执行命令 npm inie vite xxx
输入命令：npm inie vite xxx并按下回车
注意：前三个单词都是固定的，xxx是项目名称
npm inie vite xxxx
输入并按下回车
如果是第一次使用vite创建，这里可能会咨询是否要创建项目，输入y(yes)
切换到项目目录
输入命令切换到项目目录
cd xxxxx
启动vue3.0项目
切换到项目目录后，就可以启动项目了，这里不再是npm run serve了，而是npm run dev
但是按下回车后发现启动失败了
这个问题是因为没有执行npm i下载相关的依赖，执行npm i再执行npm run dev即可，相关问题以记录到csdn:
访问vue3.0项目
打开控制台，输入：http://localhost:3000/
和vue2.0的界面比起来，清爽了很多，并且给我们提供了一个计数器的demo
本质还是一个HelloWorld的组件
vite创建项目步骤总结
以下为命令步骤总结：千万不要忘了npm i这一步！
## 创建工程 <project-name> ## 进入工程目录 cd <project-name> ## 安装依赖 npm i ## 运行 npm run dev
总结和对比
- 既然两种方式
- 都可以创建vue3.0项目，但是推荐使用cli创建vue3.0项目，vite目前并不是主流，作为拓展了解即可，实际还是要看以公司为主
- 下面简单对比cli和vite，主要有以下不同：
- 1 创建的命令不同
- cli使用的命令是npm create xxx,vite使用的命令是npm init vite-app xxx
- 2 对项目的依赖管理不同
- cli不需要收到下载依赖，vite需要开发者收到通过npm i命令下载依赖
- 3 项目端口不同
- cli默认是8080，vite默认是3000
- 4 初始化页面展示不同
- cli的页面和vue2.0几乎一致，但是vite展示的页面更加清爽，且提供了一个计数器的demo
