This is a proof of concept.
Imagine you can import Vue single-file components natively in your browser... without a build step.
In an directory, create an index.html
:
<div id="app"></div>
<script type="module">
import Vue from 'https://unpkg.com/vue/dist/vue.esm.browser.js'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
</script>
In App.vue
:
<template>
<div>{{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hi from the Vue file!'
}
}
}
</script>
<style scoped>
div {
color: red;
}
</style>
Then:
npm i @vue/dev-server
npx vue-dev-server
Imports are requested by the browser as native ES module imports - there's no bundling.
The server intercepts requests to *.vue
files, compiles them on the fly, and sends them back as JavaScript.
For libraries that provide ES modules builds that work in browsers, just directly import them from a CDN.
Imports to npm packages inside .js
files (package name only) are re-written on the fly to point to locally installed files. Currently, only vue
is supported as a special case. Other packages will likely need to be transformed to be exposed as a native browser-targeting ES module.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。