How to run the vue file in the browser: 1. Open the cmd command window and use the cd command to enter the vue project directory containing the vue file; 2. In the project directory, run the command "npm run dev" to start Project; 3. Enter "localhost:8080" in the browser address bar.
The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.
The vue file is run in the browser
##New vue file
<html><body> <p id="app"></p> <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: '<my-component></my-component>' }); app.mount('#app'); </script></body></html>
<template> <p class="title"> hello world </p> </template> <script> export default { setup () { console.log('hello world') } } </script> <style scoped> .title { font-size: 40px; color: red; } </style>
Start the project
npm run dev will run our application using hot loading. Hot loading allows us to see the modified effects in real time without manually refreshing the browser after modifying the code.
Enter localhost:8080 in the browser.
vue.js Tutorial"
The above is the detailed content of How to run vue files in the browser. For more information, please follow other related articles on the PHP Chinese website!