由于新手学习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 并安装）。
