草庐IT

vue3/vite 动态路由——动态加载路由

技术点:动态加载路由目录1.main.js 导入编写的js文件import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom"./router";import"./router/permission";constapp=createApp(App)app.use(router)app.mount('#app')2.router/index.js 创建路由import{createRouter,createWebHistory}from"vue-router"conststaticRoutes=[{path:'/login',

如何在Vue3+Vite中使用JSX

JSX介绍JSX(JavaScript和XML),是一个HTML-in-JavaScript的语法扩展,首先在React中被进入。JSX可以很好地描述UI应该呈现出它应有交互的本质形式。JSX是在JavaScript语法上的拓展,因此类似于HTML的代码可以和JS共存。例如:constbutton=  ClickMe 该button常量称为JSX表达式。可以使用它在我们的应用程序中渲染标签。浏览器是无法读取直接解析JSX的。JSX表达式经过(Babel或Parcel之类的工具)编译之后是这样的:React.createElement(  MyButton,  {color:'blue',sha

如何在Vue3+Vite中使用JSX

JSX介绍JSX(JavaScript和XML),是一个HTML-in-JavaScript的语法扩展,首先在React中被进入。JSX可以很好地描述UI应该呈现出它应有交互的本质形式。JSX是在JavaScript语法上的拓展,因此类似于HTML的代码可以和JS共存。例如:constbutton=  ClickMe 该button常量称为JSX表达式。可以使用它在我们的应用程序中渲染标签。浏览器是无法读取直接解析JSX的。JSX表达式经过(Babel或Parcel之类的工具)编译之后是这样的:React.createElement(  MyButton,  {color:'blue',sha

vite中静态资源(css、img、svg等)的加载机制及其相关配置

什么是静态资源?简单来说,我们开发完一个项目后,需要把它打包(一般是dist文件夹),并部署在服务器上。那么,这个打包后的dist文件夹都是静态资源;在我们写项目时,图片、json文件是常见的静态资源,我们的项目的代码发起了一个请求,这个请求得到的资源是动态资源。vite中如何加载静态资源静态资源文件夹与静态资源相关的是vite的静态资源文件夹public目录。public目录应位于你的项目根目录。该目录中的资源在开发时能直接通过/根路径访问到,并且打包时会被完整复制到目标目录的根目录下。引入public中的资源永远应该使用根绝对路径——举个例子,public/icon.png应该在源码中被引

vite中静态资源(css、img、svg等)的加载机制及其相关配置

什么是静态资源?简单来说,我们开发完一个项目后,需要把它打包(一般是dist文件夹),并部署在服务器上。那么,这个打包后的dist文件夹都是静态资源;在我们写项目时,图片、json文件是常见的静态资源,我们的项目的代码发起了一个请求,这个请求得到的资源是动态资源。vite中如何加载静态资源静态资源文件夹与静态资源相关的是vite的静态资源文件夹public目录。public目录应位于你的项目根目录。该目录中的资源在开发时能直接通过/根路径访问到,并且打包时会被完整复制到目标目录的根目录下。引入public中的资源永远应该使用根绝对路径——举个例子,public/icon.png应该在源码中被引

vue3 + vite自定义封装vue + element-ui 表格组件,发布到npm包的全过程。

一前言当我们项目中用到的表格太多的话,就会导致我们的代码量一直增加,所以我们要封装一个公共得组件,通过传参引入来使用,下面这篇文章主要给大家介绍了关于vue3+vite自定义封装vue组件发布到npm包的相关资料,需要的朋友可以参考下。二创建项目npminitvite@latest三创建步骤提示我们要安装create-vite@4.1.0得依赖,选择y起一个组件名字,然后我们选择vue这里我选择的是javascript,然后回车安装完成因为我们需要了element-ui组件库,所以我们要手动安装一下依赖npminstallelement-plus--save四创建组件首先,我们要在src目录下

vite.config.ts常规配置(publicPath)

@vue.confing.js中的publicPath属性变为base属性import{defineConfig}from‘vite’importvuefrom‘@vitejs/plugin-vue’//单文件组件支持/**Vue3单文件组件支持:@vitejs/plugin-vueVue3JSX支持:@vitejs/plugin-vue-jsxVue2.7支持:vitejs/vite-plugin-vue2Vue/importAutoImportfrom‘unplugin-auto-import/vite’//使用后可以不手动引入refreactiveonMounted这些apiimport

Vue3、vite项目页面自适应配置(postcss-plugin-px2rem、amfe-flexible)

文章目录前言:vite如何处理csspostcss项目配置下载相关包配置方案一方案二(备选方案)相关资料链接前言:vite如何处理cssvite天生就支持对css文件的直接处理关于预处理器☀️目前,在工程化开发中,使用最多的应该就是Less、Sass和Stylus。☀️首先,还是介绍一下它们吧。它们有个统一的名字——css预处理器。☀️何为CSS预处理器?应该就是一种可以将你根据它的规则写出来的格式转成css的东西(还是讲的通俗一点)。☀️它们的出现可以说是恰逢其时,解决了css的一些缺憾:1、语法不够强大,不能够嵌套书写,不利于模块化开发2、没有变量和逻辑上的复用机制,导致在css的属性值中

Vue3、vite项目页面自适应配置(postcss-plugin-px2rem、amfe-flexible)

文章目录前言:vite如何处理csspostcss项目配置下载相关包配置方案一方案二(备选方案)相关资料链接前言:vite如何处理cssvite天生就支持对css文件的直接处理关于预处理器☀️目前,在工程化开发中,使用最多的应该就是Less、Sass和Stylus。☀️首先,还是介绍一下它们吧。它们有个统一的名字——css预处理器。☀️何为CSS预处理器?应该就是一种可以将你根据它的规则写出来的格式转成css的东西(还是讲的通俗一点)。☀️它们的出现可以说是恰逢其时,解决了css的一些缺憾:1、语法不够强大,不能够嵌套书写,不利于模块化开发2、没有变量和逻辑上的复用机制,导致在css的属性值中

【vite+vue3.2 项目性能优化实战】使用vite-plugin-cdn-import进行CDN加速优化项目体积

CDN(ContentDeliveryNetwork)即内容分发网络,是一种通过在全球范围内分布式部署服务器来加速网络内容传输的技术。CDN加速的原理是,当用户请求访问某个资源时,CDN会根据用户的地理位置和网络状况,自动选择离用户最近的服务器来响应请求。如果该服务器上已经缓存了该资源,CDN会直接将缓存的资源返回给用户,从而减少了网络传输的时间和带宽消耗。vite-plugin-cdn-import是一个Vite插件,它可以帮助我们在项目中引入CDN资源,从而提高项目的加载速度和性能。使用该插件,我们可以将一些常用的第三方库(如jQuery、Vue、React等)从本地文件中引入改为从CDN