记录一次基于Vite搭建Vue3项目的过程

ops/2024/10/9 17:26:21/

Vue2已经于2023年12月31日停止维护了，2024年算是vue3的崭新的一年，我们的项目也基本从vue2逐渐向着Vue3过渡，Vue3相较于vue2有更好的开发体验，和ts的自然融合使得项目的结构、功能拆分变得更加的清晰；组合式声明有种MVC向着MVP、MVVM转变的错觉；而Vite的使用使得我们的编译速度产生质的飞跃。总体来说，Vue3是一个不错的选择，今天这边文章主要就是来记录一下如何创建一个Vue3的项目。

环境配置

Vue3的安装其实对于环境的要求不高，只需要我们的电脑安装了nodejs即可，这边有关npm、yarn、pnpm等安装工具的安装请自选搜索选择。安装前可参考：修改yarn和npm为国内镜像源 ,修改npm为国内源，提高安装速度。如下是各个包管理工具的安装

$ npm install -g yarn  # 全局安装yarn
$ npm install -g cnpm  # 全局安装cnpm
$ npm install -g pnpm  # 全局安装pnpm

创建Vue项目

Vue项目有两种快捷创建的方式，可以任意选择自己喜欢的方式：

1、使用vue-cli创建

通过全局安装Vue-cli工具链来快捷创建Vue项目，vue-cli是一个基于vuejs的交互式脚手架：

$ npm install -g @vue/cli  # 全局下载vue-cli
$ vue create vue3-demo # 创建vue3-demo项目
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)  # 选择vue3Default ([Vue 2] babel, eslint) Manually select features Vue CLI v5.0.8
✨  Creating project in D:\Projects\CareeLink\packages\flowable\vue3.
⚙️  Installing CLI plugins. This might take a while...yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...success Saved lockfile.
Done in 82.89s.
🚀  Invoking generators...
📦  Installing additional dependencies...yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...success Saved lockfile.
Done in 18.36s.
⚓  Running completion hooks...📄  Generating README.md...🎉  Successfully created project vue3.      
👉  Get started with the following commands:$ cd vue3$ yarn serve

这样Vue3项目是创建成功了，但是需要知道的是vue-cli是基于webpack的，不是vite，这种方式不适合我，接下来看下一种方式。