How vue files run in browsers
This article mainly introduces how to run the vue file in the browser, the article is very detailed, has a certain reference value, interested friends must read it!
The vue file runs 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 the 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 runs in the browser
Create a new vue file
The official example is as follows. You need to create an index.html file:
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')
Then you need to create a myComponent.vue file with the following contents:
Hello world
Export default {setup () {console.log ('hello world')}} .title {font-size: 40px; color: red;}
Start the project
In cmd, use the cd command to enter the vue project
In the project directory, run the command npm run dev, which will run our application as a hot load, which allows us to see the effect of the changes in real time without manually refreshing the browser after modifying the code.
Just type localhost:8080 in the browser.
The above is all the contents of the article "how vue files run in browsers". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
