让vue文件直接在浏览器中运行
前端精髓
共 1729字,需浏览 4分钟
·
2021-02-15 16:11
让 Vue 原生支持在浏览器中直接运行 .vue 文件,这才符合“渐进式框架”的定位!webpack 学不好或者不想学或者嫌麻烦,就可以使用插件在浏览器中直接编译运行 .vue 文件!
这样项目开发起来就不用去配置繁琐的 Webpack,不用等待 Webpack 的编译过程。
在 Vue2 时代,为了能够快速开发,可以使用 FranckFreiburger 开发的 http-vue-loader 插件,它可以使浏览器直接运行 .vue 文件,方便完善代码,实现快速开发;
https://github.com/FranckFreiburger/http-vue-loader
在 Vue3 时代,FranckFreiburger 又开发了 vue3-sfc-loader 插件,可以使浏览器直接运行 Vue3 的 .vue 文件。
https://github.com/FranckFreiburger/vue3-sfc-loader
我非常喜欢 FranckFreiburger 的这两个项目,而且已经在实际项目中使用了,特别好用!唯一一点是不太方便调试。
快速开始
官方示例如下,你需要创建 index.html 文件:
<html>
<body>
<div id="app">div>
<script src="https://unpkg.com/vue@next">script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js">script>
<script>
const options = {
moduleCache: {
vue: Vue
},
async getFile(url) {
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);
},
}
const { loadModule } = window['vue3-sfc-loader'];
const app = Vue.createApp({
components: {
'my-component': Vue.defineAsyncComponent( () => loadModule('./myComponent.vue', options) )
},
template: '
' });
app.mount('#app');
script>
body>
html>
然后你需要创建 myComponent.vue 文件,文件内容如下:
<template>
<div class="title">
hello world
div>
template>
<script>
export default {
setup () {
console.log('hello world')
}
}
script>
<style scoped>
.title {
font-size: 40px;
color: red;
}
style>
最后启动项目:
npm install express
node -e "require('express')().use(require('express').static(__dirname, {index:'index.html'})).listen(8181)"
访问地址:http://127.0.0.1:8181
评论
vue-run-sfc在线运行 & 编辑 Vue 单文件
我一直在思考🤔怎么的Vue文档交互才是好的👍,后来得出的结论是:能看代码能看效果能在线编辑代码,并实时预览结果能做到前2点的Vue组件不少,但能做到第3点,并对文档的DEMO编写做优化处理的并不多,所
vue-run-sfc在线运行 & 编辑 Vue 单文件
0
vue-run-sfc在线运行 & 编辑 Vue 单文件
我一直在思考 🤔 怎么的 Vue 文档交互才是好的 👍, 后来得出的结论是:能看代码能看效果能在
vue-run-sfc在线运行 & 编辑 Vue 单文件
0
react-vue在 React 中运行 Vue
React-Vue旨在连接React和Vue,帮助您在React中运行Vue。用途:使用Vue的Reactivity系统来观察React组件使用react-vue-loader以在React应用中运行
react-vue在 React 中运行 Vue
0
bExplore手机文件浏览器
bExplore是一个采用J2ME开发的手机文件浏览器。它不仅可以浏览本机上的文件,也可以通过蓝牙浏览远程设备上的文件。并能够在本机与远程设备之间相互传输文件。经测试支持NokiaS60系列手机。
bExplore手机文件浏览器
0
Wasmer-JS在浏览器和 Node.js 中运行 Wasi
Wasmer-JS允许开发人员在Node和浏览器中运行Wasi模块。Wasmer-JS构建在现有解决方案之上,这允许开发人员在JavaScript环境中运行Wasi。Wasmer-JS是一个由四个包组
Wasmer-JS在浏览器和 Node.js 中运行 Wasi
0