backbonejs_jquery_vue3.md

• Backbone.js、jQuery 老项目中整合 Vue 3 的一种姿势
• 为什么会有本文？
• 使用
• VSCode 自动补全
• Chrome DevTools：打断点调试
• Chrome DevTools：Vue 插件
• 此 Demo 包括功能
• 遗留问题
• vue3-sfc-loader 的更多详情

Backbone.js、jQuery 老项目中整合 Vue 3 的一种姿势

主要基于 vue3-sfc-loader ，使得石器时代的 Backbone,js + jQuery 老项目中可以相对无缝地用上 Vue 3.

为什么会有本文？

• 历史原因（人力、组织架构变化、用户量等），有些 Backbone.js 老项目依然在运行，并且有时可能还需往里面添加新功能
• Backbone 代码没有 Vue 那么容易维护，不想继续写 Backbone 风格的代码
• 如果保持原功能不变，新增的功能可以以 Vue 3 形式编写，以后移植到 Vue 框架项目，损耗更小一些

所以，这是不得不的一个折中方案，且不是最优方案。

使用

• 下载此项目： https://github.com/vikyd/backbonejs_vue3
• 进入上述项目目录
• 启动一个简单的 HTTP Server：
  • py3: python3 -m http.server 8686
  • py2: python -m SimpleHTTPServer 8686
  • 或其他 HTTP Sever
• index.html
  • 打开： https://localhost:8686/index.html
  • 说明：依赖包引用 unpkg.com 的在线文件
• index-local.html
  • 先安装本地依赖：npm install
  • 打开： https://localhost:8686/index-local.html
  • 说明：依赖包引用本地的文件

若想更好性能，可考虑将 index.html、index-local.html文件内的 vue.global.js 替换为 vue.global.prod.js，缺点是不便于在 Chrome Vue 插件查看状态。

VSCode 自动补全

VSCode 可对 backbone.js 老项目中的 Vue 3 的 .vue 文件内的代码进行自动补全。

• 使用 Volar 插件，不要使用 Vetur
• 项目目录需已安装 Vue 3

Chrome DevTools：打断点调试

由于 .vue 文件是在浏览器中编译的，source map 貌似不生效，所以在 DevTools 的 Source 中搜索不到 .vue 文件，也就无法打断点。

但有折中办法：

• 添加一行打印到每个 vue 文件，例如 console.log('vueFileName')
• 打开页面后，在 DevTools 的 Console 中找到对应的打印，点击右侧（形似 VM1275:3）可进入 .vue 文件中
• 此时，可以打断点调试了

Chrome DevTools：Vue 插件

此时还可以使用 Chomre 的 Vue 插件 查看 Vue 组件的状态。

也存在一些不足：

• .vue 的组件名不会依据文件名自动命名，需手动在每个 vue 文件中手动添加类似 export default 进行设置组件名，参考 hello-world.vue 中的 export default。

此 Demo 包括功能

• Vue 3
  • setup 形式单文件 .vue
  • import 其他 vue 子组件
  • import 直接 js module
• 预处理器 less

遗留问题

• 难以方便 import 带有子依赖文件的 ES Module
  • 除非你能自行写好 loadOptions 中的的函数 getFile
  • 另一个办法是，若依赖包简单的话，尝试转换成本地文件
• 不支持 Typescript
• 性能稍差，但也不是不可接受

vue3-sfc-loader 的更多详情

vue3-sfc-loader 里面包含更多示例，详见：

• 示例列表
• FAQ
• API