# vue-import [![NPM Version](https://img.shields.io/npm/v/vue-import.svg)](https://www.npmjs.com/package/vue-import) [![Licence](https://img.shields.io/npm/l/vue-import.svg)](https://www.npmjs.com/package/vue-import) [![Minified Size](https://img.shields.io/bundlephobia/min/vue-import)](https://www.npmjs.com/package/vue-import?file=/dist/vue-import.esm-browser.prod.js) [![Build and Publish](https://github.com/kianfang/vue-import/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/kianfang/vue-import/actions/workflows/npm-publish.yml) [English](./README.md) | 简体中文 在浏览器环境下导入vue组件，即[SFC](https://vuejs.org/guide/scaling-up/sfc.html) (*.vue) 文件。 如果你不想维护`package.json`以及应用 `webpack`等打包工具，那么`vue-import`将能助你一臂之力。 ## [CDN](https://www.jsdelivr.com) ESM导入: ```js import vueImport from 'https://cdn.jsdelivr.net/npm/vue-import/dist/vue-import.esm-browser.js'; ``` 压缩版: ```js import vueImport from 'https://cdn.jsdelivr.net/npm/vue-import/dist/vue-import.esm-browser.prod.js'; ``` ## 使用说明 ### 基础使用 ```js import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js'; import vueImport from 'https://cdn.jsdelivr.net/npm/vue-import/dist/vue-import.esm-browser.prod.js'; const app = createApp(); app.component('my-component', await vueImport('./some/component.vue')); app.mount('#app'); ``` ### 重写组件属性 这里使用`Promise`方式，你也可以使用`async/await`的方式 ```js import { createApp } from 'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.prod.js'; import vueImport from 'https://cdn.jsdelivr.net/npm/vue-import/dist/vue-import.esm-browser.prod.js'; const app = createApp(); vueImport('./some/component.vue', { function beforeMount() { console.log('beforeMount'); }, function mounted() { console.log('mounted'); }, }).then((component) => { app.component('my-component', component); app.mount('#app'); }); ``` ## [示例](https://unpkg.com/vue-import/example/index.html) - `index.html` ```html vue-import
``` - `component/common.vue` 支持 `` 默认导出模块的加载 ```html ``` - `component/home.vue` 异步加载Home组件 ```html ``` - `component/welcome.vue` 支持多组 `` 嵌入方式，组件卸载时，嵌入的样式也会卸载掉 ```html ``` - `component/import.vue` 支持在script片段汇总导入相对路径模块，这里主要是通过正则替换和polyfill去实现。 ```html ```