从零开始搭建vite开发环境

准备

nodejs 18
pnpm
https://vitejs.cn/

开始

pnpm init
pnpm add -D vite

在这里插入图片描述
在这里插入图片描述
新建index.html

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>从零开始搭建vite环境</title>
</head>
<body><h1>Hello World</h1>
</body>
</html>

修改package.json

{"name": "vitestu01","version": "1.0.0","description": "","main": "index.html","scripts": {"dev": "vite","build": "vite build"},"keywords": [],"author": "","license": "ISC","devDependencies": {"vite": "^5.3.3"}
}

输入pnpm run dev
在这里插入图片描述

新建src目录

src目录下新建main.js,安装jquery插件

pnpm add jquery

修改index.html

<script type="module" src="/src/main.js"></script>

修改package.json,增加type

"type": "module",

在这里插入图片描述
如果直接访问js则会报错
在这里插入图片描述

安装scss

pnpm add -D sass

src下新建scss文件夹,该文件夹下新建index.scss

$font-color:#f00;body{h1{color: $font-color;}
}

修改main.js

import $ from 'jquery';
import '@/scss/index.scss';$(function (){console.log("初始化成功");
})

新增vite.config.js

import $ from 'jquery';
import '@/scss/index.scss';$(function (){console.log("初始化成功");
})

在这里插入图片描述
如果想定义全局变量,可以在scss下新建global.scss

$bg-color:#0f0;

修改index.scss

$font-color:#f00;body{h1{color: $font-color;background: $bg-color;}
}

修改vite.config.js

import { defineConfig } from 'vite'
// path报错安装 @types/node
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [],resolve: {alias: {'@': path.resolve('./src'),},},// scss全局变量的配置css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "@/scss/global.scss";'}}}
})

重新启动编译即可
在这里插入图片描述

打包

pnpm run build

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
jquery和自己写的代码都一块打包了,html中单独引入jQuery cdn链接即可

import { defineConfig } from 'vite'
// path报错安装 @types/node
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [],resolve: {alias: {'@': path.resolve('./src'),},},// scss全局变量的配置css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "@/scss/global.scss";'}}},build:{rollupOptions:{external: ['jquery'],output: {globals: {jquery: 'jQuery',},},}}
})

在这里插入图片描述
然后打包即可
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ArcGis将同一图层的多个面要素合并为一个面要素

这里写自定义目录标题 1.加载面要素的shp数据 2.点击菜单栏的地理处理–融合&#xff0c;如下所示&#xff1a; 3.将shp面要素输入&#xff0c;并设置输出&#xff0c;点击确定即可合并。合并后的属性表就只有一个数据了。

【模块化与包管理】:解锁【Python】编程的高效之道

目录 1.什么是模块&#xff1f; 2. 模块的导入过程 3. 理解命名空间 4. import语句的多种形式 5. 模块的执行与重新导入 6. 包&#xff08;Package&#xff09; 7. sys模块和os模块 sys模块 常用属性 示例&#xff1a;使用sys模块 os模块 常用功能 示例&#xff1…

C++ 【 PCL 】点云添加随机均匀噪声及源代码

PCL向点云添加均匀随机噪声&#xff1a; #include <iostream> #include <pcl/io/pcd_io.h> #include <pcl/point_types.h> #include <pcl/common/random.h>int main() {// 加载点云文件pcl::PointCloud<pcl::PointXYZ>::Ptr cloud(new pcl::Poi…

android deep links即scheme uri跳转以及googlePlay跳转配置

对于googlePlay的Custom URL就是googlePlay上APP网址&#xff1a; https://play.google.com/store/apps/details?idcom.yourapp如果是国内一些应用&#xff0c;则考虑market://包名等方式&#xff0c;自行百度。 对于Android URI Scheme&#xff1a; 首先需要在Manifest xm…

Win11常用快捷键整理,带你重启电脑体验(动图演示)

名人说&#xff1a;人生到处知何似&#xff0c;应似飞鸿踏雪泥。 ——苏轼《和子由渑池怀旧》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、常用快捷键1、Win X2、Win Q3、Win E4、Win T5、Win Tab6、W…

国际网课平台Udemy上的亚马逊云科技AWS免费高分课程和创建、维护EC2动手实践

亚马逊云科技(AWS)是全球云行业最&#x1f525;火的云平台&#xff0c;在全球经济形势不好的大背景下&#xff0c;通过网课学习亚马逊云科技AWS基础备考亚马逊云科技AWS证书&#xff0c;对于找工作或者无背景转行做AWS帮助巨大。欢迎大家关注小李哥&#xff0c;及时了解世界最前…

Go 中的类型推断

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

商城源码从哪里找

商城源码可以从多个渠道获取&#xff0c;具体包括开源平台、专门的商城系统提供商、代码分享网站等。不同的渠道可能适合不同的需求和技术水平。下面将详细分析各个渠道的特点及优缺点&#xff1a; 开源平台 Gitee&#xff1a;Gitee是一个知名的代码托管平台&#xff0c;提供…

Git本地仓库的搭建与使用

目录 一、前言 二、Linux下搭建 git 仓库 三、Windows下搭建 git 仓库 一、前言 做项目时&#xff0c;我们常常需要将自己的代码进行托管&#xff0c;但有时候 Github 的速度属实叫人流泪。有的人会选择 Gitee 等进行托管代码&#xff0c;这当然是可以的。那如果没有其他代码…

怎么判断自己是否适合学习PMP?

判断自己是否适合学习PMP项目管理专业人士认证&#xff0c;可以从以下几个方面进行考量&#xff1a; 1、职业发展需求&#xff1a; 如果您在项目管理领域工作&#xff0c;或计划未来从事相关工作&#xff0c;PMP认证能显著提升您的竞争力。 对于项目经理、产品经理、技术领导…

LabVIEW中使用 DAQmx Connect Terminals作用意义

该图展示了如何在LabVIEW中使用 DAQmx Connect Terminals.vi 将一个信号从一个源端口连接到一个目标端口。这种处理有以下几个主要目的和作用&#xff1a; 同步操作&#xff1a; 在多任务、多通道或多设备系统中&#xff0c;可能需要不同的组件在同一时刻执行某些操作。通过将触…

【LLM大模型】机器学习导论(西瓜书)[推荐阅读]

哈喽啊大家&#xff0c;今天又来给大家推荐一本机器学习方面的书籍<机器学习西瓜书>。本书作为该领域的入门教材&#xff0c;在内容上尽可能涵盖机器学习基础知识的各方面。 为了使尽可能多的读者通过本书对机器学习有所了解&#xff0c;作者试图尽可能少地使用数学知识…

李良济“小儿推拿妈妈班”圆满结课,以中医智慧守护儿童健康成长!

孩子生场病&#xff0c;妈妈半条命&#xff01;作为妈妈最害怕的就是孩子生病&#xff0c;自己又无能为力&#xff01; 为了帮助妈妈们&#xff0c;正确应对孩子健康问题&#xff0c;日常生活中科学帮助孩子提升体质少生病&#xff01; 参加此次课程的&#xff0c;不仅有妈妈&a…

【开源】基于RMBG的一键抠图与证件照制作系统【含一键启动包】

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

【Python】已解决:(paddleocr导包报错)ModuleNotFoundError: No module named ‘paddle’

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决&#xff1a;&#xff08;paddleocr导包报错&#xff09;ModuleNotFoundError: No module named ‘paddle’ 一、分析问题背景 近日&#xff0c;一些使用PaddleOCR库进行文字…

windwos下mysql的udf提权

MySql UDF提权介绍 UDF(User Defined Functions)即用户自定义函数&#xff0c;通过这种方式可以实现命令执行&#xff0c;其原理是通过lib_mysqludf_sys提供的函数可以执行系统命令 攻击场景:同之前利用日志写WebShell的场景&#xff0c;即堆叠注入或MySQL终端权限或类似phpMy…

关于《中国PostgreSQL考试认证体系》通知

为响应国家大数据战略发展的号召&#xff0c;进一步推动PostgreSQL开源数据库在国内的快速发展&#xff0c;加强PostgreSQL 数据库相关人才培养&#xff0c;由政府相关部门批准发起&#xff0c;组成中国PostgreSQL认证考试中心及PostgreSQL 中国大学&#xff0c;旨在共同规范和…

【保姆级介绍下C语言中的运算符的优先级】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

必看 | 最简单获取IP地址专用SSL证书的申请方法

申请IP地址专用的SSL证书并不像传统SSL证书那样普及&#xff0c;不是所有服务商都提供IP地址的SSL证书&#xff0c;因此需要仔细选择合适的服务商和流程进行操作申请&#xff0c;以此来实现IP地址访问的https。以下是最简单的IP地址专用SSL证书申请方法&#xff1a; 一、准备 …

防火墙组网

一、实验拓扑图 二、实验要求 1、DMZ区内的服务器&#xff0c;办公区仅能在办公时间内&#xff08;9&#xff1a;00-18&#xff1a;00&#xff09;可以访问&#xff0c; 生产区的设备全天可以访问。 2、生产区不允许访问互联网&#xff0c;办公区和游客区允许访问互联网。 3、办…