Closed editcue closed 3 years ago
The document didn't tell how to load component which used ES2017 syntax. So, it toke me some time to figure it out.
and here is the code:
index.html
<!DOCTYPE html> <html lang="en"> <head> <!-- Meta --> <meta charset="UTF-8" /> <title>http-vue-loader support 'export default'</title> <!-- Styles --> <!-- Scripts --> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/http-vue-loader@1.4.1/src/httpVueLoader.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="demo"> <h1> This example shows how to load a Vue component module using es2017 syntax: 'export default' </h1> <child></child> </div> <!-- Scripts --> <script> // Init Vue! Vue.use(httpVueLoader); /* 1.transform es2017 syntax to es2015 syntax and convert to umd module mode [!attention!] script tag's attribute "lang" must equal to "text/babel" , or you can custom the "lang" attribute value. eg: <script lang="bable">...<\/script> httpVueLoader.langProcessor.babel=script=>{...} */ httpVueLoader.langProcessor['text/babel'] = function (script) { return Babel.transform(script, { moduleId: this.name, presets: [ 'es2017', 'stage-3', ], plugins: [ 'transform-es2015-modules-umd', ], }).code;; }; //2. handle umd module export httpVueLoader.scriptExportsHandler = function (script) { return this.component.script.module.exports.default; }; var app = new Vue({ el: '#demo', components:{ child:'url:/child.vue' } }) </script> </body> </html>
child.vue
<template> <div> {{txt}} </div> </template> <script lang="text/babel"> export default { name: "child", data() { return { txt: 'This is child component' } }, } </script> <style scoped> </style>
Thanks for sharing!
The document didn't tell how to load component which used ES2017 syntax. So, it toke me some time to figure it out.
Hope the document can complement this example
and here is the code:
index.html
child.vue
full example on codepen
full example