How to create a vue.js app in Visual Studio Code-CodePudding

Just starting with vue.js. I am using Visual Studio Code, and have followed all the instructions for using VS Code with the Volar extension. I can see from the source files that the sample project includes a 'hello world' page (HelloWorld.vue). But when I run index.html I just get a blank screen , because of a CORS error (see below).

I haven't changed any code from the installed sample, so it appears that the vuejs.org instructions are not complete.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app">
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

and main.js:

import { createApp } from 'vue'
import App from './App.vue'

import './assets/main.css'

createApp(App).mount('#app')

So what do I need to do to make use of the example .vue components? The Chrome console shows a CORS problem:

Access to script at 'file:///C:/Users/quilk/Documents/testvue/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

CodePudding user response：

To have an easy and simple time working with Vue, I recommend following the official steps:

npm init vue@latest
cd <your-project-name>
npm install
npm run dev

For CORS, you need to fix it on your backend/service dashboard. More details are available here.