使用浏览器直接预览vue模版
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title></title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.js"></script>
<script>
const options = {
moduleCache: {
vue: Vue,
},
getFile(url) {
return fetch(url).then(response => response.ok ? response.text() : Promise.reject(response));
},
addStyle(styleStr) {
const style = document.createElement('style');
style.textContent = styleStr;
const ref = document.head.getElementsByTagName('style')[0] || null;
document.head.insertBefore(style, ref);
},
log(type, ...args) {
console.log(type, ...args);
}
}
const { loadModule, version } = window["vue3-sfc-loader"];
const app = Vue.createApp({
components: {
'my-component': Vue.defineAsyncComponent(() => loadModule('./myComponent.vue', options)),
},
template: `Hello <my-component></my-component> <sub>from vue3-sfc-loader v${ version }</sub><button>看到了按钮</button>`
});
app.mount('#app');
</script>
</body>
</html>
myComponent.vue
<template>
<span class="example">{{ msg }}</span>
<button type="submit" @click="onclick(msg)">触发按键</button>
</template>
<script setup>
import { ref ,defineAsyncComponent,h} from 'vue'
const msg =ref('myComponent.vue world!')
const onclick=(s)=>{
console.log(s)
}
</script>
<style scoped>
.example {
color: v-bind('color');
}
</style>
如果有配置nginx，直接预览就可以了
否则就用npm运行
npm install express
node -e "require('express')().use(require('express').static(__dirname, {index:'index.html'})).listen(8181)"
网友评论