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

Vite 入门 (一) 项目初始化(vi设计项目式教程)

ruisui883个月前 (02-03)技术分析11


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. (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的安装。

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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/834.html

标签: vite.js
分享给朋友:

“Vite 入门 (一) 项目初始化(vi设计项目式教程)” 的相关文章

Excel VBA 收费结算模块/一步一步带你设计【收费管理系统】11

本文于2023年6月9日首发于本人同名公众号:Excel活学活用,更多文章案例请搜索关注!☆本期内容概要☆用户窗体设置:收费结算模块设置(6)增加合计金额增加收款方式选择输入大家好,我是冷水泡茶,前几期我们分享了【收费管理系统】的设计,最近一期是(Excel VBA 收费结算模块/一步一步带你设计【...

适合旧电脑2022年值得推荐的 10 款轻量级 Linux 发行版

推荐 10 款轻量级Linux 发行版,它们是 2022 年的轻量级、对旧硬件友好的 Linux 发行版。1、Linux LiteLinux Lite 是一款基于#ubuntu# 和 Debian 的、正在不断开发和完善的 Linux 发行版,极好看的 Xfce 桌面,并基于 Ubuntu,采用了...

vue3中父子传值、defineProps用法、defineEmits用法

Vue3中新增了一个 script setup 语法糖模式,可以在单文件组件中更简洁地编写组件逻辑。使用 script setup 语法后,props、data、computed、methods 等选项不再需要独立定义,而是可以直接在 setup 函数中声明,代码结构更加清晰,并且可以更方便地使用响...

GitLab 14.6发布,优化Geo高可用,安全更新等

昨天,GitLab官方按照管理发布了有一个月度版本GitLab 14.6的发布,这也是本年度收官版本。14.6中在安全合规性方面,在Geo方面以及MD代码块一键复制等方便做了优化,另外还在UI图标方面发布了一套全新的图标。详细情况请和虫虫一起学习。GitLab 14.6主要改进使用 Geo 实现无缝...

迁移GIT仓库并带有历史提交记录

迁移git仓库开发在很多时候,会遇到一个问题。GIT仓库的管理,特别是仓库的迁移。我需要保留已有的历史记录,而不是重新开发,重头再来。我们可以这样做:使用--mirror模式会把本地的分支都克隆。// 先用--bare克隆裸仓库 git clone git@gitee.com:xxx/testApp...

一次Java内存占用高的排查案例,解释了我对内存问题的所有疑问

问题现象7月25号,我们一服务的内存占用较高,约13G,容器总内存16G,占用约85%,触发了内存报警(阈值85%),而我们是按容器内存60%(9.6G)的比例配置的JVM堆内存。看了下其它服务,同样的堆内存配置,它们内存占用约70%~79%,此服务比其它服务内存占用稍大。那为什么此服务内存占用稍大...