vite three.js 有白边框

2024-11-02

Three.js之绘制物体的边框及修改lineWidth

本博文主要记录如何使用three.js绘制物体的边框及修改其lineWidth.three.js是个技术点比较多,查询资料又比较少的框架,单单就这个修改lineWidth就是一个坑.先放一个动态的效果图,需要的小伙伴可以看下相关实现. 开始的时候,我是使用LineSegments来实现的,线的材质使用LineBasicMaterial,但是发现无论linewidth设置多少,呈现出来的都是1 因此修改实现方式,这里直接可看懂的代码: // 引入新的线的材质类 import { LineMater

vite2 + vite.config.js 比较坑的环境变量，vite2模式的使用

想在vite.config.js 里面判断一下环境,看看是不是开发环境,查了一下官网(https://cn.vitejs.dev/guide/env-and-mode.html),说是可以使用 import.meta.env.DEV . 但是在 vite.config.js 里面直接写 import.meta.env.DEV 的时候 ,运行时却报错了. 各种查了之后,发现要折腾一下. import { defineConfig, loadEnv } from 'vite' import vue

Ionic2使用百度地图API(JS)出现白屏解决方案

最近自学ionic2,写了一个内嵌百度地图JS的demo,实际跑起来之后出现了大家常见的白屏问题.. 最初的实现是这样的: 首先主页内嵌了一个百度地图插件 <div id="Bmap" style="width: 100%;height: 100%"> 之后menu中一个引导的子页面也内嵌了一个百度地图 <div id="Bmap" style="width: 100%;height: 100%"> 然

JS - 鼠标经过边框旋转

*右侧为鼠标经过时效果. 下载地址:http://www.lanrentuku.com/js/tupian-1200.html

js实现元素边框闪烁功能

<body> <input type="text" value="test" onclick="flash(this)"> </body> <script> function flash(elem){ var elem = typeof elem === 'string' ? document.getElementById(elem) : elem, // 参数可接收id或者元素本身 borderC

【翻译】探究Ext JS 5和Sencha Touch的布局系统

原文:Exploring the Layout System in Ext JS 5 and Sencha Touch 布局系统是Sencha框架中最强大和最有特色的一个部分. 布局要处理应用程序中每一个组件的尺寸和位置.在Ext JS和Sencha Touch直接有很多相似之处.尤其是如今Ext JS 5開始支持平板更是如此.以下让我们来探讨一下布局系统是怎样跨域Sencha框架进行工作的. 布局简史最主要的HTML一直都缺乏一个严格定义的布局系统. 很多年来,因为CSS实现的差距.开发跨浏

antd+react项目迁移vite的解决方案

antd+react+webpack往往是以react技术栈为主的前端项目的标准组合,三者都有成熟的生态和稳定的表现,但随着前端圈的技术不断革新,号称下一代构建平台vite2的发布,webpack似乎不那么香了,为什么这么说呢,因为vite太快了.经过一段时间的尝试,决定在项目中把webpack替换成vite试试,遂写成本文分享给大家. Vite是什么作为本文的主角,首先简单介绍一下vite这个构建工具,该工具是尤雨溪推出的[下一代前端开发和构建工具],vite其实也不是一个新的工具,早在一年

vite插件-自动生成vue组件文档

特点支持热更新快速启动,依赖于 vite,无需另起服务自动生成组件导航 ui 采用了vant-ui的样式核心方法覆盖率达到了 92.86% 使用 yarn add vite-plugin-vue-docs -D // vite.config.js import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import vueDocs from "vite-p

收下这7款插件，让你在使用 Vite 的时候如虎添翼

相信已经有不少小伙伴已经开始用 Vue3 做开发了,也一定使用上 Vite 了,而我今天要介绍的这几款插件,能让你在使用 Vite 做开发时如虎添翼. vite-plugin-restart 通过监听文件修改,自动重启 vite 服务. 最常用的场景就是监听 vite.config.js 和 .env.development 文件,我们知道,修改 vite 配置文件和环境配置文件,是需要重启 vite 才会生效,通过这个插件,我们将从反复重启中解脱出来. unplugin-vue-compone

Vite详解

vite 目录一.推荐两个插件插件 Volar Vue 3 Snippets 二.vite简介优势分析浏览器支持三.vite搭建vue3.x项目 1.创建项目 2.集成Vue-Router 3.集成vuex 4.集成Eslint 5.集成element-plus 6.移动端适配四.vite.config.js的配置 1. 配置alias起别名 2.proxy代理配置 3.按需引入element plus 五.Webpack & Vite 原理对比 webpack慢的原因 vite实现

Vite插件开发纪实：vite-plugin-monitor（上）

背景最近在webpack项目里接入了Vite(dev mode),为开发提效.效果是真的猛. 项目启动速度提升70%-80%,HMR直接碾压webpack dev server 为了更加精准的计算收益,就需要将Vite启动相关的指标进行上报(启动时间,HMR,页面加载等等时间) 为此就要通过开发插件收集这些信息,然后通过埋点上报sdk上报到数据分析的平台遇到的问题通过查阅官方文档并未找到相关的钩子直接获取到这些指标但在开发的时候添加 --debug就能很详细的看到所有资源的处理时间,HM

Vite插件开发纪实：vite-plugin-monitor（下）

前言上一篇介绍了Vite启动,HMR等时间的获取. 但各阶段详细的耗时信息,只能通过debug的日志获取本文就实现一下debug日志的拦截插件效果预览 --debug做了什么项目启动指令 vite --debug 在源码中搜索 --debug,可以在vite/packages/vite/bin/vite.js文件中定位到目标代码 const debugIndex = process.argv.findIndex((arg) => /^(?:-d|--debug)$/.test(arg))

Vite启动后提示Network: use `--host` to expose

当使用 Vite 构建项目后,发现只有localhost + 端口服务,没有 IP + 端口服务. 运行npm run dev,终端提示Vite启动后提示Network: use '--host' to expose. package.json中脚本配置 "scripts": { "dev": "vite", "build": "vite build", "serve": "

webpack 项目接入Vite的通用方案介绍(上)

愿景希望通过本文,能给读者提供一个存/增量项目接入Vite的点子,起抛砖引玉的作用,减少这方面能力的建设成本在阐述过程中同时也会逐渐完善webpack-vite-serve这个工具读者可直接fork这个工具仓库,针对个人/公司项目场景进行定制化的二次开发背景在当下的业务开发中处处可见webpack的身影,大部分的业务项目采用的构建工具也都是它. 随着时间的推移,存量老项目体积越来越大,开发启动(dev)/构建(build) 需要的时间越来越长.针对webpack的优化手段越来越有限.

vite的项目，使用 rollup 打包的方法

官网资料构建生产版本--库模式 https://cn.vitejs.dev/guide/build.html#library-mode 详细设置 https://cn.vitejs.dev/config/#build-lib 技术栈 vite rollup 打包方式 vue-cli 自带的是 webpack 的打包方式,打出的包体积有点大,而 vite 自带的是 rollup 的打包方式,这种方式打包的体积就非常小,官网也有一些使用说明,所以学会之后还是比较很方便的. vite 的库项目可以分

vue-cli3 vue2 保留 webpack 支持 vite 成功实践

大家好! 文本是为了提升开发效率及体验实践诞生的. 项目背景: 脚手架:vue-cli3,具体为 "@vue/cli-service": "^3.4.1" 库:vue2,具体为:"vue": "2.6.12" 备注:没有 typescript , 非 ssr 痛点:随着时间的推移.业务的不断迭代,依赖.功能.代码越来越多,项目本地启动比较慢.开发热更新比较慢. 改进目标:保留原来的 webpack, 支持 vite.并且尽可能

用 vite 构建项目，同时支持微前端

得益于 esbuild 的超高性能,vite 在诞生之初就备受关注,且一直保持着活跃的开发迭代.截至目前,vite 已经迭代到了 2.7.10 版本,各方面也基本具备了在生产使用的条件.这段时间,我在项目中尝试了使用 vite 进行打包构建,本文就是这次构建的过程记录. 基础配置首先使用vite 官方脚手架生成项目. yarn create vite vite-demo --template react-ts 上面这行命令使用 react-ts 模板创建了一个叫 vite-demo 的项目.由

vite初使用随记

vite的安装按照官网文档来看,并不难. 先检查自己电脑node的版本与npm的版本/yarn的版本可以直接用yarn安装,yarn create vite 这是最原始的安装,即类似于安装vue-cli一样会出现选项配置. 官方文档还给出了其他更便捷的安装方法,有需求可以去看网址:https://vitejs.cn/guide/#scaffolding-your-first-vite-project 但与vue脚手架不同的是,vite不在带有vuex的安装与router的安装(需要自行安装

vite创建vue3项目 vueconfig配置及其备注

import vue from '@vitejs/plugin-vue' const path = require('path') // vite.config.js # or vite.config.ts console.log(path.resolve(__dirname, './src')) module.exports = { plugins: [vue()], "resolve.alias": { // 键必须以斜线开始和结束 '/@/': path.resolve(__di

vue3 vite 系统标题系统名称统一配置

想要统一配置系统名称或者其他的,需要在vue3中使用 vite 的环境变量 vite 的环境变量需要创建两个文件(和 vite.config.js 文件同一目录) .env.development 这个文件在开发模式中使用 .env.production 这个文件在生产模式中使用在 .env.development 文件中添加系统标题 (以开发模式为例) #.env.development VITE_APP_TITLE=系统名称在 vue 文件中调用 #login.vue <templ

部署 Vite 静态网站到 Gitee Pages

开启仓库的 Gitee Pages 服务,部署目录 dist/: Vite 构建 build,输出到 dist 文件:取消 .gitignore 中的 dist: Vite preview 查看静态网站是否无问题: 推送本次提交到仓库: 配置 vite.config.js: import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default defineC

vite three.js 有白边框

热门专题