使用vite方式构建第一个vue3应用代码：说明： 1.模块语法。使用improt方式导入js文件，script标签必

代码：

<!DOCTYPE html>
<html lang="">
  <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> -->
    <script type="module">
      //导入基本css文件
      import './src/assets/main.css'
      //导入vue基础文件
      import { createApp } from 'vue'
      //导入单文件组件app.vue
      import App from './src/App.vue'
      //创建应用并挂载到id为“app”的div上
      createApp(App).mount('#app')
    </script>
    
  </body>
</html>

说明：

1.模块语法。使用improt方式导入js文件，script标签必须使用type="module"。

2.把js文件放到dom最下方，即body前，可以避免dom加载不充分产生的错误。

3.vue文件和应用创建文件可以放置在其他文件中，然后使用src导入文件（如main.js），可使当前页面解耦，变得更加简洁。

4.ES模块不能通过 file:// 协议工作，只能通过 http:// 协议工作。

5.当js文件移动位置导入，尤其是跨目录层级移动的时候，一定要改变src地址的目录，防止导入失败。