vite
Vue3 Vite H5 手写一个横向展开的多级树列表
最近写h5要做那种稍微复杂一点的树，没找到现成的UI组件库可用，vant的树只有两级不满足，只能自己写 ps. 选框的选择/反选/半选对父子选项的影响还有bug，留到脑子好的时候再优化 效果 代码 框架是Vue3+Vite+Vant4。复选框用的vant的checkbox，应该也可以换别的或者原生。 ......
vite vue3 全局批量注册组件
方式1-使用import.meta.glob import { createApp, defineAsyncComponent } from 'vue' const app = createApp(App); app.mount('#app'); // antd全局使用图标，遍历引入 const i ......
Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例
基于vite4.x+vue3+pinia前端后台管理系统解决方案ViteAdmin。 前段时间分享了一篇vue3自研pc端UI组件库VEPlus。这次带来最新开发的基于vite4+vue3+pinia技术栈搭配ve-plus组件库构建的中后台权限管理系统框架。支持vue-i18n国际化多语言、动态路 ......
vite写jsx语法报错： [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you use tsconfig.json, make sure to not set jsx to preserve.
1.安装vite的jsx包 npm i @vitejs/plugin-vue-jsx --save 2.安装所有依赖 npm i 3.在vite.config.ts中配置 import { defineConfig } from 'vite'; import vue from '@vitejs/pl ......
基于vue和vite的cesium、cesiumNavigation使用--（1）项目构建及引入
系统信息 windows10 LTSC 21H2 vscode：1.77.1 nodejs：18.15.0 npm：9.5.0 版本信息 vue：3.2.47 vite：4.1.4 cesium：1.104.0 vue-router：4.1.6 默认在以上的js相关版本下构建环境，并包括创建vu ......
基于vue3+ts+vite的项目使用‘unplugin-auto-import/vite’插件，自动全局导入api的注意事项
1.首先安装插件 npm install unplugin-auto-import @vitejs/plugin-vue -D 2.安装完成后在vite.congfig.ts中配置，红色部分就是关于插件的基础自动导入部分，这样就可以将vue和router的相关api全局导入了， import A ......
Vue3+Vite 动态修改svg图片颜色
首先需要以组件形式使用svg，请先看这篇文章：vite中加载使用svg 可能是跟原博主使用的svg格式不同，用:style="{ color: color }"修改颜色不生效，因此做了一点修改，此修改适用的svg如下： 在iconfont官网收藏下载的svg格式图标，打开文件删除其中的fill=xx ......
vite打包遇到的问题
Rollup是一个模块打包器，Vite使用它来为生产环境打包和优化您的代码。默认情况下，Rollup假定所有依赖项都是本地的，应该包含在bundle中。然而，在您的bundle中包含大型依赖项会增加应用程序的大小，这可能会减慢用户的加载时间。 为避免这种情况，Rollup提供了排除某些模块不包含在b ......
vite 开发按需引入的组件库 rollup
转载：https://blog.csdn.net/qq_27314517/article/details/128675552 package.json { "name": "...", "private": false, "version": "0.1.9", "main": "./lib/inde ......
VSCode插件 : ESLint Prettier Vite
# 创建项目 pnpm create vite vite-eslint --template vue cd vite-eslint pnpm install pnpm run dev # 安装插件 pnpm i prettier -D # 创建配置文件 echo {}> .prettierrc.js ......
webpack与vite批量导入异同
webpack let modules = require.context('./modules', false, /\.ts$/), modules.keys().forEach((key) => { let item = files(key).default console.log(item) ......
webpack 和 vite 引入文件夹下所有文件对比
webpack 下 引入文件夹下所有文件 const modulesFiles = require.context('../example', true, /\.vue$/) const modules = modulesFiles.keys().reduce((modules, modulePat ......
vite依赖预构建
vite是一个开箱即用的构建工具，不需要做任何额外的配置就可以使用vite来帮你处理构建工作，在默认情况下我们的esmodule去导入成依赖的时候，要么是绝对路径，要么是相对路径，例如下面这个例子 import { count } from './counter.js' 但是在vite中，支持根据依 ......
vite环境变量配置
环境变量就是会根据当前的代码环境变化的变量叫做环境变量。 我们在项目中的代码环境大致分为下面几种： 1、开发环境 2、测试环境 3、预发布环境 4、灰度环境 5、生产环境 我们在项目中通常需要区分线上环境和开发环境的后端地址，例如： 开发环境：http://dev.api/ 生产环境：https:/ ......
vite相较于webpack的优势
现实问题：在浏览器支持ES模块之前，JavaScript并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对“打包”这个概念熟悉的原型：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器运行的文件，例如：webpack、Rollop等工具，他们极大的改善了前端开发者的开发体验。 包含 ......
Vite——如何配置使用sass
前言 如果只是纯粹的使用其实并不需要配置，只需要安装对应的处理器依赖即可👍，如果需要做全局的配置可以查看css预处理选项配置； 文档: css预处理器 | css预处理选项配置 内容 vite 提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有 ......
vue3+vite 解决本地调用时跨域请求
1、config配置文件中，axios默认请求地址；改为""，否则还是请求环境变量中的地址； 2、vite.config.ts文件中做如下配置： server: { open: true, //启动项目自动弹出浏览器 port: 8081, //启动端口 cors: true, proxy: { " ......
【原理揭秘】Vite 是怎么兼容老旧浏览器的？你以为仅仅依靠 Babel？
作者：京东科技 孙凯 一、前言 对前端开发者来说，Vite 应该不算陌生了，它是一款基于 nobundle 和 bundleless 思想诞生的前端开发与构建工具，官网对它的概括和期待只有一句话：“下一代的前端工具链”。 Vite 最早的版本由尤雨溪发布于3年前，经历了3年多的发展，Vite 也已逐 ......
vite import插件
# 安装组件 pnpm install -D unplugin-vue-components unplugin-auto-import # 修改配置文件 // vite.config.ts import { defineConfig } from 'vite' import AutoImport f ......
Vite解决@问题
# 安装组件 pnpm install @types/node // vite.config.ts import path from "path"; export default defineConfig({ plugins: [ ... ], resolve: { alias: { "@": pa ......
《前端构建工具（webpack&vite）- 李立超》笔记
1. 构建工具简介 1.1 模块化 最初我们都使用script标签来引入js，但当一个页面引入的js文件越来越多时，就产生了几个难以避免的问题： 全局变量污染。 变量重名。 js之间的依赖关系复杂，无法保证顺序。 而模块化规范就是为解决以上问题，模块内部的变量实现了在其他模块内共享。而且可以指定哪些 ......
vue3 - 在单独的项目制作自定义组件插件，支持vite【前提不要使用webpack专属语法】
1.背景 与vue2组件不一样，没有那么随意，如果想要支持vite，那么不要使用webpack专属语法，如defide 和 require 等 2.解决 在 package.json 文件 属性 main 配置为插件入口文件位置 ，至于是js还是ts随意 目录 简单做了个组件 入口文件内容如下 im ......
vue3+vite+ts 配置@时vscode报找不到__dirname的问题
vue3+vite+ts 配置@时vscode报找不到__dirname的问题-CSDN博客 原因：path 模块是 node.js 的内置模块，而 node.js 默认不支持 ts 文件的 解决：安装 @type/node 依赖包 npm install @types/node --save-de ......
Vite代理配置不生效问题
1、问题： 在写Vite+vue3.0项目时，配置vite代理，遇到不起效的问题，具体如下： // vite.config.ts proxy: { '/api': ' http://localhost:3000' } 如上简写的写法，代理不生效。 2、解决方案： 查看官网后，改用如下写法生效： // ......
微信公众号跳转小程序 wx-open-launch-weapp，在vue3+vite中使用 (多个问题集锦)
写这篇文章为了解决现在没有⼀个合集 ，所以我参考其他文档， 及自己的测试最后得出完整的方案 1. 公众号后台关联小程序 要求已认证的服务号 ，在服务号中关联要跳转的小程序 配置 JS接口安全域名 2. 调用wx.config配置‘wx-open-launch-weappʼ标签 3. 修改微信本来的内 ......
基于 vue3 + vite + typeScript + Element-Plus + pinia + mock ... 从 0 到 1 搭建后台管理系统完整教程
项目说明 代码仓库地址 https://github.com/caix-1987/vue3-vite-typescript-elementplus-pinia 项目预览地址 https://caix-1987.github.io/vue3-vite-typescript-elementplus-pi ......
解决vite使用alias引入图片不显示的问题
参考： https://juejin.cn/post/7009441745301667853 方法一：配置alias //app.vue <img src="/images/logo.png" alt="" /> //vite.config.js import { defineConfig } fr ......
TS+vite+Vue3打包报错
报错信息见上图 根据要求进行修改操作 由于vite将ts的配置文件tsconfig.json隐藏,所以在暴露出来的tsconfig.json中进行修改 根据依赖继承，能够找到现在的js版本为：ES2016 在暴露出来的tsconfig.json中增加： 再次打包后，接着代码出现不识别HTML和win ......