- 小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
之前就听说vite就是一个字快,但是一直没有去研究一下,刚好最近vite升级到了2.0已经比较稳定并且有时间那就特地来研究研究vite,顺便来记录一下碰到的问题。
1.Vite简介
Vite,一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用。同时不仅有 Vue 文件支持,还搞定了热更新,而且热更新的速度不会随着模块增多而变慢。
Vite的主要特点有:
1.快速的冷启动
2.及时的模块热更新
3.真正的按需编译
2.Vite安装
使用 NPM:
npm init @vitejs/app
使用 Yarn:
yarn create @vitejs/app
然后按照提示操作即可!
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如,要构建一个 Vite + Vue 项目,运行:
# npm 6.x
npm init @vitejs/app my-vue-app --template vue
# npm 7+, 需要额外的双横线:
npm init @vitejs/app my-vue-app -- --template vue
# yarn
yarn create @vitejs/app my-vue-app --template vue
按照官网步骤大部分都能正确安装,但是很不巧我属于那一小部分。
碰到的问题:
不管是使用npm还是yarn都会报错C:\Program Files不是内部或外部命令,也不是可运行的程序或批处理文件。然后不管是修改node版本还是删除node重新安装都不管用,最后发现是因为node安装文件名Program Files存在空格引起的。
如何修改:
1.执行npm config get cache查看nodejs路径
2.执行npm config set cache "C:\Program~1\nodejs" --global来修改路径
3.最后再尝试安装vite发现安装成功
4.然后在项目文件下执行npm install、npm run dev即可启动项目
5.然后你就有一个感受,是真的快,并且修改文件热启动还可以保留状态,体验真的很棒
vite项目开发在后续文章,如果感兴趣可以移步Vite小试(二)哦。