当前位置: 首页 > article >正文

vite --- 搭建开发环境

目录

下载安装和初始化VSCode

安装Node.js

yarn 使用

pnpm 安装与使用

搭建第一个Vite项目

使用 PNPM创建项目

项目目录解读


下载安装和初始化VSCode

1、访问网站

Visual Studio Code - Code Editing. Redefined

2、选择平台版本

选择符合自己操作系统的安装包下载完毕,根据安装向导安装。限于篇幅,不再赘述。

3、安装一个VSCode插件

  • Chinese Simplified
  • Live Server

4、安装主题 Monokai

安装Node.js

1、访问网站

Node.js

Node.js 官网默认监测你的电脑操作系统,给出相应版本,建议安装LTS版本。点击按钮下载安装包,根据安装向导安装即可。

yarn 使用

打开Vscode,输入 Ctrl+~, 打开集成终端工具,在命令行里输入命令:

$ npm install yarn -g

全局安装 yarn,这是 facebook 出品的快速、可靠、安全的 Node.js 包管理工具,用来代替 npm。

安装好 yarn后,设置国内源镜像:

$ yarn config set registry https://registry.npm.taobao.org

yarn常用命令

  • 安装yarn命令: npm install -g yarn
  • 查看版本号yarn version
  • 初始化项目yarn init , 根据提示输入项目相关信息即可。
  • 查看全部配置项 yarn config list
  • 显示某配置项yarn config get <key>
  • 删除某配置项yarn config delete <key>
  • 设置配置项yarn config set <key> <value> [-g|--global]
  • 安装包命令:yarn install ,该命令会根据packge.json文件安装依赖包,生成node_modules文件夹。
  • 强制重新下载所有包 yarn install --force
  • 添加包yarn add [package],该命令会自动更新package.json和yarn.lock
  • 删除包yarn remove <packageName> 该命令会自动更新package.json和yarn.lock
  • 发布包yarn publish
  • 查看缓存yarn cache
  • 运行脚本yarn run 该命令执行在 package.json 中 scripts 属性下定义的脚本。
  • yarn build 该命令将源码编译成dist目录下发行文件。

3、安装pnpm

pnpm,目前 GitHub 已经有 star 9.8k,现在已经相对成熟且稳定了。它由 npm/yarn 衍生而来,但却解决了 npm/yarn 内部潜在的 bug,并且极大了地优化了性能,扩展了使用场景。

打开Vscode,输入 Ctrl+~, 打开集成终端工具,在命令行里输入命令:

$ npm install pnpm -g

pnpm 安装与使用

安装

通过npm安装,也可以在官网查看其他安装方式

npm install -g pnpm

通过下述命令查看已安装的pnpm的版本

pnpm -v

使用

  1. 初始化,生成package.json文件
pnpm init
  1. 安装依赖
pnpm install xxx
  1. 运行package.json中定义的scripts脚本,启动服务即可
pnpm run xxx

示例:创建一个vue3项目

通过pnpm create使用vite套件新建一个vue3的项目,直达vue官方链接

# 使用pnpm create 启动套件(vite,只有存在的套件才可以)创建模板项目
pnpm create vite <project-name> -- --template vue
cd <project-name>
pnpm install
pnpm dev

通过上述操作,我们学到了pnpm项目的初始化、安装依赖、启动服务等,可以运行起来,感受一下它和npm运行速度的差异。

常用命令

官网查看更多命令

设置源

  • 查看源:pnpm config get registry

  • 切换源:pnpm config set registry <淘宝源或其他源地址>

初始化

  • 初始化package.json:pnpm init

注意:pnpm init只能一键快速生成package.json文件,如果要一步一步填写每个属性的值生成package.json文件,则需要通过npm init生成,如果要一键快速生成,需要增加-y参数npm init -y来生成。

管理依赖

  • 安装依赖包到 dependenciespnpm add <pkg>

  • 安装依赖包到devDependenciespnpm add -D <pkg>

  • 安装依赖包到optionalDependenciespnpm add -O <pkg>

  • 全局安装依赖包:pnpm add -g xxx

  • 安装项目全部依赖:pnpm install,别名pnpm i

  • 更新依赖包:pnpm update,别名pnpm up

  • 删除依赖包:pnpm remove,别名pnpm rm/uninstall/un

查看依赖

  • 查看本地安装的依赖:pnpm list,别名pnpm ls

  • 查看全局安装的依赖:pnpm list --global,别名pnpm ls --g

  • 检查过期的依赖:pnpm outdated

运行脚本

  • 运行自定义脚本:pnpm run xxx,别名pnpm xxx

  • 运行test测试脚本:pnpm test

  • 启动套件创建项目: pnpm create

  • 运行start启动命令:pnpm start

发布依赖包

  • 发布依赖包:pnpm publish

管理node环境

可实现nvmnnode版本管理工具,安装并切换node.js版本的功能。

  • 本地安装并使用:pnpm env use <node版本号>

  • 全局安装并使用:pnpm env use --global <node版本号>

搭建第一个Vite项目

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。

使用 PNPM创建项目

 

$ pnpm create vite

项目目录解读

1.gitignore

git项目忽略传到我们git仓库里的一些配置,这里会有一些缺省的配置

2.package.json

这里出了定义我们最基本的name版本,以及所谓的生产的依赖和开发的依赖,还定义了三个所谓的npm的脚本

生产以来装的vue版本好为3.2.25

在开发以来里面,它去安装了我们vitejs的一个plugin-vue,也就是基于vue的一个插件,然后又装了vite是2.7.2

scripts这里的npm脚本,一个是dev,其事实上就是运行的vite这个命令,当然我们也可以通过build,来去构建一个基于vite的一个项目,我们可以打包我们的项目放到生产环境里,打完包以后呢,我们可以通过preview来去浏览我们打包好的静态资源

那关于这个package.json,大家如果熟悉nodejs的同学,应该不陌生

// package.json
{"scripts": {"dev": "vite", // 启动开发服务器,别名:`vite dev`,`vite serve`"build": "vite build", // 为生产环境构建产物"preview": "vite preview" // 本地预览生产构建产物}
}
```

3.pnpm-lock.yaml

如果大家知道npm的lock以及yarn的lock,应该也不陌生,这就是我们的pnpm所依赖的一些关系,这个yaml文件大家不要手动修改他

4.README.md

这个不用说,就是我们当前项目的所谓的帮助文档

5.vite.config.js

这个文件很重要,是我们vite项目的一个最基本的配置文件,刚才我们在package.json里边我们看到,在本地的vite环境里边,已经安装好了Vite以及Vite的Vue插件,那我们就可以通过,从Vite里边解构出defineConfig这样的一个函数,以及Vue这样的一个对象,然后我们就可以暴露一个defineConfig来定义一个配置,里边定义一个对象,定义一个plugins,来去定一个数组,里边可以把我们的插件放进去,这里我们运行了一下vue的这个对象,所以我们这个插件就可以用了

mport { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()]
})

6、index.html与项目根目录

如果你通过webpack去构建vue项目的时候,我们有个vue-cli,你应该知道,我们的index.html不是放在我们项目的根目录下面的,它是放在public这个目录下面的,而现在呢,这个index.html被放在了我们项目的根目录上,这就说明我们vite是基于index.html作为我们的入口文件的。那我们再仔细观察一下index.html这个文件。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

除了我们最简单的一个link加载我们public这个静态资源目录下的这个href的icon图标以外,大家发现在body下面又一个script标签,这个标签呢,它去引入了一个js文件,其实如果按照正常的我们去理解,引用js文件没有问题,但是当我们真正的去查看一下src/main.js,使用了所谓的 es module ,也就是es的模块import语法,这个语法如果直接在浏览器上使用的话呢,会有问题,我们可以做个实验,把index.html里面script的标签的type去掉,作为一个最一般的js的引用,浏览器查看项目,打开控制台console,你会发现这里提示我们有语法错误,我们不能通过import语法来导入我们的模块,这里有一个提示说 outside a module,也就是不要在module的外侧,其事实上就是告诉我们,我们得需要去符合浏览器的这个es模块定义方法,这个呢是属于我们原生js以及浏览器或者是es的一个基本知识,我们可以在script里头加一个 type module,如果这个知识点大家之前不知道,那你就可以把它做作一个新的知识点get到就可以了。也就是说你想要去通过所谓的es6的或者是es其他本本的import这种方式去导入一个模块,那么你得需要在引入这个js文件的时候,或者是引入js入口文件的时候,你得需要加一个type module,当然了也可以在这个script里头写import,去加载一个模块,也是没有问题的。

这是我们所谓的vite去加载模块的一个非常重要的依赖的一个点,保存代码,发现浏览器迅速更新,不知比webpack快了多少倍。

接下来浏览一下vite的这个目录,在src下面,这里有一个main.js ,也就是vue实例化的一个页面,如果你用过vue,或者vue3的 话,对这个语法应该不陌生,这个实例化的所谓的vue,已经载入了一个组件叫App.vue。

src/App.vue这是一个最普通的vue的单文件组件,关于vue单文件组件的知识,可以去vue3官网上看一眼

src/components文件夹下有一个HelloWorld.vue,是一个vue的组件,因为在App.vue里,我们通过import载入过这个组件,但是大家仔细看一下我们scripts标签里的这句话,它使用的也是import的方式去载入的,也就是我们可以放心的去使用es module去完成我们模块的管理了

# App.vue
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

src/assets是通过vite去管理的静态资源目录

public目录这个大家应该都了解,这里边我们去创建的一些基本的文件,比方说我们通过一个index-2.html,我们去构建一个html文件,构建一个html模块,放到public里下的文件,我们在浏览器上或者在server里,我们可以直接访问 http://localhost:3000/index-2.html, 放到src里的文件不具备这样的能力

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>test.html
</body>
</html>

你可能已经注意到,在一个 Vite 项目中,index.html 在项目最外层而不是在 public 文件夹内。这是有意而为之的:在开发期间 Vite 是一个服务器,而 index.html 是该 Vite 项目的入口文件。

Vite 将 index.html 视为源码和模块图的一部分。Vite 解析 <script type="module" src="..."> ,这个标签指向你的 JavaScript 源码。甚至内联引入 JavaScript 的 <script type="module"> 和引用 CSS 的 <link href> 也能利用 Vite 特有的功能被解析。另外,index.html 中的 URL 将被自动转换,因此不再需要 %PUBLIC_URL% 占位符了。

与静态 HTTP 服务器类似,Vite 也有 “根目录” 的概念,即服务文件的位置,在接下来的文档中你将看到它会以 <root> 代称。源码中的绝对 URL 路径将以项目的 “根” 作为基础来解析,因此你可以像在普通的静态文件服务器上一样编写代码(并且功能更强大!)。Vite 还能够处理依赖关系,解析处于根目录外的文件位置,这使得它即使在基于 Monorepo(在版本控制系统的单个代码库里包含了许多项目的代码。这些项目虽然有可能是相关的,但通常在逻辑上是独立的,并由不同的团队维护。) 的方案中也十分有用。

Vite 也支持多个 .html 作入口点的 多页面应用模式,这个知识我们将在后面介绍。

vite 以当前工作目录作为根目录启动开发服务器。你也可以通过 vite serve some/sub/dir 来指定一个替代的根目录。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dgrt.cn/a/389975.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章:

vite --- 搭建开发环境

目录 下载安装和初始化VSCode 安装Node.js yarn 使用 pnpm 安装与使用 搭建第一个Vite项目 使用 PNPM创建项目 项目目录解读 下载安装和初始化VSCode 1、访问网站 Visual Studio Code - Code Editing. Redefined 2、选择平台版本 选择符合自己操作系统的安装包下载完毕…...

疫情时代的宠儿:抗生素行业,今后何去何从

本文由前嗅数据研究院出品 自2020年COVID-19流行开始&#xff0c;已经过去了3年&#xff0c;医药行业发生巨大的变化&#xff0c;各种大中小企业实现了一系列调整。疫情将近结束的时候&#xff0c;让我们回顾分析一下近年来医药领域抗生素行业相关发展。 本研究将从行业现状、…...

多核异构处理器对共享外设和资源的调配方法-飞凌嵌入式

来源&#xff1a;飞凌嵌入式官网www.forlinx.com在多核异构CPU中&#xff0c;多个内核就如同多个大脑&#xff0c;而外设和内存等资源就如同手足&#xff0c;那么多个大脑该如何控制手足才能保证它们正常有序地运行呢&#xff1f;以NXP i.MX8M Plus处理器的A核和M核为例&#x…...

数据结构 第六章 二叉树与树(树和森林)

1 双亲表示法(方便查找双亲) 使用层次遍历的方法将一个树中的所有结点存储到一维数组中 2 孩子表示法(方便查找孩子) 顺序链式存储结构&#xff1a; 1 使用数组来存储所有结点 2 为每一个结点来设置一个单链表 3 单链表链接的是其所有孩子结点的下标3 双亲孩子结合表示法 …...

【Linux】Linux中的特权 | SUID | Linux Capabilities

1.获得特权的两种方式 Linux中&#xff0c;特权任务&#xff08;privileged tasks&#xff09;可以通过两种方式执行&#xff1a; Using SUID Using capabilities 2.关于SUID 通过SUID拿到root权限&#xff0c;参考 https://blog.csdn.net/qq_39441603/article/details/125…...

为什么要使用采购管理软件 采购管理软件推荐

在企业发展道路上&#xff0c;采购部门是一个非常重要的组织&#xff0c;它会直接影响到企业的经济效益。企业在采购活动中&#xff0c;如果还是采用传统线下的采购方式&#xff0c;那么很容易导致采购信息不集中&#xff0c;效率低&#xff0c;出错率高&#xff0c;最终损害企…...

贵州省2023年3月上半年计算机二级考试报名时间

按照教育部教育考试院相关通知精神&#xff0c;为做好我省2023年3月全国计算机等级考试&#xff08;NCRE&#xff09;报名工作&#xff0c;现就有关事项通知如下&#xff1a; 一、考试及报名时间 &#xff08;一&#xff09;考试时间&#xff1a;2023年3月NCRE&#xff08;第…...

中金公司:全面注册制监管规则解读(附97页报告原文pdf下载链接)

省时查报告-专业、及时、全面的行研报告库省时查方案-专业、及时、全面的营销策划方案库【免费下载】2022年12月份热门报告盘点罗振宇2023年跨年演讲PPT原稿吴晓波2022年年终秀演讲PPT原稿推荐技术在vivo互联网商业化业务中的实践.pdf2023年&#xff0c;如何科学制定年度规划&a…...

Javaweb安全——Hessian 反序列化

Hessian 反序列化 Hessian基础 Hessian类似于RMI也是一种 RPC&#xff08;Remote Produce Call&#xff09;的实现。基于HTTP协议&#xff0c;使用二进制消息进行客户端和服务器端交互。 Hessian 自行定义了一套自己的储存和还原数据的机制。对 8 种基础数据类型、3 种递归类…...

Go第 16 章 :goroutine 和 channel

Go第 16 章 &#xff1a;goroutine 和 channel 16.1 goroutine-看一个需求 需求&#xff1a;要求统计 1-9000000000 的数字中&#xff0c;哪些是素数&#xff1f; 分析思路&#xff1a; 传统的方法&#xff0c;就是使用一个循环&#xff0c;循环的判断各个数是不是素数。[很…...

STM32单片机WIFI-APP智能温控空调冷热可调红外遥控

STM32单片机WIFI-APP智能温控空调冷热可调红外遥控 实践制作DIY- GC0127-WIFI-APP智能温控空调 一、功能说明&#xff1a; 基于STM32单片机设计-WIFI-APP智能温控空调 二、功能介绍&#xff1a; STM32F103C系列最小系统板LCD1602显示器红外遥控电路DS18B20温度传感器1个继电…...

RabbitMQ 06 工作队列模式

工作队列模式 工作队列模式结构图&#xff1a; 这种模式非常适合多个工人等待任务到来的场景。任务有多个&#xff0c;一个一个丢进消息队列&#xff0c;工人也有很多个&#xff0c;就可以将这些任务分配个各个工人&#xff0c;让他们各自负责一些任务&#xff0c;并且做的快的…...

SpringBoot中集成Redis实现对redis中数据的解析和存储

场景 SpringBoot中操作spring redis的工具类&#xff1a; SpringBoot中操作spring redis的工具类_霸道流氓气质的博客-CSDN博客 上面讲的操作redis的工具类&#xff0c;但是对于redis的集成并没做细讲。 下面参考若依框架的实现&#xff0c;从中抽离出集成redis的部分实现。…...

2022年河南省高等职业教育技能大赛移动应用开发赛项竞赛方案

2022年河南省高等职业教育技能大赛 移动应用开发赛项竞赛方案 一、赛项名称 赛项名称&#xff1a;移动应用开发 赛项组别&#xff1a;高职组 赛项归属专业大类&#xff1a;电子信息大类 主办单位&#xff1a;河南省教育厅 承办院校&#xff1a;信阳职业技术学院 报到及住…...

【vue3】使用vite构建vue3项目

>&#x1f609;博主&#xff1a;初映CY的前说(前端领域) ,&#x1f4d2;本文核心&#xff1a;使用vite构建vue3项目 【前言】 当我们选择了vue3作为我们项目的开发&#xff0c;就更加的推荐使用vite来对我们的项目进行打包。很简单——这也是开发vue的团队开发的工具&#x…...

SpringBoot+Netty实现TCP客户端实现接收数据按照16进制解析并存储到Mysql以及Netty断线重连检测与自动重连

场景 在SpringBoot项目中需要对接三方系统&#xff0c;对接协议是TCP&#xff0c;需实现一个TCP客户端接收 服务端发送的数据并按照16进制进行解析数据&#xff0c;然后对数据进行过滤&#xff0c;将指定类型的数据 通过mybatis存储进mysql数据库中。并且当tcp服务端断连时&…...

吉林省互联网医院资质申请条件|牌照申请

吉林省互联网医院资质申请条件|牌照申请|长春市|四平市|辽源市|通化市|白山市|松原市|白城市|延边朝鲜族自治州 吉林省互联网医院资质申请条件   一、《医疗机构管理条例》第十六条申请医疗机构执业登记&#xff0c;应具备下列条件&#xff1a;   1.有设置医疗机构批准书&a…...

解决linux如何安装BBRplus,以及安装BBRplus版加速失败的问题

解决linux安装BBRplus版加速失败的问题安装BBRplus的支持环境解决的问题安装BBRplus解决方法总结安装BBRplus的支持环境 Centos 7, Debian 8/9, Ubuntu 16/18 测试通过, 不支持 OVZ。 本文的操作环境是Ubuntu 20.04。 如果不知道自己的系统&#xff0c;使用命令 lsb_release…...

【目标检测】---- 正负样本匹配策略

1 综述 无论是anchor box 还是anchor free&#xff0c;在训练计算类别/前背景损失时都需用到正负样本匹配&#xff0c;目前分为两大类&#xff1a; 第一类 fixed label assignment&#xff0c;常用的主要有MaxIou、ATSS、focos 第二类 dyanmic label assignment&#xff0c;常…...

类初始化过程与对象创建过程

如果有兴趣了解更多相关内容&#xff0c;欢迎来我的个人网站看看&#xff1a;耶瞳空间 面试经常遇见&#xff0c;所以记录一下。 类初始化过程 Java类的初始化过程可以分为以下几个步骤&#xff1a; 加载&#xff1a;当Java程序要使用某个类时&#xff0c;系统会先检查该类…...