Java登陸第三十五天——VUE初始頁面解析

rowbed發表於2024-03-14
JavaVue

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

相關文章