VUE3项目创建学习

该文章是一篇笔记文章，主要是记录学习创建VUE3项目的一些笔记。以下为正文：

VUE3项目创建

创建 Vue3 的三种方式

• Vue-Cli
• Webpack
• Vite

一、使用VUE-CLI创建（目前只有命令，后续有需要的会补全）

npm install -g @vue/cli
vue create projectName
cd projectName
vue add vue-next
npm run serve

二、使用Webpack创建（同上）

git clone https://github.com/vuejs/vue-next-webpack-preview.git projectName
cd projectName
npm install
npm run dev

三、使用Vite创建（尤自创的方案，现在比较常用及流行）
vite是VUE作者开发的一款意图取代webpack的工具
其实现原理是利用ES6的import会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去webpack冗长的打包时间

#安装Vite
npm install -g create-vite-app
#利用Vite创建Vue3项目
create-vite-app projectName
cd projectName
npm install
npm run dev

在install之前，可以先看一下创建的项目样子，目前看起来创建的非常的快，数秒之间就有了项目的基本构架，如下图：

其中和vue-cli创建的项目比较来看，index.html被移出了public文件夹，同时在html里，引入了mian.js文件，但两种创建VUE3的mian.js里的代码逻辑是一致的。

以上便是vue3的项目的创建方法。

备注：目前发现vue-cli的最新版本在4.5.9时候可以创建VUE3的，而4.0.0还不行，因此其实如果要按照原来的vue-cli来创建vue3项目，其实升级原vue-cli的目标版本即可。

本篇只记录在创建VUE3项目时的代码及部分问题，不涉及原理性的东西。如有疑问，欢迎讨论。