体验vue3的3种方式

93 阅读1分钟

vue-cli

代码块

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

webpack

代码块

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

vite

这是尤大开发的新工具,目的是以后取代webpack,原理就是利用浏览器现在已经支持es6的import了,碰见import会发送一个http请求去加载文件,vite拦截这些请求,做一些预编译,就省去了webpack冗长的打包时间,提升开发体验

代码块

npm install -g create-vite-app
create-vite-app 01-vue3-vite
cd 01-vue3-vite
npm install
npm run dev

我们打开localhost:3000

看下network,大概就知道vite的工作原理,这也是为什么它能做到复杂项目的秒开,天生的按需加载,以后我们会手写一个vite,还会去阅读vite的源码