引言
当我们开始构建越来越大型的应用时,需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈:通常需要很长时间(甚至是几分钟!)才能启动开发服务器,即使使用模块热替换(HMR),文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。
Vite 旨在利用生态系统中的新进展解决上述问题:浏览器开始原生支持 ES 模块,且越来越多 JavaScript 工具使用编译型语言编写。
安装工具 create-vite
create-vite就是vite服务的脚手架,能够快速构建vite服务的项目
npm install create-vite --location=global
创建vite项目
打开命令行,直接输入
create-vite
如图:
然后根据提示和自己需求创建项目即可,默认创建的项目vue版本都是3.0以上。
如果已有自己的vue3项目可以直接把src, public 等文件夹拷贝过来。然后把package.json里的依赖都粘贴过来。
需要注意:
不要覆盖了新项目里:
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.4",
"vite": "^2.9.15"
}
原来项目里的webpack相关的依赖要删除,例如html-webpack-plugin、mini-css-extract-plugin、optimize-css-assets-webpack-plugin、terser-webpack-plugin、uglifyjs-webpack-plugin、compression-webpack-plugin等。
而相关的功能需要去查vite官网使用类似插件替代;
注意点
Vite 需要 Node.js版本 >= 12.0.0。
新创建项目以上流程就基本完成了,但是很多时候,是想用vue2.0来开发项目,那怎么处理呢。
使用vue2.0
首先,使用上边的逻辑先构建项目
然后, 把package.json里的vue版本改成2.x, 还有 "@vitejs/plugin-vue2": "^4.2.3",@vitejs/plugin-vue2 是vue2的解析器
最后, 在项目根目录找到vite.config.js,里边写上
import { createVuePlugin } from 'vite-plugin-vue2'
export default {
plugins: [
createVuePlugin(/* options */)
],
}
然后 install run就可以了