近年来，前端技术日新月异，Vite、Vue3、Svelte、SolidJS等框架工具大放异彩，身为一个前端开发，总感觉一刻不学习就要out了。最近使用Vite3+Svelte3来构建封装自定义的WebComponents，开始了艰难的爬坑之旅，本文记录一下：Vite3+Svelte3配置Sass预处理器，在Svelte单文件组件中使用@import导入scss样式文件。Vite+Svelte前言Svelte是一种全新的构建用户界面的方法。传统框架如React和Vue在浏览器中需要做大量的工作，而Svelte将这些工作放到构建应用程序的编译阶段来处理。配置安装svelte-preprocess和
前言：vite是vue3推荐的打包工具，相较于webpack，Vite是基于nativeESmodule——现代浏览器基本已经全部支持了import/export语法。在Vite中,启动本地服务器,是不需要提交编译文件的,而是在浏览器请求对应URL时,再提供文件,实现了真正的路由懒加载,这个比起Webpack节省了不少时间。打包和响应速度提升10倍以上安装项目全局安装vitenpminit@vitejs/app//或yarncreate@vitejs/app检查您的vue-cli版本vue-V若您的版本低于4.0请使用vueupgrade命令更新clivueupgrade我的环境：yarn-v
近年来，前端技术日新月异，Vite、Vue3、Svelte、SolidJS等框架工具大放异彩，身为一个前端开发，总感觉一刻不学习就要out了。最近使用Vite3+Svelte3来构建封装自定义的WebComponents，开始了艰难的爬坑之旅，本文记录一下：Vite3+Svelte3配置Sass预处理器，在Svelte单文件组件中使用@import导入scss样式文件。Vite+Svelte前言Svelte是一种全新的构建用户界面的方法。传统框架如React和Vue在浏览器中需要做大量的工作，而Svelte将这些工作放到构建应用程序的编译阶段来处理。配置安装svelte-preprocess和
前言：vite是vue3推荐的打包工具，相较于webpack，Vite是基于nativeESmodule——现代浏览器基本已经全部支持了import/export语法。在Vite中,启动本地服务器,是不需要提交编译文件的,而是在浏览器请求对应URL时,再提供文件,实现了真正的路由懒加载,这个比起Webpack节省了不少时间。打包和响应速度提升10倍以上安装项目全局安装vitenpminit@vitejs/app//或yarncreate@vitejs/app检查您的vue-cli版本vue-V若您的版本低于4.0请使用vueupgrade命令更新clivueupgrade我的环境：yarn-v
目的：使用vite创建vue3项目记录细节点上篇vue2/vue3+webpack多页面遇到的问题和思考我们使用vue-cli搭建项目都是使用webpack打包的，现在对比一下vite感受一下极速开发体验增：下一篇vite+vue3多页面实战优化续集：eslint+lint-staged+husky+stylelint第一部分：项目基础配置ts相关:lib,references,loadEnv说到vue3，不得不提ts，说到ts，一定要先到官方文档了解tsconfig.json配置的意思，这里我觉得有意思的就是references/lib。我们通过处理一些警告来了解配置：例如你使用了vue自动
目的：使用vite创建vue3项目记录细节点上篇vue2/vue3+webpack多页面遇到的问题和思考我们使用vue-cli搭建项目都是使用webpack打包的，现在对比一下vite感受一下极速开发体验增：下一篇vite+vue3多页面实战优化续集：eslint+lint-staged+husky+stylelint第一部分：项目基础配置ts相关:lib,references,loadEnv说到vue3，不得不提ts，说到ts，一定要先到官方文档了解tsconfig.json配置的意思，这里我觉得有意思的就是references/lib。我们通过处理一些警告来了解配置：例如你使用了vue自动
之前写过几篇Vite的文章，对Vite的概念也有一定的理解了，但理解归理解，仍然觉得很虚，也不知怎么的，这几个概念突然就变成一个这么强大的工具。。。于是，我决定自己手写一遍Vite，这样才有实在感，而且为了往往要考虑兼容各种情况，源码往往会非常复杂，不利于理解。那么这时候，手写一遍，去掉这些兼容逻辑、边界判断等，只关注核心逻辑，就能进一步地加深理解。本文是这个系列的第一篇文章，在本篇文章中，我们先不关注Vite的架构，因为我们得先有个东西出来，对于很多人来说，空谈架构是不行的。因此，我们首先把Vite开发环境的部分功能模仿出来：实现ViteDevServer，并能够对请求的ts文件做编译。下篇
之前写过几篇Vite的文章，对Vite的概念也有一定的理解了，但理解归理解，仍然觉得很虚，也不知怎么的，这几个概念突然就变成一个这么强大的工具。。。于是，我决定自己手写一遍Vite，这样才有实在感，而且为了往往要考虑兼容各种情况，源码往往会非常复杂，不利于理解。那么这时候，手写一遍，去掉这些兼容逻辑、边界判断等，只关注核心逻辑，就能进一步地加深理解。本文是这个系列的第一篇文章，在本篇文章中，我们先不关注Vite的架构，因为我们得先有个东西出来，对于很多人来说，空谈架构是不行的。因此，我们首先把Vite开发环境的部分功能模仿出来：实现ViteDevServer，并能够对请求的ts文件做编译。下篇
现在进入页面开发，组件库选择ElementPlus，考虑到前端写样式每个人的写法都不同，这样维护起来也是比较麻烦的，所以选择Tailwindcss，这样开发过程不用去想很多的类名，不用再去写css代码element-plus按需引入yarnaddunplugin-vue-components--save-dev//vite.config.tsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importAutoImportfrom'unplugin-auto-import/vite'importComponentsfr
现在进入页面开发，组件库选择ElementPlus，考虑到前端写样式每个人的写法都不同，这样维护起来也是比较麻烦的，所以选择Tailwindcss，这样开发过程不用去想很多的类名，不用再去写css代码element-plus按需引入yarnaddunplugin-vue-components--save-dev//vite.config.tsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importAutoImportfrom'unplugin-auto-import/vite'importComponentsfr
