开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

前言

上一篇我们简单了解了一下Vue3，也准备好了开发环境，这一篇我们就先开始创建项目。

一、使用vue-cli创建

官方文档：cli.vuejs.org/zh/guide/cr…

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 如果版本太低，就安装或升级你本地的@vue/cli
npm install -g @vue/cli
## 创建
vue create <project-name>
## 启动
cd <project-name>
npm run serve

二、使用vite创建

官方文档：vitejs.cn/

       在第一章中我们已经简单介绍了一下vite，有兴趣可以去官方进行学习，这里我们再简单对比下构建。 我们知道，vite在开发环境中，无需打包操作，可快速冷启动；可轻量快速的热重载（HMR）;是真正的按需编译，不再等待整个应用编译完成。那传统构建与vite构建有什么区别呢，官方给我们的对比图如下所示：

       传统的构建模式是什么样呢，一进来就是有个入口文件，然后分析路由，分析模块，分析好了之后把前面这些进行打包，然后告诉服务器，我准备好了，所以我们每次执行都要等一段时间，等打包的过程。

         vite构建一上来就告诉我们准备好了，跟传统构建模式正好相反，然后你发一个http请求，他看到了，你就进来啦，然后他去找路由，分析整个路由里的模块，这是动态的，随用随分析。

## 创建工程
npm init vite-app <project-name>
## 进入工程目录
cd <project-name>
## 安装依赖
npm install
## 运行
npm run dev

三、两种方式区别

• 使用vue-cli创建时会直接下载安装依赖，项目创建成功后，可直接运行；而使用vite创建后，需进入工程目录再安装依赖，依赖安装成功后再运行
• 两种方法运行命令不同

结束语

后面的学习我会在第一种方式创建的项目中进行项目编写，有对第二种方式感兴趣的小伙伴，可以看一下vue-element-plus-admin，这是一套基于vue3、element-plus、typesScript4、vite3的免费的后台集成方案，开箱即用的中后台前端解决方案，可以用来作为项目的启动模版，也可用于学习参考哟~~~