皮蛋很白的博客

参考Vite 预优化依赖包 - 尤大Issue - can’t add less as dependencyDependency Pre-Bundling问题描述当使用 vite 生成项目的时候，如果 less 或 sass 安装到了 dependencies，在运行时会报错并失败。而将它们安装到开发依赖 devDependencies 中就可以正常运行。依赖关系只会预捆绑安装到 dependencies 中的依赖项。这也意味着你应该避免将不需要导入源代码的依赖项放在dependenc

Vite 核心功能静态 Web 服务器编译单文件组件拦截浏览器不识别的模块，并处理HMR当启动 Vite 的时候，首先会将当前项目目录作为静态 web 服务器的根目录。静态 web 服务器会拦截部分请求，例如当请求单文件组件的时候会实时编译，以及处理其他浏览器不能识别的模块（非 JS 模块）。通过 web socket 实现 HMR（暂不模拟）。创建项目首先创建一个基于 Vue 3 的项目，用于测试模拟的 vite-cli 工具。可以使用 vite-app 快速创建：npm

概念Vite 是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具它基于 ECMAScript 标准的原生模块系统（ES Modules）实现目的它的出现是为了解决 webpack 在开发阶段使用 webpack-dev-server 冷启动时间过长，以及 webpack HMR 热更新反应速度慢的问题。使用 Vite 创建的项目，就是一个普通的 Vue 3 的应用。项目基于 Vue CLI 创建的项目少了很多的配置文件和依赖。项目依赖Vite目前只支持 Vue 3.0

Vue.js 3.0 响应式回顾与Vue.js 2.x 的区别Proxy 对象实现属性监听Vue.js 2.x 需要遍历所有属性，转化成响应式多层属性嵌套，在访问属性过程中处理下一级属性Vue 2.x 需要在初始化的时候转化默认监听动态添加的属性Vue 2.x 需要调用 Vue.set()默认监听属性的删除操作Vue 2.x 不能默认监听数组索引和 length 属性Vue 2.x 不能可以作为单独的模块使用Vue 2.x 没有将响应式系统单独提取

Vue 3 官方文档Composition API 示例# 安装 vue3npm i vue@3.0.0示例内容：实时展示鼠标坐标createAppcreateApp 用于创建 Vue 对象，它可以接收一个（组件）选项对象作为参数，和 Vue 2 中给 Vue 构造函数传入的选项一样。选项中的 data 应该是一个函数，不同于 Vue 2。这样统一了 data 的写法<div id="app"> x: {{ position.x}}<br /> y: {{

Vue.js 3.0 源码组织方式为了提升代码的可维护性，Vue 3.0 的源码全部使用 TypeScript 重写大型项目的开发，都推荐使用类型化的语言在编码的过程中，帮助检查类型问题使用 monorepo 方式组织项目结构，把独立的功能模块都提取到不同的 package 中管理。这样每个功能模块，划分都很明确。模块之间的依赖关系也很明确。并且每个功能模块都可以单独测试、发布、使用。packages 目录结构packages 目录下都是独立发布的包（package），可以