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

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

ruisui884个月前 (02-03)技术分析19


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设计项目式教程)” 的相关文章

Vue3 中有哪些值得深究的知识点?

众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点。喜欢的话建议收藏,点个关注!1、createAppvue2 和 vue3 在创建实例时,有很大的区别,具体对比如下://Vue 2 Vue.use({ router, store,...

摄影后期必看 | PS插件camera raw 16.4教程 | 范围蒙版

范围蒙版Camera Raw 【蒙版】模块中提供了三个范围蒙版工具,可以通过特定的范围来创建蒙版。此次新增的【范围蒙版】大大加强了acr插件对局部调整的能力。点击下拉小箭头可以看到【颜色范围】,可用于快速选择想要编辑的颜色。快捷键:Shift + C【明亮度范围】,可用于快速选择想要调整的明亮度。快...

Acustica Audio 发布模拟Roland Jupiter 双声道合成器插件 TH2

福利: Acustica Audio 发布模拟Roland Jupiter 风格的双声道合成器插件 TH2 免费下载 意大利 Acustica Audio 公司发布布模拟Roland Jupiter 风格的双声道合成器插件 TH2 ,灵感来源于Acustica Audio的THING-8系列,它是...

一起学Vue:路由(vue-router)

前言学习vue-router就要先了解路由是什么?前端路由的实现原理?vue-router如何使用?等等这些问题,就是本篇要探讨的主要问题。vue-router是什么路由是什么?大概有两种说法:从路由的用途上来解释路由就是指随着浏览器地址栏的变化,展示给用户的页面也不相同。从路由的实现原理上来解释路...

Vue从入门到实践 丨Vue-router基本使用

1. 什么是 vue-routervue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址:https://router.vuejs.org/zh/2. vue-router 安装...

vue2中路由的使用步骤,你学会了吗?

今天我们来整理下关于vue2中路由的使用步骤:1. 导入 vue 文件和Vue-router文件(注意:vue-router是依赖vue运行的,所以一定在vue后引入vue-router)2. 定义路由组件模板3. 创建路由实例并定义路由规则4. 将路由实例挂载给Vue实例5. 在结构区域定义控制路...