vite专题

uniapp，vite整合windicss

官方文档：https://weapp-tw.icebreaker.top/docs/quick-start/frameworks/hbuilderx 安装： npm i -D tailwindcss postcss autoprefixer# 初始化 tailwind.config.js 文件npx tailwindcss initnpm i -D weapp-tailwindcss# 假

vite是如何实现依赖预构建的，浏览器为什么没有实现从node_modules查找依赖，vite开发环境解决了什么问题

浏览器的esmodule 为什么没有做从node_modules查找依赖项浏览器是基于http请求的，node_modules中依赖项不可控，可能又会依赖很多的包，整个依赖图都需要加载的话很耗性能。 commonjs是运行在服务端的，以file形式读取文件，内部有规避机制。依赖预构建首先vite会找到对应的依赖，然后调用esbuild(对js语法进行处理的一个库)，将其他规范的代码转换

Vite + Vue3 +Vant4出现Toast is not a function

今天写前端的时候出现了这个问题搞了我一会搜集原因: 1:是vant版本的问题，Toast()的方法是vant3版本的写法，而我用的是vant4，vant4中的写法改成了showToast()方法，改正过来 import {showToast} from "vant"; 发现还是报错,说是找不到对应的样式文件 2:Vant 从 4.0 版本开始不再支持 babel-plugin-i

Vue3+vite中使用import.meta.glob

前言: 在vue2中支持require导入模块或文件但是在vue3中已经不支持require导入了,为此vite提供了一个全新的方法import.meta.glob方法来支持批量导入文件 import.meta.glob 匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk。如果你倾向于直接引入所有的模块（例如依赖于这些模块中的副作用首先被应用

超详细！！！electron-vite-vue开发桌面应用之应用更新版本提示（十三）

云风网云风笔记云风知识库当项目应用包更新后应该主动提示用户更新，这是采用electron-updater进行更新提示一、安装依赖 npm i electron-updater 二、配置安装包更新地址 electron-builder.json5添加配置 // 配置安装包更新地址publish: [{provider: "generic",url: "http://w

【React】Vite 构建 React

项目搭建 vite 官网：Vite 跟着文档走即可，选择 react ，然后 ts + swc。着重说一下 package-lock.json 这个文件有两个作用：锁版本号（保证项目在不同人手里安装的依赖都是相同的，解决版本冲突的问题）缓存（依赖的名字 + version + resolved ==> 生成一个 hash 值，然后这个 hash 值会与 integrity 的 hash

vue3+vite按需导入API、组件

Vue API自动导入 1.我们在每个.vue文件中使用vue3的ref、reactive等API都需要导入一次： import {ref, reactive} from "vue";const str= ref(""); 2.使用unplugin-auto-import插件自动导入 2.1安装unplugin-auto-import npm i -D unplugin-auto-i

Vue3+Vite+Echarts 出现Missing semicolon错误

使用的echarts代码如下: import * as echarts from 'echarts';type EChartsOption = echarts.EChartsOption;var chartDom = document.getElementById('main')!;var myChart = echarts.init(chartDom);var option: ECha

vite请求代理结合环境变量配置

一、根目录增加env.development文件 VITE_BASE_URL='/api' 二、填写env.d.ts文件，目的：方便在import.meta.env.这里提示 interface ImportMetaEnv{VITE_BASE_URL:string,} 三、axios文件 export const http = axios.create({baseURL:impo

Vue3 + Ts + Vite项目 websoket封装使用

文章目录一、安装二、封装三、请求地址配置3.1 将接口地址放到 public3.2 引入 ipconfig.js 文件3.3 全局类型声明四、页面使用4.1 引用4.2 注册五、说明一、安装 npm npm install websocket --save-dev pnpm pnpm install websocket --save-dev 二、

vue3+vite+ts如何使用路由

一：安装路由依赖包 npm install vue-router@4 二：创建视图组件在src/views中创建视图组件，例如 src/views/home.vue <template><div>我是Home主页面</div></template> 三：配置路由在src目录中创建一个路由配置文件。如 src/router/index.ts import { createRout

vue3 + vite + setup语法糖使用minIO上传文件

前言：需要使用minio-js插件，原生minio使用vue2框架 npm i minio-js 源码： minio的部署可参考Windows部署MinIO，搭建本地对象存储服务_minio windows部署-CSDN博客注意初始化与作为参数中的 bucketName 需要一致，部署本地minio后需要创建bucket <script setup>import { ElMessa

vite-plugin-svg-icons 用法

vite-plugin-svg-icons 是一个 Vite 插件，用于将本地 SVG 文件转换为可直接在 Vue 组件中使用的图标。这个插件能够自动扫描指定目录下的 SVG 文件，并将其注册为 Vue 组件，从而简化了在 Vue 项目中使用 SVG 图标的过程。 1. 安装插件首先，你需要在项目中安装 vite-plugin-svg-icons 以及相关依赖。 npm install v

Vue3、Vite、Pinia基础学习

Vue3 1、创建一个Vue3应用 <script src="vue.global.js"></script><body><div id="app">{{msg}}<h2>{{person.title}}</h2><h2>{{person.name}}</h2></div><script>// 采用解构的方式可以省略Vue.createApp和Vue.reactive前的Vueconst{c

vite-plugin-ejs:打包时报错：hook is not a function

现象：打包时提示hook is not a function 解决方法1：在node_modules中找到vite-plugin-ejs的index.js，将handler修改为transform：解决方法2：使用vite --version命令查看本机的vite版本，根据插件的写法选择相应的vite版本，如何选择参考原因中的详情原因：由于vite-plugin-e

Vue3加vite使用Cesium绘制图形

Vue3加vite使用Cesium绘制图形 1、项目开发准备 Node版本：16.20.2 1.1创建一个新的工程：my-cesium-app npm create vite@latest my-cesium-app – --template vue 1.2 安装Element Plus npm install element-plus --save// main.jsimpor

vue3+vite配置环境变量实现开发、测试、生产的区分

文章目录一、为什么需要区分 (dev)、测试 (test) 和生产 (prod) 环境二、vue3的项目如何通过配置方式区分不同的环境1、创建不同环境的.env文件2、在不同的.env文件中配置相应的环境变量1）.env.develoment2）.env.test3）.env.production 3、在项目中使用环境变量4、在package.json中定义运行项目的脚本命令三、运行效果

vue使用vite配置跨域以及环境配置详解

vue前后端分离开发，配置代理都是绕不开的话题，下面是vite的代理 server: {proxy: {'/api': {target: 'https://api.hello.com', //代理的服务地址，可以理解为/api等于https://api.hello.comsecure: true, // 配置httpschangeOrigin: true, //允许跨域请求rewrite:

vue3+vite如何获取资源文件夹

步骤很详细，直接上代码可以使用glob获取文件夹内容 *指的是通配符，切记别漏了 const files = import.meta.glob('/public/backgroundImages/*')Object.keys(files).forEach(item => {console.log(item)})const files1 = import.meta.glob('

手把手教你用vite+React18+TS+redux+prettier+eslint+Ant打造企业级前端项目

通过这篇文章你可以学到如何使用使用 webpack 搭建项目如何在 webpack中集成 typescript如何在 webpack 中集成 React Router 和 Redux如何使用 React 的组件库 Ant Design如何在项目中集成 eslint 和 prettier 保证代码质量如何为团队开发专属的项目模板环境依赖版本 node：v18.13.0npm -vvite：

vue3+vite+axios+mock从接口获取模拟数据实战

文章目录一、安装相关组件二、在vite.config.js中配置vite-plugin-mock插件三、实现mock服务四、调用api接口请求mock数据方法一、直接使用axios 请求mock 数据方法二、对axios进行封装统一请求mock数据五、实际运行效果在用Vue.js开发前端应用时通常要与后端服务进行交互，例如通过API接口获取数据，在后端服务接口还没有具备之前，

vue3路由使用createWebHistory部署访问404问题 vite部署访问404问题

vue3路由使用createWebHistory部署访问404问题 vite部署访问404问题开始配置修改vite.config.js修改 router/index.js 路由模式修改Nginx 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上例如 http://www.liyangme.top.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定

Vue3+Vite 解决“找不到模块“@/components/xxx.vue”或其相应的类型声明 ts(2307)”

1. 安装插件 pnpm i @types/node -D 2. 修改vite.config.ts文件 import path from 'path';resolve: {alias: {"@": path.resolve(__dirname,"./src"),},}, 3. 修改tsconfig.app.json文件别人教的都是修改tsconfig.json文件，但是我发现可

前端构建工具 webpack与vite对比

一、webpack构建原理 Webpack的构建过程大致为： 1.从入口文件开始分析依赖， 2.递归解析所有依赖模块，生成依赖图， 3.调用Loader转换文件内容， 4.打包所有模块输出优化后的静态资源。 webpack工作特点： Webpack是一个功能强大的模块打包器，它允许开发者以模块化的方式组织代码，在启动时

vue vite创建项目步骤

1. 创建vue项目 node版本需18以上不然报错 npm init vue@latest 2. 项目配置配置项目的icon配置项目的标题配置jsconfig.json 3. 项目目录结构划分 4.css样式的重置 npm install normalize.css reset.css html {line-height: 1.2;}body,h1,h

Vite 依赖关系与捆绑 - 有些依赖项不能无法安装到 devDependencies

参考 Vite 预优化依赖包 - 尤大Issue - can’t add less as dependencyDependency Pre-Bundling 问题描述当使用 vite 生成项目的时候，如果 less 或 sass 安装到了 dependencies，在运行时会报错并失败。而将它们安装到开发依赖 devDependencies 中就可以正常运行。依赖关系只会预捆绑安