├── asset ├── info.md ├── one-piece.png ├── vue3-news.png ├── pretty-cat.png ├── vue3-news-back.png ├── vue3-news-logo.png ├── 1542383573_912979.png ├── Vue3-CheatSheet01.jpeg └── Vue3-CheatSheet02.jpeg ├── docs ├── robots.txt ├── favicon.ico ├── img │ └── icons │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── mstile-150x150.png │ │ ├── apple-touch-icon.png │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon-60x60.png │ │ ├── apple-touch-icon-76x76.png │ │ ├── apple-touch-icon-120x120.png │ │ ├── apple-touch-icon-152x152.png │ │ ├── apple-touch-icon-180x180.png │ │ ├── msapplication-icon-144x144.png │ │ ├── android-chrome-maskable-192x192.png │ │ ├── android-chrome-maskable-512x512.png │ │ └── safari-pinned-tab.svg ├── manifest.json ├── precache-manifest.dd9899199106e5b118aa6311d61a57bf.js ├── service-worker.js ├── index.html ├── css │ └── index.1ba5327a.css └── js │ ├── index.7e39d82e.js │ └── index.7e39d82e.js.map ├── .gitattrbutes ├── Vue.js 3.0 PPT ├── 167182bd1f34f3de.png ├── 167182d9d8b061e9.png ├── 167182dadc57b780.png ├── 167182dbd99ed7be.png ├── 167182e2e1ac043f.png ├── 167182e6c39000f5.png ├── 167182ea33a49f7c.png ├── 167182ef6f8f846d.png ├── 167182f22bf8685f.png ├── 167182f3448416b2.png ├── 167182f3fc15c1c9.png ├── 167182f536e4b2d1.png ├── 167182f61c6e9251.png ├── 167182f6dfc137c6.png ├── 167182fb3552572a.png ├── 167182fce1e2f1ca.png ├── 167182fdfa2c2c44.png ├── 167182fecd0df754.png ├── 167182ffc513816a.png ├── 167183010257b1a8.png ├── 1671830338fa4a41.png ├── 1671830450313bc6.png ├── 16718305ebbdd2f6.png ├── 16718306b592ede8.png ├── 16718307cb08881d.png ├── 16718308c5ca2585.png └── 16718309bbdf0c68.png ├── .gitignore ├── LICENSE ├── Vue 3.6 在核心架构与开发工具层面新增的特性.md ├── Vue 3.6 在性能优化和开发体验上实现了多项突破性升级.md ├── 适配Vue3.6版本，推荐优先学习官方文档与新特性解析‌.md ├── 2025年Vue3生态体系的核心工具与组件库分类整理.md ├── 2025基于Vue3的后台管理系统开发案例.md ├── 2025年Vue3主流实战项目案例与实现方案.md ├── Vue 3.6 的 ‌Alien Signals 核心引擎.md ├── 2025年Vue3实战项目开发的核心案例与技术方案.md ├── 2025年Vue3热门UI组件库.md ├── 2025年GitHub热门Vue3开源项目.md └── Vue3 基础性能优化技巧（2025 年最新实践）.md /asset/info.md: -------------------------------------------------------------------------------- 1 | images list 2 | -------------------------------------------------------------------------------- /docs/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /asset/one-piece.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/asset/one-piece.png -------------------------------------------------------------------------------- /asset/vue3-news.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/asset/vue3-news.png -------------------------------------------------------------------------------- /asset/pretty-cat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/asset/pretty-cat.png -------------------------------------------------------------------------------- /asset/vue3-news-back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/asset/vue3-news-back.png -------------------------------------------------------------------------------- /asset/vue3-news-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/asset/vue3-news-logo.png -------------------------------------------------------------------------------- /.gitattrbutes: -------------------------------------------------------------------------------- 1 | *.js lingist-language=vue 2 | *.html lingist-language=vue 3 | *.css lingist-language=vue 4 | -------------------------------------------------------------------------------- /asset/1542383573_912979.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/asset/1542383573_912979.png -------------------------------------------------------------------------------- /asset/Vue3-CheatSheet01.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/asset/Vue3-CheatSheet01.jpeg -------------------------------------------------------------------------------- /asset/Vue3-CheatSheet02.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/asset/Vue3-CheatSheet02.jpeg -------------------------------------------------------------------------------- /docs/img/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/docs/img/icons/favicon-16x16.png -------------------------------------------------------------------------------- /docs/img/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/docs/img/icons/favicon-32x32.png -------------------------------------------------------------------------------- /docs/img/icons/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/docs/img/icons/mstile-150x150.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182bd1f34f3de.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182bd1f34f3de.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182d9d8b061e9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182d9d8b061e9.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182dadc57b780.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182dadc57b780.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182dbd99ed7be.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182dbd99ed7be.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182e2e1ac043f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182e2e1ac043f.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182e6c39000f5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182e6c39000f5.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182ea33a49f7c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182ea33a49f7c.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182ef6f8f846d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182ef6f8f846d.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182f22bf8685f.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182f22bf8685f.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182f3448416b2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182f3448416b2.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182f3fc15c1c9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182f3fc15c1c9.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182f536e4b2d1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182f536e4b2d1.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182f61c6e9251.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182f61c6e9251.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182f6dfc137c6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182f6dfc137c6.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182fb3552572a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182fb3552572a.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182fce1e2f1ca.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182fce1e2f1ca.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182fdfa2c2c44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182fdfa2c2c44.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182fecd0df754.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182fecd0df754.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167182ffc513816a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167182ffc513816a.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/167183010257b1a8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/167183010257b1a8.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/1671830338fa4a41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/1671830338fa4a41.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/1671830450313bc6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/1671830450313bc6.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/16718305ebbdd2f6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/16718305ebbdd2f6.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/16718306b592ede8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/16718306b592ede8.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/16718307cb08881d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/16718307cb08881d.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/16718308c5ca2585.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/16718308c5ca2585.png -------------------------------------------------------------------------------- /Vue.js 3.0 PPT/16718309bbdf0c68.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/Vue.js 3.0 PPT/16718309bbdf0c68.png -------------------------------------------------------------------------------- /docs/img/icons/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/docs/img/icons/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/img/icons/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/docs/img/icons/android-chrome-192x192.png -------------------------------------------------------------------------------- /docs/img/icons/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/docs/img/icons/android-chrome-512x512.png -------------------------------------------------------------------------------- /docs/img/icons/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/docs/img/icons/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /docs/img/icons/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/docs/img/icons/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /docs/img/icons/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/docs/img/icons/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /docs/img/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/docs/img/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /docs/img/icons/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/docs/img/icons/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /docs/img/icons/msapplication-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/docs/img/icons/msapplication-icon-144x144.png -------------------------------------------------------------------------------- /docs/img/icons/android-chrome-maskable-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/docs/img/icons/android-chrome-maskable-192x192.png -------------------------------------------------------------------------------- /docs/img/icons/android-chrome-maskable-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vue3/vue3-News/HEAD/docs/img/icons/android-chrome-maskable-512x512.png -------------------------------------------------------------------------------- /docs/img/icons/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/manifest.json: -------------------------------------------------------------------------------- 1 | {"name":"vue3-awesome-demo","short_name":"vue3-awesome-demo","theme_color":"#4DBA87","icons":[{"src":"./img/icons/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"./img/icons/android-chrome-512x512.png","sizes":"512x512","type":"image/png"},{"src":"./img/icons/android-chrome-maskable-192x192.png","sizes":"192x192","type":"image/png","purpose":"maskable"},{"src":"./img/icons/android-chrome-maskable-512x512.png","sizes":"512x512","type":"image/png","purpose":"maskable"}],"start_url":".","display":"standalone","background_color":"#000000"} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | node_modules 4 | /dist 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | 25 | # Compiled class file 26 | *.class 27 | 28 | # Log file 29 | *.log 30 | 31 | # BlueJ files 32 | *.ctxt 33 | 34 | # Mobile Tools for Java (J2ME) 35 | .mtj.tmp/ 36 | 37 | # Package Files # 38 | *.jar 39 | *.war 40 | *.nar 41 | *.ear 42 | *.zip 43 | *.tar.gz 44 | *.rar 45 | 46 | # virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml 47 | hs_err_pid* 48 | -------------------------------------------------------------------------------- /docs/precache-manifest.dd9899199106e5b118aa6311d61a57bf.js: -------------------------------------------------------------------------------- 1 | self.__precacheManifest = (self.__precacheManifest || []).concat([ 2 | { 3 | "revision": "95888eb2ed7e24399603", 4 | "url": "/vue3-News/css/chunk-vendors.f9c58f5d.css" 5 | }, 6 | { 7 | "revision": "884d99522d41a0144a67", 8 | "url": "/vue3-News/css/index.1ba5327a.css" 9 | }, 10 | { 11 | "revision": "20aab1da86823ef780367ab9744d8160", 12 | "url": "/vue3-News/index.html" 13 | }, 14 | { 15 | "revision": "95888eb2ed7e24399603", 16 | "url": "/vue3-News/js/chunk-vendors.9c7a8d76.js" 17 | }, 18 | { 19 | "revision": "884d99522d41a0144a67", 20 | "url": "/vue3-News/js/index.7e39d82e.js" 21 | }, 22 | { 23 | "revision": "74899d989cff1a295601bd08d6e6170f", 24 | "url": "/vue3-News/manifest.json" 25 | }, 26 | { 27 | "revision": "b6216d61c03e6ce0c9aea6ca7808f7ca", 28 | "url": "/vue3-News/robots.txt" 29 | } 30 | ]); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Bruce Jenn vue3 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /Vue 3.6 在核心架构与开发工具层面新增的特性.md: -------------------------------------------------------------------------------- 1 | # Vue 3.6 在核心架构与开发工具层面新增的特性 2 | 3 | Vue 3.6 在核心架构与开发工具层面新增了以下关键特性： 4 | 5 | ## 一、组件实例化优化 6 | 7 | ### 懒加载 Props 支持 8 | 9 | 通过延迟解析非必要 props 的初始化逻辑，降低组件实例化时的内存消耗，配合 Vapor 模式可在 100ms 内完成 10 万级组件挂载。 10 | 11 | ### 动态模板缓存机制 12 | 13 | 对高频更新组件启用模板缓存复用策略，减少重复编译导致的 CPU 开销，适用于实时数据仪表盘等场景。 14 | 15 | ## 二、响应式系统扩展 16 | 17 | ### 增量 GC 策略 18 | 19 | 采用增量垃圾回收机制降低内存碎片化，结合对象头压缩技术，单响应式对象内存占用从 48 bytes 压缩至 16 bytes。 20 | 21 | ### 标准化信号协议 22 | 23 | 允许开发者基于 `alien-signals` 独立库自定义响应式 API，并兼容其他框架的信号系统实现跨框架状态同步。 24 | 25 | ## 三、开发工具链增强 26 | 27 | ### 零配置代码分割 28 | 29 | ` 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 32 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /2025年GitHub热门Vue3开源项目.md: -------------------------------------------------------------------------------- 1 | # 2025 年 GitHub 热门 Vue3 开源项目全解析 2 | 3 | ## 一、企业级后台管理系统 4 | 5 | ### vue-vben-admin 6 | 7 | - **核心技术**：Vue3.7 + Vite5 + Ant Design Vue，支持 SSR 优化与动态路由权限控制，集成 WebSocket 实时通信体系 8 | - **核心模块**： 9 | - 虚拟滚动表格（万级数据加载性能优化） 10 | - 动态主题系统（CSS 变量+国际化方案） 11 | - RBAC 权限模型（用户/角色/菜单多级控制） 12 | - **GitHub 数据**：★18.2k（2025 年企业级方案首选） 13 | 14 | ### vue3-element-admin 15 | 16 | - **技术栈**：Vue3.6 + Element Plus + TypeScript5，内置本地 Mock 与在线接口文档系统 17 | - **亮点功能**： 18 | - 动态表单生成器（JSON Schema 驱动） 19 | - 代码规范检查（ESLint+Prettier 集成） 20 | - 权限拦截器（路由/按钮级双重控制） 21 | - **开发效率**：10 分钟完成基础框架搭建 22 | 23 | ## 二、前沿开发工具链 24 | 25 | ### vite-vue3-explore 26 | 27 | - **核心价值**：基于 Vite5 的极速开发模板，集成 Volar 插件实现 98% TS 类型覆盖率 28 | - **功能特性**： 29 | - 组件自动导入（unplugin-vue-components） 30 | - 模块联邦支持（跨项目共享代码） 31 | - 可视化构建分析（Rollup 插件集成） 32 | 33 | ### vue-manage-system 34 | 35 | - **创新实践**：采用 Vue3.6 的 Composition API 重构，实现模块联邦与 Monorepo 架构 36 | - **典型场景**： 37 | - 数据看板（ECharts 组件二次封装） 38 | - 消息中心（WebSocket+消息队列） 39 | - 文件管理（OSS 直传+分片上传） 40 | 41 | ## 三、跨平台解决方案 42 | 43 | ### RuoYi-Vue3 44 | 45 | - **技术融合**：Spring Boot 3.2 + Vue3.6，提供 RBAC 权限系统与代码生成器 46 | - **核心功能**： 47 | - 动态数据源（多数据库切换） 48 | - 审计日志追踪（操作记录可视化） 49 | - 分布式锁（Redisson 实现） 50 | 51 | ### Quasar 跨端方案 52 | 53 | - **跨平台能力**：一套代码同步生成 Web/移动端/Electron 应用，支持 Cordova 插件生态 54 | - **性能优化**： 55 | - 按需加载（Vite5 Tree Shaking） 56 | - 骨架屏过渡动画（Vue3 Transition 组件） 57 | 58 | ## 四、新兴领域实践 59 | 60 | ### Three.js 可视化项目 61 | 62 | - **技术组合**：Vue3.7 + Three.js + WebGL，实现三维模型交互与物理引擎集成 63 | - **典型应用**： 64 | - 工业数字孪生（设备状态实时监测） 65 | - 虚拟展厅（360° 全景漫游） 66 | 67 | ### LLM 流程平台 68 | 69 | - **AI 集成**：Vue3.6 + Langchain，构建多模态 AI 应用开发框架 70 | - **核心组件**： 71 | - 自然语言处理（Claude API 集成） 72 | - 知识图谱可视化（D3.js 联动） 73 | 74 | ## 项目选型建议 75 | 76 | | 场景需求 | 推荐方案 | 技术优势 | 77 | | ---------------- | ----------------- | ----------------------- | 78 | | 中后台管理系统 | vue-vben-admin | 动态路由+权限体系完善 | 79 | | 移动端跨平台开发 | Quasar | 多端构建+原生插件支持 | 80 | | 三维可视化项目 | Three.js+Vue3 | WebGL 渲染优化+物理引擎 | 81 | | 快速原型开发 | vite-vue3-explore | Vite5 极速启动+模块联邦 | 82 | 83 | ## 当前 GitHub 趋势（2025 年 4 月） 84 | 85 | - **vue-vben-admin** 周增 star 超 500，持续领跑企业级方案 86 | - **RuoYi-Vue3** 成 Spring Boot+Vue3 全栈开发标杆，月活开发者超 2.3 万 87 | - 三维可视化类项目增长率达 45%，Three.js+Vue3 组合占比 68% 88 | -------------------------------------------------------------------------------- /Vue3 基础性能优化技巧（2025 年最新实践）.md: -------------------------------------------------------------------------------- 1 | # Vue3 基础性能优化技巧（2025 年最新实践） 2 | 3 | ## 一、‌ 响应式数据优化 ‌ 4 | 5 | ### 1. **合理选择 `ref` 和 `reactive‌`** 6 | 7 | - 简单数据（如字符串、数字）用 `ref`，复杂对象用 `reactive`，避免滥用 `reactive` 导致不必要的深层追踪。 8 | - 示例： 9 | 10 | ```js 11 | // 推荐 12 | const count = ref(0); 13 | const user = reactive({ name: "Alice", age: 30 }); 14 | 15 | // 避免 16 | const user = ref({ name: "Alice", age: 30 }); // 需要 .value 访问 17 | ``` 18 | 19 | ### 2. **冻结静态数据** 20 | 21 | 用 Object.freeze() 或 markRaw 标记不会变化的数据（如配置表、常量），跳过响应式处理。 22 | 示例： 23 | 24 | ```javascript 25 | const staticConfig = markRaw({ apiUrl: "https://api.example.com" }); 26 | ``` 27 | 28 | ## 二、‌ **模板与渲染优化** ‌ 29 | 30 | 区分 v-if 和 v-show‌ 31 | 32 | v-if 适合低频切换的组件（如弹窗），彻底销毁 DOM；v-show 适合高频切换（如 Tab 页），通过 CSS 隐藏。 33 | 示例： 34 | 35 | ```vue 36 | 37 | 38 | 39 | 40 |
Home Content
41 | ``` 42 | 43 | 列表渲染必加 key‌ 44 | 45 | 为 v-for 列表项添加唯一 key，帮助 Vue 高效复用 DOM 节点，避免全量更新。 46 | 示例： 47 | 48 | ```vue 49 | 52 | ``` 53 | 54 | 使用 v-once 缓存静态内容 ‌ 55 | 56 | 标记永不变化的静态内容（如页脚、Logo），跳过后续更新。 57 | 示例： 58 | 59 | ```vue 60 | 61 | ``` 62 | 63 | ## 三、‌ **计算属性与侦听器** ‌ 64 | 65 | 善用 computed 缓存计算结果 ‌ 66 | 67 | 将复杂逻辑封装到 computed 中，自动缓存依赖项未变化时的结果。 68 | 示例： 69 | 70 | ```javascript 71 | const fullName = computed(() => `${firstName.value} ${lastName.value}`); 72 | ``` 73 | 74 | 避免在 watch 中执行高开销操作 ‌ 75 | 76 | 使用 watch 的 immediate: true 或 flush: 'post' 控制触发时机，减少不必要的执行。 77 | 示例： 78 | 79 | ```javascript 80 | watch( 81 | () => user.value.age, 82 | (newAge) => { 83 | /_ 逻辑 _/; 84 | }, 85 | { immediate: true } // 首次加载立即执行 86 | ); 87 | ``` 88 | 89 | ## 四、‌ **资源加载优化** ‌ 90 | 91 | 图片懒加载 ‌ 92 | 93 | 使用 v-lazy 指令（如 vue-lazyload 插件）或 loading="lazy" 属性延迟加载视口外图片。 94 | 示例： 95 | 96 | ```vue 97 | Lazy Image 98 | 99 | 100 | 101 | ``` 102 | 103 | 按需引入第三方库 ‌ 104 | 105 | 使用 Vite 的 Tree Shaking 特性，仅导入需要的功能模块。 106 | 示例（Element Plus）： 107 | 108 | ```javascript 109 | import { ElButton } from "element-plus"; // 仅引入按钮组件 110 | ``` 111 | 112 | ## 五、‌ **构建配置优化** ‌ 113 | 114 | - 代码分割（Code Splitting）‌ 115 | 116 | 使用动态导入（import()）分割路由组件，减少首屏加载体积。 117 | 示例： 118 | 119 | ```javascript 120 | const Home = defineAsyncComponent(() => import("./views/Home.vue")); 121 | ``` 122 | 123 | - 启用 Gzip/Brotli 压缩 ‌ 124 | 125 | 通过 Vite 插件（如 vite-plugin-compression）生成压缩资源，减少网络传输体积。 126 | 配置示例（vite.config.js）： 127 | 128 | ```javascript 129 | import viteCompression from "vite-plugin-compression"; 130 | export default { 131 | plugins: [viteCompression({ algorithm: "brotliCompress" })], 132 | }; 133 | ``` 134 | 135 | - 优化优先级建议 136 | - 必做项 ‌： 137 | 列表项加 key → 按需引入第三方库 → 图片懒加载 → 启用压缩。 138 | - 进阶项 ‌： 139 | 计算属性缓存 → 代码分割 → 冻结静态数据。 140 | 141 | 注：以上技巧适用于大多数 Vue3 项目，优化后首屏加载速度可提升 30%+。结合 Chrome DevTools 的 ‌Lighthouse‌ 和 ‌Performance‌ 面板验证效果。 142 | -------------------------------------------------------------------------------- /docs/css/index.1ba5327a.css: -------------------------------------------------------------------------------- 1 | *,:after,:before{box-sizing:border-box}body{margin:0}.view{position:relative;min-height:100vh;font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex}ol,ul{list-style:none}.m-0{margin:0}.m-t-0{margin-top:0}.m-b-0{margin-bottom:0}.m-l-0{margin-left:0}.m-r-0{margin-right:0}.m-v-0{margin-top:0;margin-bottom:0}.m-h-0{margin-left:0;margin-right:0}.p-0{padding:0}.p-t-0{padding-top:0}.p-b-0{padding-bottom:0}.p-l-0{padding-left:0}.p-r-0{padding-right:0}.p-v-0{padding-top:0;padding-bottom:0}.p-h-0{padding-left:0;padding-right:0}.m-5{margin:5px}.m-t-5{margin-top:5px}.m-b-5{margin-bottom:5px}.m-l-5{margin-left:5px}.m-r-5{margin-right:5px}.m-v-5{margin-top:5px;margin-bottom:5px}.m-h-5{margin-left:5px;margin-right:5px}.p-5{padding:5px}.p-t-5{padding-top:5px}.p-b-5{padding-bottom:5px}.p-l-5{padding-left:5px}.p-r-5{padding-right:5px}.p-v-5{padding-top:5px;padding-bottom:5px}.p-h-5{padding-left:5px;padding-right:5px}.m-10{margin:10px}.m-t-10{margin-top:10px}.m-b-10{margin-bottom:10px}.m-l-10{margin-left:10px}.m-r-10{margin-right:10px}.m-v-10{margin-top:10px;margin-bottom:10px}.m-h-10{margin-left:10px;margin-right:10px}.p-10{padding:10px}.p-t-10{padding-top:10px}.p-b-10{padding-bottom:10px}.p-l-10{padding-left:10px}.p-r-10{padding-right:10px}.p-v-10{padding-top:10px;padding-bottom:10px}.p-h-10{padding-left:10px;padding-right:10px}.m-15{margin:15px}.m-t-15{margin-top:15px}.m-b-15{margin-bottom:15px}.m-l-15{margin-left:15px}.m-r-15{margin-right:15px}.m-v-15{margin-top:15px;margin-bottom:15px}.m-h-15{margin-left:15px;margin-right:15px}.p-15{padding:15px}.p-t-15{padding-top:15px}.p-b-15{padding-bottom:15px}.p-l-15{padding-left:15px}.p-r-15{padding-right:15px}.p-v-15{padding-top:15px;padding-bottom:15px}.p-h-15{padding-left:15px;padding-right:15px}.m-20{margin:20px}.m-t-20{margin-top:20px}.m-b-20{margin-bottom:20px}.m-l-20{margin-left:20px}.m-r-20{margin-right:20px}.m-v-20{margin-top:20px;margin-bottom:20px}.m-h-20{margin-left:20px;margin-right:20px}.p-20{padding:20px}.p-t-20{padding-top:20px}.p-b-20{padding-bottom:20px}.p-l-20{padding-left:20px}.p-r-20{padding-right:20px}.p-v-20{padding-top:20px;padding-bottom:20px}.p-h-20{padding-left:20px;padding-right:20px}.m-30{margin:30px}.m-t-30{margin-top:30px}.m-b-30{margin-bottom:30px}.m-l-30{margin-left:30px}.m-r-30{margin-right:30px}.m-v-30{margin-top:30px;margin-bottom:30px}.m-h-30{margin-left:30px;margin-right:30px}.p-30{padding:30px}.p-t-30{padding-top:30px}.p-b-30{padding-bottom:30px}.p-l-30{padding-left:30px}.p-r-30{padding-right:30px}.p-v-30{padding-top:30px;padding-bottom:30px}.p-h-30{padding-left:30px;padding-right:30px}.m-40{margin:40px}.m-t-40{margin-top:40px}.m-b-40{margin-bottom:40px}.m-l-40{margin-left:40px}.m-r-40{margin-right:40px}.m-v-40{margin-top:40px;margin-bottom:40px}.m-h-40{margin-left:40px;margin-right:40px}.p-40{padding:40px}.p-t-40{padding-top:40px}.p-b-40{padding-bottom:40px}.p-l-40{padding-left:40px}.p-r-40{padding-right:40px}.p-v-40{padding-top:40px;padding-bottom:40px}.p-h-40{padding-left:40px;padding-right:40px}.m-50{margin:50px}.m-t-50{margin-top:50px}.m-b-50{margin-bottom:50px}.m-l-50{margin-left:50px}.m-r-50{margin-right:50px}.m-v-50{margin-top:50px;margin-bottom:50px}.m-h-50{margin-left:50px;margin-right:50px}.p-50{padding:50px}.p-t-50{padding-top:50px}.p-b-50{padding-bottom:50px}.p-l-50{padding-left:50px}.p-r-50{padding-right:50px}.p-v-50{padding-top:50px;padding-bottom:50px}.p-h-50{padding-left:50px;padding-right:50px}.m-100{margin:100px}.m-t-100{margin-top:100px}.m-b-100{margin-bottom:100px}.m-l-100{margin-left:100px}.m-r-100{margin-right:100px}.m-v-100{margin-top:100px;margin-bottom:100px}.m-h-100{margin-left:100px;margin-right:100px}.p-100{padding:100px}.p-t-100{padding-top:100px}.p-b-100{padding-bottom:100px}.p-l-100{padding-left:100px}.p-r-100{padding-right:100px}.p-v-100{padding-top:100px;padding-bottom:100px}.p-h-100{padding-left:100px;padding-right:100px}.m-150{margin:150px}.m-t-150{margin-top:150px}.m-b-150{margin-bottom:150px}.m-l-150{margin-left:150px}.m-r-150{margin-right:150px}.m-v-150{margin-top:150px;margin-bottom:150px}.m-h-150{margin-left:150px;margin-right:150px}.p-150{padding:150px}.p-t-150{padding-top:150px}.p-b-150{padding-bottom:150px}.p-l-150{padding-left:150px}.p-r-150{padding-right:150px}.p-v-150{padding-top:150px;padding-bottom:150px}.p-h-150{padding-left:150px;padding-right:150px}.m-200{margin:200px}.m-t-200{margin-top:200px}.m-b-200{margin-bottom:200px}.m-l-200{margin-left:200px}.m-r-200{margin-right:200px}.m-v-200{margin-top:200px;margin-bottom:200px}.m-h-200{margin-left:200px;margin-right:200px}.p-200{padding:200px}.p-t-200{padding-top:200px}.p-b-200{padding-bottom:200px}.p-l-200{padding-left:200px}.p-r-200{padding-right:200px}.p-v-200{padding-top:200px;padding-bottom:200px}.p-h-200{padding-left:200px;padding-right:200px}.m-250{margin:250px}.m-t-250{margin-top:250px}.m-b-250{margin-bottom:250px}.m-l-250{margin-left:250px}.m-r-250{margin-right:250px}.m-v-250{margin-top:250px;margin-bottom:250px}.m-h-250{margin-left:250px;margin-right:250px}.p-250{padding:250px}.p-t-250{padding-top:250px}.p-b-250{padding-bottom:250px}.p-l-250{padding-left:250px}.p-r-250{padding-right:250px}.p-v-250{padding-top:250px;padding-bottom:250px}.p-h-250{padding-left:250px;padding-right:250px}.m-300{margin:300px}.m-t-300{margin-top:300px}.m-b-300{margin-bottom:300px}.m-l-300{margin-left:300px}.m-r-300{margin-right:300px}.m-v-300{margin-top:300px;margin-bottom:300px}.m-h-300{margin-left:300px;margin-right:300px}.p-300{padding:300px}.p-t-300{padding-top:300px}.p-b-300{padding-bottom:300px}.p-l-300{padding-left:300px}.p-r-300{padding-right:300px}.p-v-300{padding-top:300px;padding-bottom:300px}.p-h-300{padding-left:300px;padding-right:300px}.m-h-auto{margin-left:auto;margin-right:auto}.red{color:red}.bg-red{background-color:red}.blue{color:#00f}.bg-blue{background-color:#00f}.green{color:green}.bg-green{background-color:green}.gray{color:grey}.bg-gray{background-color:grey}.white{color:#fff}.bg-white{background-color:#fff}.black{color:#000}.bg-black{background-color:#000}.f-l{float:left}.f-r{float:right}.t-a-l{text-align:left}.t-a-r{text-align:right}.t-a-c{text-align:center}.bold,.f-b{font-weight:700}.f-n{font-weight:400}.p-a{position:absolute}.p-r{position:relative}.p-f{position:fixed}.p-s{position:static}.about{position:relative;z-index:10}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media(max-width:500px){.github-corner:hover .octo-arm{-webkit-animation:none;animation:none}.github-corner .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}}p[data-v-52c68443]{margin:0}.article-box[data-v-52c68443]{position:relative;margin:10px 0;padding-bottom:5px;border-bottom:1px solid #eee}.title[data-v-52c68443]{display:flex;justify-content:space-between}.title a[data-v-52c68443]{color:#000;font-weight:900;cursor:pointer;position:relative;text-decoration:none;transition:all .3s}.title a[data-v-52c68443]:hover{opacity:.8;color:#41b883}.title a[data-v-52c68443]:after{position:absolute;content:" ";left:0;bottom:-1px;width:0;height:1px;transition:all .3s;background-color:#41b883}.title a[data-v-52c68443]:hover:after{width:100%}.title div span[data-v-52c68443]{display:inline-block;min-width:10px;margin:0 2px;padding:3px 7px;font-size:12px;font-weight:700;line-height:1;color:#fff;text-align:center;cursor:default;white-space:nowrap;vertical-align:middle;background-color:#41b883;border-radius:10px}.content[data-v-52c68443]{padding:2px 0}.content p[data-v-52c68443]{font-size:14px;line-height:1.5;padding:3px}.footer[data-v-52c68443]{display:flex;justify-content:flex-start}.footer p[data-v-52c68443]{margin-right:10px;font-size:14px}.footer p a[data-v-52c68443]{color:#212529}p[data-v-1d6eb308]{margin:0}.hidden[data-v-1d6eb308]{display:none}.home[data-v-1d6eb308]{position:relative;width:100%}.xbox[data-v-1d6eb308]{position:relative;padding:50px;padding-top:10px}.mu span[data-v-1d6eb308]{position:absolute;font-size:150px;left:38%;line-height:.6}.mu p[data-v-1d6eb308]{position:relative;font-weight:900;font-size:30px;display:inline-block;margin-top:120px;padding:0 20px}.mu p[data-v-1d6eb308]:after{content:" ";position:absolute;transition:all .3s;z-index:-1;bottom:0;width:100%;background-color:rgba(65,184,131,.53);height:18px;border-top-left-radius:20px;border-top-right-radius:20px;left:0}.mu .vx-box[data-v-1d6eb308]{position:relative;display:inline-block;width:300px;height:200px}.mu .vx-box:hover .v[data-v-1d6eb308]{z-index:1}.mu .vx-box:hover .x[data-v-1d6eb308]{z-index:5}.mu .v[data-v-1d6eb308]{color:#64ceaa}.mu .x[data-v-1d6eb308]{color:grey}.xcard-title[data-v-1d6eb308]{position:relative;margin:40px 5px 10px}.xcard-title b[data-v-1d6eb308]{font-size:24px;display:inline-block;color:#fff;background:rgba(65,184,131,.53);padding:5px 30px}.xcard[data-v-1d6eb308]{position:relative;min-height:300px;border:1px solid #ddd;margin-bottom:15px}.xcard .title[data-v-1d6eb308]{font-size:20px;font-weight:900;position:relative;margin-top:0;z-index:5;margin-bottom:2rem}.xcard .title[data-v-1d6eb308]:after{content:" ";position:absolute;transition:all .3s;z-index:-1;bottom:-5px;width:15px;background-color:#41b883;height:3px;left:0}.xcard>div[data-v-1d6eb308]{margin:12px 0;border-right:1px solid #eee}.xcard>div[data-v-1d6eb308]:last-child{border-right:none}.xcard>div:hover .title[data-v-1d6eb308]:after{width:150px;height:18px;border-top-right-radius:20px;background-color:rgba(65,184,131,.53)}.xcard.interview[data-v-1d6eb308]{min-height:200px}.xcard.interview a[data-v-1d6eb308]{color:#000;text-decoration:none}.xcard.interview a[data-v-1d6eb308]:hover{text-decoration:underline}.feature p[data-v-1d6eb308]{margin-top:100px}.copyright[data-v-1d6eb308]{margin-top:50px;text-align:center}.comments-box[data-v-1d6eb308]{position:relative;width:100%;text-align:center}.comments-box .comments[data-v-1d6eb308]{display:inline-block;text-align:left;width:100%;max-width:1000px} -------------------------------------------------------------------------------- /docs/js/index.7e39d82e.js: -------------------------------------------------------------------------------- 1 | (function(e){function t(t){for(var u,o,s=t[0],a=t[1],r=t[2],d=0,b=[];d/index.html作为构建入口点，并生成一个适合通过静态托管服务提供的应用程序包。","time":"Jan 12, 2021","badge":["Vite2","前端","打包"],"from":["知乎","https://zhihu.com/"]},{"title":"如何看待 Web 开发构建工具 Vite？","href":"https://www.zhihu.com/question/394062839?content_source_url=https://github.com/vue3/vue3-News","detail":"Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。","time":"Jan 01, 2021","badge":["2021","前端","Vite"],"from":["知乎","https://zhihu.com/"]},{"title":"Vue3 + Vite + TypeScript 项目实战 -----（二）Vue3 生命周期","href":"https://juejin.cn/post/6929040071962132488?content_source_url=https://github.com/vue3/vue3-News","detail":"Vue3 继承了 Vue2 的所有生命周期函数，所以 Vue2 的生命周期的应用方式同样适用于 Vue3。同时 Vue3 还新增了一些新的生命周期。原有的生命周期函数我们这边不做过多的赘述，我们来讲解一下 Vue3 相对于 Vue2 变更了和新增了哪些生命周期函","time":"Jan 20, 2021","badge":["Vue3","Vite","TypeScript"],"from":["掘金","https://juejin.cn/"]}],"vue23":[{"title":"Vue3文档【Vue2迁移Vue3】","href":"https://juejin.cn/post/6858558735695937544?content_source_url=https://github.com/vue3/vue3-News","detail":"查看 vue 3.0 文档 后，总结记录一下从 vue 2 迁移到 vue 3 所需的一些更改，方便日后对比学习新版本。","time":"Jan 01, 2021","badge":["Vue2","Vue3","文档"],"from":["掘金","https://juejin.cn/"]},{"title":"Vue2.x对比Composition API写法","href":"https://juejin.cn/post/6844904132944330759?content_source_url=https://github.com/vue3/vue3-News","detail":"当然，他们没有强制要求使用Vue3.0，不习惯的依然采用Vue2.x的写法慢慢过渡。我个人喜欢追求新知识，所以我就一步到位了。Vue3.0的升级必然有许多亮点，之前也有大致了解：函数式API，Typescript支持等。最喜欢这种工作，可以在工作尝试和学习新的东西。从此开始Vue3.0之旅。","time":"Jan 01, 2021","badge":["Vue2","Vue3","Typescript"],"from":["掘金","https://juejin.cn/"]},{"title":"如何在Vue2与Vue3中构建相同的组件","href":"https://juejin.cn/post/6844904136589180935?content_source_url=https://github.com/vue3/vue3-News","detail":"随着Vue3即将发布，许多人都在想“ Vue2与Vue3有何不同？”为了显示这些更改，我们将在Vue2和Vue3中构建一个简单的表单组件。在本文结尾，你将了解Vue2和Vue3之间的主要编程差异，并逐步成为一名更好的开发人员。","time":"Jan 01, 2021","badge":["构建","Vue2","Vue3","组件"],"from":["掘金","https://juejin.cn/"]},{"title":"vue2.0与3.0对比以及vue3.0 API入门","href":"https://juejin.cn/post/6844904130985590791?content_source_url=https://github.com/vue3/vue3-News","detail":"(注意：在使用vue3.0的时候，最好将你的vue脚手架工具升级到最新的cli 4.x,我在cli3.x的上执行vue add vue-next会报错。【升级脚手架步骤】:npm install -g @vue/cli 安装完毕以后 运行vue -V查看版本号)","time":"Jan 01, 2021","badge":["入手","Vue3","实战"],"from":["掘金","https://juejin.cn/"]},{"title":"解析Vue2.0和3.0的响应式原理和异同(带源码)","href":"https://juejin.cn/post/6844904111813443598?content_source_url=https://github.com/vue3/vue3-News","detail":"结构: 2.0用Flow ,3.0用 TypeScript。性能: 3.0优化了Virtual Dom的算法。响应式原理:2.0用 Object.defineProperty,3.0用Proxy","time":"Jan 01, 2021","badge":["Vue3","原理","解析"],"from":["掘金","https://juejin.cn/"]}],"vue3react":[{"title":"Vue3 究竟好在哪里？（和 React Hooks 的详细对比）","href":"?content_source_url=https://github.com/vue3/vue3-News","detail":"这几天 Vue 3.0 Beta 版本发布了，本以为是皆大欢喜的一件事情，但是论坛里还是看到了很多反对的声音。主流的反对论点大概有如下几点：意大利面代码结构吐槽和抄袭 React 吐槽","time":"Jan 01, 2021","badge":["React","Vue3","Hooks"],"from":["知乎","https://zhihu.com/"]},{"title":"尤大Vue3.0直播虚拟Dom总结(和React对比)","href":"https://juejin.cn/post/6844904134647234568?content_source_url=https://github.com/vue3/vue3-News","detail":"Vue3核心的Typescript，Proxy响应式，Composition解决代码反复横跳都有很棒的文章剖析了， 我总结一下虚拟Dom部分把，并对比一下React， vdom的重写也是vue3性能如此优秀的重要原因","time":"Jan 01, 2021","badge":["React","总结","Composition"],"from":["掘金","https://juejin.cn/"]},{"title":"【你不知道的 React】当 React Hooks 遇见 Vue3 Composition API","href":"?content_source_url=https://github.com/vue3/vue3-News","detail":"前几天在知乎看到了一个问题，React 的 Hooks 是否可以改为用类似 vue3 composition api 的方式实现？关于 React Hooks 和 Vue3 Composition API 的热烈讨论一直都存在，虽然两者本质上都是实现状态逻辑复用，但在实现上却代表了两个社区的不同发展方向。","time":"Jan 01, 2021","badge":["React","Vue3","Composition"],"from":["掘金","https://juejin.cn/"]},{"title":"React中引入Vue3的@vue/reactivity 实现响应式状态管理","href":"https://juejin.cn/post/6844904054192078855?content_source_url=https://github.com/vue3/vue3-News","detail":"React的状态管理是一个缤纷繁杂的大世界，光我知道的就不下数十种，其中有最出名immutable阵营的redux，有mutable阵营的mobx，react-easy-state，在hooks诞生后还有极简主义的unstated-next，有蚂蚁金服的大佬出品的hox、hoox。","time":"Jan 01, 2021","badge":["React","响应式"],"from":["掘金","https://juejin.cn/"]}]}')},"33f3":function(e,t,i){},6801:function(e,t,i){},"87de":function(e,t,i){"use strict";i("6801")},"87f4":function(e,t,i){},"942d":function(e,t,i){},"9cdc":function(e,t,i){"use strict";i("942d")},c641:function(e,t,i){"use strict";i("fa49")},c81e:function(e,t,i){"use strict";i("87f4")},cd49:function(e,t,i){"use strict";i.r(t);i("e260"),i("e6cf"),i("cca6"),i("a79d");var u=i("830f"),c=i("5c40"),n={class:"view"};function o(e,t){var i=Object(c["x"])("router-view");return Object(c["s"])(),Object(c["e"])("div",n,[Object(c["j"])(i)])}i("9cdc");const s={};s.render=o;var a=s,r=i("9483");Object(r["a"])("".concat("/vue3-News/","service-worker.js"),{ready:function(){console.log("App is being served from cache by a service worker.\nFor more details, visit https://goo.gl/AFskqB")},registered:function(){console.log("Service worker has been registered.")},cached:function(){console.log("Content has been cached for offline use.")},updatefound:function(){console.log("New content is downloading.")},updated:function(){console.log("New content is available; please refresh.")},offline:function(){console.log("No internet connection found. App is running in offline mode.")},error:function(e){console.error("Error during service worker registration:",e)}});i("33f3"),i("ab8b"),i("db28");var l=i("8c4f"),d=Object(c["E"])("data-v-1d6eb308");Object(c["v"])("data-v-1d6eb308");var b={class:"home"},v={class:"container-fluid xbox"},h=Object(c["h"])('
xv

Vue 3.0 训练营

',1),p={class:"row xcard news"},j={class:"col-xl-6"},m=Object(c["j"])("p",{class:"title"},"Hot News",-1),f={class:"col-xl-6"},g=Object(c["j"])("p",{class:"title"},"Daily News",-1),w={class:"row xcard pit"},V={class:"col-xl-6"},O=Object(c["j"])("p",{class:"title"},"入坑指南",-1),_={class:"col-xl-6"},x=Object(c["j"])("p",{class:"title"},"入坑案例",-1),N={class:"row xcard pit"},y={class:"col-xl-6"},k=Object(c["j"])("p",{class:"title"},"2021前端趋势",-1),C={class:"col-xl-6"},J=Object(c["j"])("p",{class:"title"},"Vite系列",-1),R=Object(c["h"])('
问一问，面一面；更健康！

每周问一问

# 列出Vue2.x 到 Vue3 详细对比？
# Vue3.0 编译做了哪些优化？（底层，源码）？
# Composition Api 与 Vue 2.x使用的Options Api 有什么区别？
# vite为什么要去革了webpack的命？

Vue 3.0 面试

Vue2 => Vue3 <= React 16/17
',3),S={class:"row xcard contrast"},z={class:"col-xl-6"},A=Object(c["j"])("p",{class:"title"},"Vue2-Vue3",-1),I={class:"col-xl-6"},T=Object(c["j"])("p",{class:"title"},"Vue3-React",-1),P=Object(c["h"])('
招聘信息
期待ing...
获取ing...
植入ing...
本站简介

开始唠叨

我们的GitHub地址：https://github.com/vue3/vue3-News
我们的公众号已经在路上了，敬请期待！
Thanks♪(･ω･)ﾉ

唠叨几句

我该如何写简介呢？
用诗歌的方式？
写段代码的方式？
...

继续唠叨

谢谢大家！！！
祝各位漂亮小姐姐、小哥哥
新年好，鸿运照，烦恼的事儿往边靠，爱情滋润没烦恼，钞票一个劲儿往家跑；出门遇贵人，在家听喜报，年年有此时，岁岁有今朝，祝您一年更比一年好！

加油ヾ(◍°∇°◍)ﾉﾞ少年，未来可期！

COPYRIGHT © BRUCE JENN 2021. ALL RIGHT RESERVED.

More Information Vue3-News - Collect from Vue3-News
',7);Object(c["t"])();var E=d((function(e,t){var i=Object(c["x"])("GithubCorner"),u=Object(c["x"])("Article");return Object(c["s"])(),Object(c["e"])("div",b,[Object(c["j"])(i),Object(c["j"])("section",v,[h,Object(c["j"])("div",p,[Object(c["j"])("div",j,[m,(Object(c["s"])(!0),Object(c["e"])(c["b"],null,Object(c["w"])(e.news,(function(e,t){return Object(c["s"])(),Object(c["e"])(u,{index:t,key:t,info:e},null,8,["index","info"])})),128))]),Object(c["j"])("div",f,[g,(Object(c["s"])(!0),Object(c["e"])(c["b"],null,Object(c["w"])(e.dailyNews,(function(e,t){return Object(c["s"])(),Object(c["e"])(u,{index:t,key:t,info:e},null,8,["index","info"])})),128))])]),Object(c["j"])("div",w,[Object(c["j"])("div",V,[O,(Object(c["s"])(!0),Object(c["e"])(c["b"],null,Object(c["w"])(e.course,(function(e,t){return Object(c["s"])(),Object(c["e"])(u,{index:t,key:t,info:e},null,8,["index","info"])})),128))]),Object(c["j"])("div",_,[x,(Object(c["s"])(!0),Object(c["e"])(c["b"],null,Object(c["w"])(e.courseDemo,(function(e,t){return Object(c["s"])(),Object(c["e"])(u,{index:t,key:t,info:e},null,8,["index","info"])})),128))])]),Object(c["j"])("div",N,[Object(c["j"])("div",y,[k,(Object(c["s"])(!0),Object(c["e"])(c["b"],null,Object(c["w"])(e.fd2021,(function(e,t){return Object(c["s"])(),Object(c["e"])(u,{index:t,key:t,info:e},null,8,["index","info"])})),128))]),Object(c["j"])("div",C,[J,(Object(c["s"])(!0),Object(c["e"])(c["b"],null,Object(c["w"])(e.vite,(function(e,t){return Object(c["s"])(),Object(c["e"])(u,{index:t,key:t,info:e},null,8,["index","info"])})),128))])]),R,Object(c["j"])("div",S,[Object(c["j"])("div",z,[A,(Object(c["s"])(!0),Object(c["e"])(c["b"],null,Object(c["w"])(e.vue23,(function(e,t){return Object(c["s"])(),Object(c["e"])(u,{index:t,key:t,info:e},null,8,["index","info"])})),128))]),Object(c["j"])("div",I,[T,(Object(c["s"])(!0),Object(c["e"])(c["b"],null,Object(c["w"])(e.vue3react,(function(e,t){return Object(c["s"])(),Object(c["e"])(u,{index:t,key:t,info:e},null,8,["index","info"])})),128))])]),P])])})),D={class:"about"},F=Object(c["j"])("a",{href:"https://github.com/vue3/vue3-News",class:"github-corner","aria-label":"View source on GitHub"},[Object(c["j"])("svg",{width:"80",height:"80",viewBox:"0 0 250 250",style:{fill:"#64ceaa",color:"#fff",position:"absolute",top:"0",border:"0",right:"0"},"aria-hidden":"true"},[Object(c["j"])("path",{d:"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"}),Object(c["j"])("path",{d:"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2",fill:"currentColor",style:{"transform-origin":"130px 106px"},class:"octo-arm"}),Object(c["j"])("path",{d:"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z",fill:"currentColor",class:"octo-body"})])],-1);function H(e,t){return Object(c["s"])(),Object(c["e"])("div",D,[F])}i("87de");const M={};M.render=H;var W=M,L=i("9ff4"),B=Object(c["E"])("data-v-52c68443");Object(c["v"])("data-v-52c68443");var G={class:"article-box"},q={class:"title"},U={class:"content"},X={class:"footer"},Z=Object(c["i"])(" From: ");Object(c["t"])();var K=B((function(e,t){return Object(c["s"])(),Object(c["e"])("div",G,[Object(c["j"])("div",q,[Object(c["j"])("a",{href:e.href,target:"_blank"},"#"+Object(L["E"])(e.index+1)+" "+Object(L["E"])(e.title),9,["href"]),Object(c["j"])("div",null,[(Object(c["s"])(!0),Object(c["e"])(c["b"],null,Object(c["w"])(e.badge,(function(e){return Object(c["s"])(),Object(c["e"])("span",{key:e},Object(L["E"])(e),1)})),128))])]),Object(c["j"])("div",U,[Object(c["j"])("p",null,Object(L["E"])(e.detail),1)]),Object(c["j"])("div",X,[Object(c["j"])("p",null,"Time: "+Object(L["E"])(e.time),1),Object(c["j"])("p",null,[Z,Object(c["j"])("a",{href:e.from[1],target:"_blank"},Object(L["E"])(e.from[0]),9,["href"])])])])})),Y=(i("a9e3"),{name:"Article",props:{info:Object,index:Number},setup:function(e){return e.info}});i("c81e");Y.render=K,Y.__scopeId="data-v-52c68443";var Q=Y,$=i("0f19"),ee=i("7671"),te=i.n(ee),ie=new te.a({clientID:"a9f878495a02042b2f24",clientSecret:"d60ef5836933b944e3033fe93adbb3069d0d9974",repo:"vue3-News-comments",owner:"vue3",admin:["Bruce Jenn"],language:"zh-CN",id:"vue3-News"}),ue={name:"Home",components:{GithubCorner:W,Article:Q},setup:function(){return Object(c["q"])((function(){ie.render("gitalk-container")})),$}};i("c641");ue.render=E,ue.__scopeId="data-v-1d6eb308";var ce=ue,ne=[{path:"/",name:"Home",component:ce}],oe=Object(l["a"])({history:Object(l["b"])("/vue3-News/"),routes:ne}),se=oe,ae=i("5502"),re=Object(ae["a"])({state:{},mutations:{},actions:{},modules:{}});Object(u["a"])(a).use(se).use(re).mount("#app")},fa49:function(e,t,i){}}); 2 | //# sourceMappingURL=index.7e39d82e.js.map -------------------------------------------------------------------------------- /docs/js/index.7e39d82e.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/components/GithubCorner.vue?e0c4","webpack:///./src/App.vue?3fe2","webpack:///./src/views/v2/Home.vue?1366","webpack:///./src/views/v2/Article.vue?19b9","webpack:///./src/App.vue","webpack:///./src/App.vue?bfc2","webpack:///./src/registerServiceWorker.ts","webpack:///./src/views/v2/Home.vue","webpack:///./src/components/GithubCorner.vue","webpack:///./src/components/GithubCorner.vue?9192","webpack:///./src/views/v2/Article.vue","webpack:///./src/views/v2/Article.vue?f223","webpack:///./src/views/v2/Home.vue?7e73","webpack:///./src/router/index.ts","webpack:///./src/store/index.ts","webpack:///./src/main.ts"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice","class","script","render","ready","console","log","registered","cached","updatefound","updated","offline","error","news","item","index","info","dailyNews","course","courseDemo","fd2021","vite","vue23","vue3react","href","aria-label","width","height","viewBox","style","aria-hidden","fill","target","title","badge","detail","time","from","props","Number","setup","__scopeId","clientID","clientSecret","repo","owner","admin","language","id","components","GithubCorner","Article","routes","path","component","router","history","store","state","mutations","actions","App","use","mount"],"mappings":"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","file":"js/index.7e39d82e.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t\"index\": 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/vue3-News/\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// add entry module to deferred list\n \tdeferredModules.push([0,\"chunk-vendors\"]);\n \t// run deferred modules when ready\n \treturn checkDeferredModules();\n","export { default } from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/index.js??ref--0-1!./GithubCorner.vue?vue&type=style&index=0&lang=scss\"; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/index.js??ref--0-1!./GithubCorner.vue?vue&type=style&index=0&lang=scss\"","export { default } from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/index.js??ref--0-1!./App.vue?vue&type=style&index=0&lang=scss\"; export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/index.js??ref--0-1!./App.vue?vue&type=style&index=0&lang=scss\"","export { default } from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/index.js??ref--0-1!./Home.vue?vue&type=style&index=0&id=1d6eb308&lang=scss&scoped=true\"; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/index.js??ref--0-1!./Home.vue?vue&type=style&index=0&id=1d6eb308&lang=scss&scoped=true\"","export { default } from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/index.js??ref--0-1!./Article.vue?vue&type=style&index=0&id=52c68443&lang=scss&scoped=true\"; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/index.js??ref--0-1!./Article.vue?vue&type=style&index=0&id=52c68443&lang=scss&scoped=true\"","\n\n\n","import { render } from \"./App.vue?vue&type=template&id=7e749846\"\nconst script = {}\n\nimport \"./App.vue?vue&type=style&index=0&lang=scss\"\nscript.render = render\n\nexport default script","/* eslint-disable no-console */\n\nimport { register } from \"register-service-worker\";\n\nif (process.env.NODE_ENV === \"production\") {\n register(`${process.env.BASE_URL}service-worker.js`, {\n ready() {\n console.log(\n \"App is being served from cache by a service worker.\\n\" +\n \"For more details, visit https://goo.gl/AFskqB\"\n );\n },\n registered() {\n console.log(\"Service worker has been registered.\");\n },\n cached() {\n console.log(\"Content has been cached for offline use.\");\n },\n updatefound() {\n console.log(\"New content is downloading.\");\n },\n updated() {\n console.log(\"New content is available; please refresh.\");\n },\n offline() {\n console.log(\n \"No internet connection found. App is running in offline mode.\"\n );\n },\n error(error) {\n console.error(\"Error during service worker registration:\", error);\n },\n });\n}\n","\n\n\n\n\n","\n\n\n","import { render } from \"./GithubCorner.vue?vue&type=template&id=01c9da34\"\nconst script = {}\n\nimport \"./GithubCorner.vue?vue&type=style&index=0&lang=scss\"\nscript.render = render\n\nexport default script","\n\n\n\n\n","import { render } from \"./Article.vue?vue&type=template&id=52c68443&scoped=true\"\nimport script from \"./Article.vue?vue&type=script&lang=js\"\nexport * from \"./Article.vue?vue&type=script&lang=js\"\n\nimport \"./Article.vue?vue&type=style&index=0&id=52c68443&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-52c68443\"\n\nexport default script","import { render } from \"./Home.vue?vue&type=template&id=1d6eb308&scoped=true\"\nimport script from \"./Home.vue?vue&type=script&lang=js\"\nexport * from \"./Home.vue?vue&type=script&lang=js\"\n\nimport \"./Home.vue?vue&type=style&index=0&id=1d6eb308&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-1d6eb308\"\n\nexport default script","import { createRouter, createWebHistory } from \"vue-router\";\nimport V2Home from \"../views/v2/Home.vue\";\n\nconst routes: Array = [\n {\n path: \"/\",\n name: \"Home\",\n component: V2Home,\n }\n];\n\nconst router = createRouter({\n history: createWebHistory(process.env.BASE_URL),\n routes,\n});\n\nexport default router;\n","import { createStore } from \"vuex\";\n\nexport const store = createStore({\n state: {},\n mutations: {},\n actions: {},\n modules: {},\n});\n","import { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport \"./registerServiceWorker\";\nimport \"./styles/util.min.css\";\nimport \"bootstrap/dist/css/bootstrap.min.css\";\nimport \"gitalk/dist/gitalk.css\";\n\nimport router from \"./router\";\nimport { store } from \"./store\";\n\ncreateApp(App).use(router).use(store).mount(\"#app\");\n"],"sourceRoot":""} --------------------------------------------------------------------------------