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

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

zonemu1个月前 (07-26)技术文章23


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开发极简入门(16):祖孙组件间通信之provide&amp;inject

前文说了Vue的组件间关系,有父子、爷孙、其他关系。例如之前的Father、Son是父子关系,App与Son就是爷孙关系。而props的Son,与emits的Son,就是其他关系。前文的props是父...

10个实例小练习,快速入门熟练 Vue3 核心新特性(一)

作者:xuying 全栈修炼转发链接:https://mp.weixin.qq.com/s/_n2seDbbiO5hXQfuUGbUCQ前言Vue3.0 发 beta 版都有一段时间了,正式版也不远了...

零基础开始学 Web 前端开发,有什么建议?(附视频教程)

WEB前端看似简单,其实不然,要学的知识点很多很杂,对于零基础学习前端的小伙伴来说,一份详细的前端学习知识点大纲尤为重要。下面,话不多说,直接上干货(全网最全,没有之一)。PS:文末有福利(全阶段视频...

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

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

Vue3快速入门(vue3快速上手)

  1.核心语法  1. 1选项式和组合式的区别  Vue2的API设计是Options(选项)风格的。  Vue3的API设计是Composition(组合)风格的。  Options类型的 API...

gitlab简单搭建与应用(gitlab怎么用)

一、gitlab1、简介GitLab是利用Ruby on Rails一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。与Github类似,GitLab...