该文章是一篇笔记文章,主要是记录学习创建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项目时的代码及部分问题,不涉及原理性的东西。如有疑问,欢迎讨论。