当前位置:首页 > 技术文章 > 正文内容

Vite 入门 (一) 项目初始化(visp项目)

zonemu3个月前 (07-26)技术文章39


Vite【发音为 /vit/】,是一种新型的前端构建工具。轻型且使用简单。

我们先来用Vite初始化一个项目。

安装前准备:

请确认已安装node, 且node 版本 >= 12.0.0

查看node版本的方法:

node -v

安装Vite

使用npm安装:

npm install vite@latest

使用yarn安装:

yarn install vite@latest

安装截图:

初始化项目

使用npm:

我们可以使用 npm init @vitejs/app + 其他参数 的方式来初始化项目。

 npm init @vitejs/app

使用yarn:

yarn create @vitejs/app

安装过程中,我们需要按照提示输入或者选择。

首先需要输入项目名称后回车,再选择自己需要的语言,可以选择Vue 或者 React 或者其他。

假如选择vue 然后选择 vue 或者 vue-ts

然后我们就初始化了项目。

此时我们的命令行中显示:

Done. Now run:

 //**是你的项目名称
  cd ***   
  npm install
  npm run dev


此时我们就安装成功了,我们得到的项目是这样的:


可能遇到的问题

你可能在 npm run dev 的时候, 遇到 Error: Cannot find module 'worker_threads',如下所示。

internal/modules/cjs/loader.js:583
    throw err;
    ^

Error: Cannot find module 'worker_threads'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (D:\code\news\node_modules\vite\dist\node\chunks\dep-e0fe87f8.js:14:20)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! news@0.0.0 dev: `vite`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the news@0.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jidaw\AppData\Roaming\npm-cache\_logs\2021-11-10T13_23_49_264Z-debug.log

这种报错。原因是node 的版本小于 12.0.0

此时我们可以

node -v

查看版本。

然后前往 https://nodejs.org/zh-cn/ 安装稳定版本的node即可。

升级后,我们可以尝试运行:

完美运行!!!


以上就是Vite的安装。

如果你有问题的话,欢迎评论留言。

相关文章

「 VUE3 + TS + Vite 」父子组件间如何通信?

组件之间传值,大家都很熟悉,涉及到 VUE3 +TS 好多同学就无从下手了,所以分享这篇文章,希望看完后提起 VUE3+TS 能够不慌不忙。平时使用的函数如:ref、reactive、watch、co...

同事git push到主分支上了,技术总监怒了

事情是这样的,同事前几天提交使用git提交代码的时候不小心提交到主分支上了,关键还提交成功了,这可是他自己开发的模块,还没测试的呢。技术总监也知道了,这下他慌乱了。最后还是技术总监给他兜底了。为了防止...

编写简单的.gitlab-ci.yml打包部署项目

服务器说明:192.168.192.120:项目服务器192.168.192.121:GitLab为了可以使用gitlab的cicd功能,我们需要先安装GitLab Runner安装GitLab Ru...

高效使用 Vim 编辑器的 10 个技巧

在 Reverb,我们使用 MacVim 来标准化开发环境,使配对更容易,并提高效率。当我开始使用 Reverb 时,我以前从未使用过 Vim。我花了几个星期才开始感到舒服,但如果没有这样的提示,可能...

聊城职院获省赛“HTML5交互融媒体内容设计与制作”赛项一等奖

11月25日,山东省职业院校技能大赛(高职组)“HTML5交互融媒体内容设计与制作”赛项在威海海洋职业学院学院圆满结束。学校信息工程系由计算机应用技术专业学生张慧、冯媛、王海阔三名学生组成的参赛团队,...

HTML5与APP的抉择(h5与app的区别)

同为当下炙手可热的技术,围绕APP和HTML5难免少不了各种争辩。而在“互联网+”时代,许多面临转型的传统企业,也在选择转型工具时,陷入了HTML5或APP的纠结抉择之中……到底该选择HTML5还是A...