IDEA创建一个VUE项目

不想当个程序员2025-08-14 12:38

由于新手学习VUE，所以使用手动初始化项目

步骤：

创建项目文件夹：在 IDEA 中点击 File > New > Project，选择 Empty Project，指定项目路径。
初始化 npm：在终端中：npm init -y
安装vue：npm install vue
创建基础文件
新建 src 文件夹，并在其中创建：App.vue（根组件）和main.js（入口文件），其中APP.vue代码如下

bash 复制代码

<!-- App.vue -->
<template>
  <div>Hello Vue!</div>
</template>

<script>
export default {
  name: 'App'
}
</script>

main.js代码如下：

bash 复制代码

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

同时在根目录下创建index.html文件，代码如下：

bash 复制代码

<!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：

bash 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [vue()],
    optimizeDeps: {
        include: ['vue'] // 显式指定预构建依赖
    }
})

添加启动脚本
在 package.json 中：

bash 复制代码

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

运行

bash 复制代码

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 并安装）。