npm安装vite Npm安装opencv；
十分钟快速搭建个人博客、文档网站!
VitePress 简介：VitePress 是一款专为构建快速、以内容为中心的网站而设计的静态站点生成器。它基于 Vue.js，支持使用 Markdown 编写内容，并提供了现代化的开发体验和自定义主题的能力。特点：专注于内容，轻松使用 Markdown 创建漂亮的文档站点。
Baklib以其简约美观的界面、便捷的操作流程和丰富的功能特点，成为了搭建个人博客的优选工具。通过Baklib，用户可以在十分钟内快速搭建出一个精美且独特的博客站点，并轻松实现内容的创作、编辑和分享。
开启Pages服务：在托管平台中开启Pages服务，即可访问个人博客。效果展示与调整 部署完成后，可以访问个人博客查看效果。根据个人喜好，可以在Hexo和主题的官方文档中找到更多调整和定制的选项，进一步优化博客的样式和功能。
在vite+vue3开发中,根据官网,添加jsx/tsx插件
1、在Vite+Vue3开发中，根据官网添加JSX/TSX插件的步骤如下： 安装插件： 使用npm命令安装@vitejs/pluginvuejsx插件，命令为npm i @vitejs/pluginvuejsx D。 插件功能： JSX：专为React设计的JavaScript语法扩展，便于创建UI组件和控制逻辑。
2、在进行Vite + Vue3项目中使用jsx/tsx语法时，首先需要借助Vite官方提供的插件：@vitejs/plugin-vue-jsx。安装步骤如下： 执行安装命令：在项目根目录中运行npm或yarn安装@vitejs/plugin-vue-jsx插件。 完成安装后，在package.json文件中应能查看到已安装的插件。
3、安装必要的插件 如果你在使用Vite构建工具，需要安装@vitejs/pluginvuejsx插件来支持JSX语法。 配置项目 配置Vite以使用安装的插件。这通常在vite.config.js文件中进行。 编写JSX/TSX组件 在.vue文件中使用TSX：将标签的lang属性设置为tsx，并在setup函数中返回TSX模板。
vite+vue3项目中使用jsx/tsx语法
执行安装命令：在项目根目录中运行npm或yarn安装@vitejs/plugin-vue-jsx插件。 完成安装后，在package.json文件中应能查看到已安装的插件。 配置Vite项目，需在vite.config.ts文件中加入插件的使用，确保jsx/tsx语法在项目中生效。
在Vue3中使用JSX/TSX，可以按照以下步骤进行： 安装必要的插件 如果你在使用Vite构建工具，需要安装@vitejs/pluginvuejsx插件来支持JSX语法。 配置项目 配置Vite以使用安装的插件。这通常在vite.config.js文件中进行。
首先，如果你在Vite项目中想用JSX，需要安装插件@vitejs/plugin-vue-jsx，配置好后即可开始。在.vue文件中，将script的lang设置为tsx，返回setup函数中的TSX模板，或直接将文件扩展名改为.tsx。例如，你将看到一个简单的Hello World组件显示在页面上。
安装插件： 使用npm命令安装@vitejs/pluginvuejsx插件，命令为npm i @vitejs/pluginvuejsx D。 插件功能： JSX：专为React设计的JavaScript语法扩展，便于创建UI组件和控制逻辑。在Vue3中，通过该插件同样可以利用JSX语法编写组件。
vue读取excel数据、将json数据导出到excel文件中
安装命令：npm install filesaver 或 yarn add filesaver。读取Excel数据：创建一个名为excelReaderFile.js的文件，并编写读取Excel数据的函数。使用fetch函数获取Excel文件，并通过XLSX.read函数将其解析为工作簿对象。
配置vite：在vite.config.js中，添加`transform： { require： [vite-plugin-require-transform] }`到构建配置中。接下来，我们来看代码实现。在你的项目中，创建一个名为fileHandle.vue的文件，用于读取和导出excel数据。
在组件中，当用户点击「导出至 Excel」按钮时，执行一个函数。该函数使用 xlsx 库将 JSON 数据转化为 Excel 格式。使用 Blob 对象和 URL.createObjectURL 方法创建一个可下载的 Excel 文件链接。触发浏览器的下载行为，使用户能够下载生成的 Excel 文件。验证功能：更新组件代码后，运行 Vue 项目。
利用xlsx库提供的方法，将JSON数组数据转换为Excel表格并导出。这种方式适用于需要将后端返回的数据或用户输入的数据导出为Excel文件的场景，特别适用于数据量较大的情况。创建组件并集成导入与导出功能 在Vue或React组件中，添加按钮用于触发导出操作，并在用户界面展示数据导入与导出的提示信息。
vite打包原生js最简单的方法
1、使用Vite命令进行打包：在项目的根目录下，打开终端或命令行工具。运行npm run build命令来打包JavaScript库。Vite将根据你在vite.config.js文件中的配置，将指定的入口文件打包成多种格式的库文件，并输出到dist目录下。验证打包后的库文件：打包完成后，检查dist目录下生成的库文件。确保这些文件存在且内容正确。你可以在其他项目中引入并使用这个库来验证其功能是否如预期。
2、在项目根目录下，通过终端运行npm run build命令，Vite会将项目打包为静态文件，并生成一个dist文件夹。选择合适的服务器：根据需求选择自己搭建的服务器或使用云服务器提供商的服务，如阿里云、腾讯云等。上传文件到服务器：使用FTP上传、SSH上传或云平台提供的工具，将dist文件夹上传到服务器的指定目录。
3、首先，将 ant-design-vue 从全量引入改为按需引入。修改前后结果对比显示，两个主要 js 文件大小有所减少，但依然较大。进一步分析发现，index.js 包含了 echarts，故尝试将 echarts 分离打包。
4、解决办法是将打包生成的文件转换为无模块化格式。具体步骤包括安装@vitejs/plugin-legacy插件、配置vite.config.js、创建tofile.mjs文件替换module相关关键词、打包dist文件，执行tofile.mjs脚本后检查index.html页面是否正常显示。接下来，参考Electron官网示例进行操作。
5、引入模块化体系 模块化体系是解决Vite打包碎片化问题的有效手段。通过将项目的代码依据业务特点进行拆分，形成若干个模块的组合，每一个模块都可以包含页面、组件、配置、语言、工具等资源。
6、按需引入 antdesignvue 优化点：将 antdesignvue 从全量引入改为按需引入。 效果：可以显著减少打包后的文件体积。分离 echarts 打包 优化点：分析打包文件，发现 index.js 包含了 echarts，尝试将 echarts 分离打包。 操作：通过修改 vite.config.ts 文件实现 echarts 的单独分离。
