%3c/body%3e%3c/html%3e,docs/examples.md · 浮生若梦张/vue3-sfc-loader - Gitee.com

最新推荐文章于 2024-06-25 15:02:07 发布

音速键盘猫

最新推荐文章于 2024-06-25 15:02:07 发布

阅读量8.4k

点赞数

文章标签： %3c/body%3e%3c/html%3e

* [Examples](#examples)

* [A more complete API usage example](#a-more-complete-api-usage-example)

* [Load a Vue component from a string](#load-a-vue-component-from-a-string)

* [Using another template language (pug)](#using-another-template-language-pug)

* [Using another style language (stylus)](#using-another-style-language-stylus)

* [SFC style CSS variable injection (new edition)](#sfc-style-css-variable-injection-new-edition)

* [Minimalist example (just for the fun)](#minimalist-example-just-for-the-fun)

* [Use `options.loadModule` hook](#use-optionsloadmodule-hook)

* [Dynamic component (`:is` Special Attribute)](#dynamic-component-is-special-attribute)

* [Nested components](#nested-components)

* [Example using SFC Custom Blocks for i18n](#example-using-sfc-custom-blocks-for-i18n)

# Examples

:warning: **beware**, the following examples are sticky to version *0.4.5*. For your use, prefer the [latest version](../README.md#dist)

**Try the examples locally**

Since most browsers do not allow you to access local filesystem, you can start a small [express](https://expressjs.com/) server to run these examples.

Run the following commands to start a basic web server on port `8181`:

```sh

npm install express # or yarn add express

node -e "require('express')().use(require('express').static(__dirname, {index:'index.html'})).listen(8181)"

```

## A more complete API usage example

```html

const componentSource = /* */;

const options = {

moduleCache: {

vue: Vue,

async getFile(url) {

if ( url === './myComponent.vue' )

return Promise.resolve(componentSource);

const res = await fetch(url);

if ( !res.ok )

throw Object.assign(new Error(url+' '+res.statusText), { res });

return await res.text();

addStyle(textContent) {

const style = Object.assign(document.createElement('style'), { textContent });

const ref = document.head.getElementsByTagName('style')[0] || null;

document.head.insertBefore(style, ref);

log(type, ...args) {

console[type](...args);

compiledCache: {

set(key, str) {

// naive storage space management

for (;;) {

try {

// doc: https://developer.mozilla.org/en-US/docs/Web/API/Storage

window.localStorage.setItem(key, str);

break;

} catch(ex) {

// handle: Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'XXX' exceeded the quota

window.localStorage.removeItem(window.localStorage.key(0));

}

get(key) {

return window.localStorage.getItem(key);

additionalModuleHandlers: {

'.json': (source, path, options) => JSON.parse(source),

}

const { loadModule } = window['vue3-sfc-loader'];

const myComponent = loadModule('./myComponent.vue', options);

const app = Vue.createApp({

components: {

'my-component': Vue.defineAsyncComponent( () => myComponent ),

template: 'Hello '

});

app.mount('#app');

```

[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cdiv+id%3D%22app%22%3E%3C%2Fdiv%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.4.5%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++const+componentSource+%3D+%2F*+%3C!--+*%2F%60%0A++++++%3Ctemplate%3E%0A++++++++%3Cspan+class%3D%22example%22%3E%7B%7B+msg+%7D%7D%3C%2Fspan%3E%0A++++++%3C%2Ftemplate%3E%0A++++++%3Cscript%3E%0A++++++++export+default+%7B%0A++++++++++data+()+%7B%0A++++++++++++return+%7B%0A++++++++++++++msg%3A+'world!'%0A++++++++++++%7D%0A++++++++++%7D%0A++++++++%7D%0A++++++%3C%2Fscript%3E%0A%0A++++++%3Cstyle+scoped%3E%0A++++++++.example+%7B%0A++++++++++color%3A+red%3B%0A++++++++%7D%0A++++++%3C%2Fstyle%3E%0A++++%60%2F*+--%3E+*%2F%3B%0A%0A++++const+options+%3D+%7B%0A%0A++++++moduleCache%3A+%7B%0A++++++++vue%3A+Vue%2C%0A++++++%7D%2C%0A%0A++++++async+getFile(url)+%7B%0A%0A++++++++if+(+url+%3D%3D%3D+'.%2FmyComponent.vue'+)%0A++++++++++return+Promise.resolve(componentSource)%3B%0A%0A++++++++const+res+%3D+await+fetch(url)%3B%0A++++++++if+(+!res.ok+)%0A++++++++++throw+Object.assign(new+Error(url%2B'+'%2Bres.statusText)%2C+%7B+res+%7D)%3B%0A++++++++return+await+res.text()%3B%0A++++++%7D%2C%0A%0A++++++addStyle(textContent)+%7B%0A%0A++++++++const+style+%3D+Object.assign(document.createElement('style')%2C+%7B+textContent+%7D)%3B%0A++++++++const+ref+%3D+document.head.getElementsByTagName('style')%5B0%5D+%7C%7C+null%3B%0A++++++++document.head.insertBefore(style%2C+ref)%3B%0A++++++%7D%2C%0A%0A++++++log(type%2C+...args)+%7B%0A%0A++++++++console%5Btype%5D(...args)%3B%0A++++++%7D%2C%0A%0A++++++compiledCache%3A+%7B%0A++++++++set(key%2C+str)+%7B%0A%0A++++++++++%2F%2F+naive+storage+space+management%0A++++++++++for+(%3B%3B)+%7B%0A%0A++++++++++++try+%7B%0A%0A++++++++++++++%2F%2F+doc%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FStorage%0A++++++++++++++window.localStorage.setItem(key%2C+str)%3B%0A++++++++++++++break%3B%0A++++++++++++%7D+catch(ex)+%7B%0A%0A++++++++++++++%2F%2F+handle%3A+Uncaught+DOMException%3A+Failed+to+execute+'setItem'+on+'Storage'%3A+Setting+the+value+of+'XXX'+exceeded+the+quota%0A%0A++++++++++++++window.localStorage.removeItem(window.localStorage.key(0))%3B%0A++++++++++++%7D%0A++++++++++%7D%0A++++++++%7D%2C%0A++++++++get(key)+%7B%0A%0A++++++++++return+window.localStorage.getItem(key)%3B%0A++++++++%7D%2C%0A++++++%7D%2C%0A%0A++++++additionalModuleHandlers%3A+%7B%0A++++++++'.json'%3A+(source%2C+path%2C+options)+%3D%3E+JSON.parse(source)%2C%0A++++++%7D%0A++++%7D%0A%0A++++const+%7B+loadModule+%7D+%3D+window%5B'vue3-sfc-loader'%5D%3B%0A++++const+myComponent+%3D+loadModule('.%2FmyComponent.vue'%2C+options)%3B%0A%0A++++const+app+%3D+Vue.createApp(%7B%0A++++++components%3A+%7B%0A++++++++'my-component'%3A+Vue.defineAsyncComponent(+()+%3D%3E+myComponent+)%2C%0A++++++%7D%2C%0A++++++template%3A+'Hello+%3Cmy-component%3E%3C%2Fmy-component%3E'%0A++++%7D)%3B%0A%0A++++app.mount('%23app')%3B%0A%0A++%3C%2Fscript%3E%0A%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)

[:top:](#readme)

## Load a Vue component from a string

```html

/* */

const options = {

moduleCache: {

vue: Vue,

getFile(url) {

if ( url === './myComponent.vue' )

return Promise.resolve(sfcContent);

addStyle() {},

}

const { loadModule } = window['vue3-sfc-loader'];

Vue.createApp(Vue.defineAsyncComponent(() => loadModule('./myComponent.vue', options))).mount(document.body);

```

[:top:](#readme)

## Using another template language (pug)

```html

/* */

const options = {

moduleCache: {

vue: Vue,

pug: require('pug'),

getFile(url) {

if ( url === './myPugComponent.vue' )

return Promise.resolve(sfcContent);

addStyle: () => {},

}

const { loadModule } = window["vue3-sfc-loader"];

Vue.createApp(Vue.defineAsyncComponent(() => loadModule('./myPugComponent.vue', options))).mount('#app');

```

[:top:](#readme)

## Using another style language (stylus)

```html

/* */

const options = {

moduleCache: {

vue: Vue,

stylus: source => Object.assign(stylus(source), { deps: () => [] }), // note: deps() does not work in this bundle of stylus (see https://stylus-lang.com/docs/js.html#deps)

getFile: () => vueContent,

addStyle(styleStr) {

const style = document.createElement('style');

style.textContent = styleStr;

const ref = document.head.getElementsByTagName('style')[0] || null;

document.head.insertBefore(style, ref);

}

Vue.createApp(Vue.defineAsyncComponent(() => window['vue3-sfc-loader'].loadModule('file.vue', options))).mount(document.body);

```

[:top:](#readme)

## SFC style CSS variable injection (new edition)

_see at [vuejs/rfcs](https://github.com/vuejs/rfcs/pull/231)_

```html

/* */

const options = {

moduleCache: {

vue: Vue,

getFile(url) {

if ( url === './myComponent.vue' )

return Promise.resolve(sfcContent);

addStyle(textContent) {

const style = Object.assign(document.createElement('style'), { textContent });

const ref = document.head.getElementsByTagName('style')[0] || null;

document.head.insertBefore(style, ref);

}

const { loadModule } = window["vue3-sfc-loader"];

Vue.createApp(Vue.defineAsyncComponent(() => loadModule('./myComponent.vue', options))).mount('#app');

```

[:top:](#readme)

## Minimalist example (just for the fun)

```html

/* */

const options = {

moduleCache: { vue: Vue },

getFile: () => vueContent,

addStyle: () => {},

}

Vue.createApp(Vue.defineAsyncComponent(() => window['vue3-sfc-loader'].loadModule('file.vue', options))).mount(document.body);

```

[:top:](#readme)

## Use `options.loadModule` hook

```html

/* */

const options = {

moduleCache: { vue: Vue },

async loadModule(path) {

// (TBD)

getFile(url) {

if ( url === './myComponent.vue' )

return Promise.resolve(sfcContent);

addStyle() {},

}

const { loadModule } = window['vue3-sfc-loader'];

Vue.createApp(Vue.defineAsyncComponent(() => loadModule('./myComponent.vue', options))).mount(document.body);

```

[:top:](#readme)

## Dynamic component (`:is` Special Attribute)

In the following example we use a trick to preserve reactivity through the `Vue.defineAsyncComponent()` call (see the following [discussion](https://github.com/FranckFreiburger/vue3-sfc-loader/discussions/6))

```html

const options = {

moduleCache: {

vue: Vue,

getFile(url) {

switch ( url ) {

case 'a.vue':

return `

case 'b.vue':

return `

}

return fetch(url).then(res => res.ok ? res.text() : Promise.reject( new Error(res.statusText) ));

addStyle() {},

}

const { loadModule } = window["vue3-sfc-loader"];

const app = Vue.createApp({

template: `

@click="currentComponent = currentComponent === 'a' ? 'b' : 'a'"

>toggle

dynamic component:

computed: {

comp() {

const currentComponent = this.currentComponent; // the trick is here

return Vue.defineAsyncComponent( () => loadModule(currentComponent + '.vue', options) )

// or, equivalently, use Function.prototype.bind function like this:

// return Vue.defineAsyncComponent( (url => loadModule(url, options)).bind(null, this.currentComponent + '.vue') )

}

data() {

return {

currentComponent: 'a',

}

});

app.mount('#app');

```

[:top:](#readme)

## Nested components

```html

/* */

const options = {

moduleCache: { vue: Vue },

getFile: url => config.files[url],

addStyle: () => {},

}

Vue.createApp(Vue.defineAsyncComponent(() => window['vue3-sfc-loader'].loadModule('/main.vue', options))).mount(document.body);

```

[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.4.5%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+config+%3D+%7B%0A++++++files%3A+%7B%0A++++++++'%2Fmain.vue'%3A+%60%0A++++++++++++%3Ctemplate%3E%0A++++++++++++++++%3Cfoo%2F%3E%0A++++++++++++%3C%2Ftemplate%3E%0A++++++++++++%3Cscript%3E%0A++++++++++++++++import+foo+from+'.%2Ffoo.vue'%0A%0A++++++++++++++++export+default+%7B%0A++++++++++++++++++++components%3A+%7B%0A++++++++++++++++++++++++foo%2C%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++created()+%7B%0A++++++++++++++++++++++++console.log('main+created')%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++mounted()+%7B%0A++++++++++++++++++++++++console.log('main+mounted')%0A++++++++++++++++++++%7D%0A++++++++++++++++%7D%0A++++++++++++%3C%2Fscript%3E%0A++++++++%60%2C%0A%0A++++++++'%2Ffoo.vue'%3A+%60%0A++++++++++++%3Ctemplate%3E%0A++++++++++++++++%3Cbar%2F%3E%0A++++++++++++%3C%2Ftemplate%3E%0A++++++++++++%3Cscript%3E%0A++++++++++++++++import+bar+from+'.%2Fbar.vue'%0A%0A++++++++++++++++export+default+%7B%0A++++++++++++++++++++components%3A+%7B%0A++++++++++++++++++++++++bar%2C%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++created()+%7B%0A++++++++++++++++++++++++console.log('foo+created')%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++mounted()+%7B%0A++++++++++++++++++++++++console.log('foo+mounted')%0A++++++++++++++++++++%7D%0A++++++++++++++++%7D%0A++++++++++++%3C%2Fscript%3E%0A++++++++%60%2C%0A%0A++++++++'%2Fbar.vue'%3A+%60%0A++++++++++++%3Ctemplate%3E%0A++++++++++++++++end%0A++++++++++++%3C%2Ftemplate%3E%0A++++++++++++%3Cscript%3E%0A%0A++++++++++++++++export+default+%7B%0A++++++++++++++++++++components%3A+%7B%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++created()+%7B%0A++++++++++++++++++++++++console.log('bar+created')%0A++++++++++++++++++++%7D%2C%0A++++++++++++++++++++mounted()+%7B%0A++++++++++++++++++++++++console.log('bar+mounted')%0A++++++++++++++++++++%7D%0A++++++++++++++++%7D%0A++++++++++++%3C%2Fscript%3E%0A++++++++%60%0A++++++%7D%0A++++%7D%3B%0A++++%2F*+--%3E+*%2F%0A%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B+vue%3A+Vue+%7D%2C%0A++++++getFile%3A+url+%3D%3E+config.files%5Burl%5D%2C%0A++++++addStyle%3A+()+%3D%3E+%7B%7D%2C%0A++++%7D%0A%0A++++Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+window%5B'vue3-sfc-loader'%5D.loadModule('%2Fmain.vue'%2C+options))).mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)

[:top:](#readme)

## Example using SFC Custom Blocks for i18n

```html

/* */

const i18n = VueI18n.createI18n();

const options = {

moduleCache: { vue: Vue },

getFile: url => config.files[url],

addStyle: () => {},

customBlockHandler(block, filename, options) {

if ( block.type !== 'i18n' )

return

const messages = JSON.parse(block.content);

for ( let locale in messages )

i18n.global.mergeLocaleMessage(locale, messages[locale]);

}

const app = Vue.createApp(Vue.defineAsyncComponent(() => window['vue3-sfc-loader'].loadModule('/component.vue', options)));

app.use(i18n);

app.mount(document.body);

```

[open in JSBin ▶](http://jsbin.com/?html,output&html=%3C!DOCTYPE+html%3E%0A%3Chtml%3E%0A%3Cbody%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue%40next%2Fdist%2Fvue.runtime.global.prod.js%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Funpkg.com%2Fvue-i18n%40next%22%3E%3C%2Fscript%3E%0A++%3Cscript+src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue3-sfc-loader%400.4.5%2Fdist%2Fvue3-sfc-loader.js%22%3E%3C%2Fscript%3E%0A++%3Cscript%3E%0A%0A++++%2F*+%3C!--+*%2F%0A++++const+config+%3D+%7B%0A++++++files%3A+%7B%0A++++++++'%2Fcomponent.vue'%3A+%60%0A++++++++++%3Ctemplate%3E%0A++++++++++++%7B%7B+%24t('hello')+%7D%7D%0A++++++++++%3C%2Ftemplate%3E%0A++++++++++%3Ci18n%3E%0A++++++++++%7B%0A++++++++++++%22en%22%3A+%7B%0A++++++++++++++%22hello%22%3A+%22hello+world!%22%0A++++++++++++%7D%2C%0A++++++++++++%22ja%22%3A+%7B%0A++++++++++++++%22hello%22%3A+%22%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%E3%80%81%E4%B8%96%E7%95%8C%EF%BC%81%22%0A++++++++++++%7D%0A++++++++++%7D%0A++++++++++%3C%2Fi18n%3E%0A+++++++%60%0A++++++%7D%0A++++%7D%3B%0A++++%2F*+--%3E+*%2F%0A%0A++++const+i18n+%3D+VueI18n.createI18n()%3B%0A%0A++++const+options+%3D+%7B%0A++++++moduleCache%3A+%7B+vue%3A+Vue+%7D%2C%0A++++++getFile%3A+url+%3D%3E+config.files%5Burl%5D%2C%0A++++++addStyle%3A+()+%3D%3E+%7B%7D%2C%0A++++++customBlockHandler(block%2C+filename%2C+options)+%7B%0A%0A++++++++if+(+block.type+!%3D%3D+'i18n'+)%0A++++++++++return%0A%0A++++++++const+messages+%3D+JSON.parse(block.content)%3B%0A++++++++for+(+let+locale+in+messages+)%0A++++++++++i18n.global.mergeLocaleMessage(locale%2C+messages%5Blocale%5D)%3B%0A++++++%7D%0A++++%7D%0A%0A++++const+app+%3D+Vue.createApp(Vue.defineAsyncComponent(()+%3D%3E+window%5B'vue3-sfc-loader'%5D.loadModule('%2Fcomponent.vue'%2C+options)))%3B%0A%0A++++app.use(i18n)%3B%0A%0A++++app.mount(document.body)%3B%0A%0A++%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A)

[:top:](#readme)

一键复制

编辑

Web IDE

原始数据

按行查看

历史

音速键盘猫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
%3c/body%3e%3c/html%3e,docs/examples.md · 浮生若梦张/vue3-sfc-loader - Gitee.com

* [Examples](#examples)* [A more complete API usage example](#a-more-complete-api-usage-example)* [Load a Vue component from a string](#load-a-vue-component-from-a-string)* [Using another template lan...
复制链接

扫一扫