IDEA創建一個VUE項目

由于新手學習VUE，所以使用手動初始化項目
步驟：

創建項目文件夾：在 IDEA 中點擊 File > New > Project，選擇 Empty Project，指定項目路徑。
初始化 npm：在終端中：npm init -y
安裝vue：npm install vue
創建基礎文件
新建 src 文件夾，并在其中創建：App.vue（根組件）和main.js（入口文件），其中APP.vue代碼如下

<!-- App.vue -->
<template><div>Hello Vue!</div>
</template><script>
export default {name: 'App'
}
</script>

main.js代碼如下：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');

同時在根目錄下創建index.html文件，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

配置打包工具（如 Vite）
安裝 Vite：npm install vite @vitejs/plugin-vue --save-dev
創建 vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],optimizeDeps: {include: ['vue'] // 顯式指定預構建依賴}
})

添加啟動腳本
在 package.json 中：

"scripts": {"dev": "vite","build": "vite build"
}

運行

npm run dev

目錄如圖
your-project/
├── index.html # 必須存在
├── src/
│ ├── main.js # Vue 入口
│ └── App.vue # 根組件
├── vite.config.js # 或 vite.config.mjs
└── package.json
在這里插入圖片描述
配置 IDEA 支持 Vue
插件支持：
確保安裝 Vue.js 插件（File > Settings > Plugins，搜索 Vue 并安裝）。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/93695.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/93695.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/93695.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！