# vue-browser-sfc
> vue 3 browser sfc
Latest version **0.2.2** (published 2021-11-25) · MIT license · 0 weekly downloads
## Install
```sh
npm install vue-browser-sfc
pnpm add vue-browser-sfc
yarn add vue-browser-sfc
bun add vue-browser-sfc
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.2.2 |
| Published | 2021-11-25 |
| First published | 2021-11-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wg |
| Maintainers | nbaxp |
| Keywords | vue, dynamic, sfc |
## Links
- npm: https://www.npmjs.com/package/vue-browser-sfc
- Repository: https://github.com/nbaxp/vue-browser-sfc
- Homepage: https://github.com/nbaxp/vue-browser-sfc#readme
- Issues: https://github.com/nbaxp/vue-browser-sfc/issues
- npm.io page: https://npm.io/package/vue-browser-sfc
## Recent versions
- 0.2.2 (latest) — 2021-11-25
- 0.2.1 — 2021-11-20
- 0.2.0 — 2021-11-20
- 0.1.9 — 2021-11-17
- 0.1.8 — 2021-11-12
- 0.1.7 — 2021-11-12
- 0.1.6 — 2021-11-11
- 0.1.5 — 2021-11-11
- 0.1.4 — 2021-11-11
- 0.1.3 — 2021-11-10
- 0.1.2 — 2021-11-09
- 0.1.1 — 2021-11-09
- 0.1.0 — 2021-11-09
## README
# 浏览器中Vue 3 的单文件组件插件
[](https://www.npmjs.com/package/vue-browser-sfc)
从技术上来讲，在浏览器支持了模块化和 importmap 并且 Edge 和 chrome 统一内核后，使用模块化的方式开发已经可以脱离 webpack 和 bebel 了，如果不是开发库而是开发应用，node.js 也可以不用了。
从 Vue 本身来讲，Vue 3 本身已经不支持 IE 了，因此编译打包来支持低版本已经是个伪命题了。可以扩展或修改 Vue 在找不组件时，动态去服务端加载单文件组件，解析后调用 Vue 本身支持运行时定义异步组件的功能来避免单文件组件的编译问题。
有些项目需要动态加载单文件组件的能力，比如物联网相关的项目，后端对接设备后，前端需要增加对应设备的视图，对于一个节点下的设备，又有对设备的排列和布局自定义的需求，通常要做到配置模板内容后，刷新即可浏览效果的程度，不可能每次都编译后部署。
## 实现原理
1. 使用 Vue 的 defineAsyncComponent 方法动态创建组件。
1. 使用 浏览器原生的 fetch 和 import 加载并导入远程组件。
1. 拦截 Vue 的 resolveComponent 和 resolveDynamicComponent 两个方法，在找不到组件时动态加载。
## 功能
1. 远程加载单文件组件，包括路由组件。
1. 根据组件的加载和卸载对 css 进行控制,包括style和link两种方式。
1. 可直接源码调试组件。
## 缺点
1. 单文件组件内的语法只支持浏览器端原生支持的功能。
1. 不支持 css scoped。
## 使用
默认 /components 目录为组件目录；默认 /views 目录为路由组件目录。
### script 加载方式
不需要对 Vue 源码进行修改。
```index.html
script mode
```
### esm 方式
需要对 Vue 源码进行修改，因为无法修改 esm 方式导出的函数。
```index.html
esm mode
```
---
_Source: https://npm.io/package/vue-browser-sfc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._