龙空技术网

Vite 入门 (一) 项目初始化

青蛙爱游泳 231

前言:

如今大家对“js初始化”大体比较重视,我们都想要知道一些“js初始化”的相关内容。那么小编同时在网上搜集了一些有关“js初始化””的相关文章,希望朋友们能喜欢,姐妹们快快来学习一下吧!

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

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

安装前准备:

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

查看node版本的方法:

node -v
安装Vite

使用npm安装:

npm install vite@latest

使用yarn安装:

yarn install vite@latest

安装截图:

安装Vite的截图

初始化项目

使用npm:

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

 npm init @vitejs/app

使用yarn:

yarn create @vitejs/app

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

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

Vite安装的语言选择

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

Vite安装过程

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

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

Done. Now run: //**是你的项目名称  cd ***     npm install  npm run dev

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

Vite初始化的项目

可能遇到的问题

你可能在 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 ELIFECYCLEnpm ERR! errno 1npm ERR! news@0.0.0 dev: `vite`npm ERR! Exit status 1npm 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

查看版本。

然后前往 安装稳定版本的node即可。

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

完美运行!!!

以上就是Vite的安装。

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

标签: #js初始化