Java登陆第三十五天——VUE初始页面解析

Vite创建的默认Vue3项目中package.json文件信息如下：

{
  "name": "vmoudle1",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.4.19"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.1.4"
  }
}

其中，存在npm 脚本

  "scripts": {
    "dev": "vite", // 启动开发服务器
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }

控制台运行npm脚本，启动项目。

npm run dev

页面如下。(为便于理解，我修改了项目)
image

查看index.html文件

<!doctype html>
<html lang="en">
<!--删除head标签中的内容-->
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

这么点东西怎么能够显示上图页面呢？

解析：(附带项目结构)
image
image

posted @ 2024-03-14 14:45  rowbed  阅读(20)  评论(0)  编辑  收藏  举报