如何将构建好的Vue项目导入到IDEA并成功运行

我会带着你远行 2023-09-29 12:18 0阅读 0赞

### 导入： ###

通过命令行窗口构建的vue项目通常不能直接导入到idea中，因为文件夹很特殊（不包含.idea文件夹），不是传统的项目结构，但是我们可以直接open一下

![74edacebfc7f4fc4b0af838a32592af5.png][]

打开后就会自动给你生成.idea文件夹了

![53e219a00b434df396cf3c979ed2df42.png][]

### 准备工作： ###

在terminal终端输入指令测试自己的node.js环境

![c4f8e4f3ad3044f29474492de303709c.png][]

都能正确输出版本号就说明环境搭建好了。

如果没有搭建好可以参考这个文章 ：[好细的Vue安装与配置\_LCLANNADT的博客-CSDN博客\_vue安装][Vue_LCLANNADT_-CSDN_vue]

### 运行（两种方式）： ###

#### 1. 终端启动 ####

在terminal输入（记得cd到项目根目录）

npm run dev

![8882a0167a7e42f18741f0c02f3adb48.png][]

能够运行成功。

如果没能成功，就安装一下vue插件。

打开file---setting---Plugins，搜索并安装Vue.js，安装完后重启idea

![4aebf5349aea4be9b17bb8436671b294.png][]

vue插件的安装本质上是能够让你能够新建并使用Vue Component

![7029262de7a94d538ccb766ffa559ca8.png][]

#### 2. 通过Configurations启动 ####

先点右上角的Add Configuration...

![921d3eae158e48e2b38e24745fef7c21.png][]

点+，找到npm

![309e40cbd46a4464ac476d3e6c95c611.png][]

编辑配置

![f06b65573ce7427ab448c637a057f5ea.png][]

启动，能正常运行

![c16fcf72f249459a88877130938588d1.png][]

接下来试试打包

![f334f4a21c04451b8627896cdb424bd5.png][]

运行

![7e78b613750f4fc7a073c4d377b2be25.png][]

![a709517d70264a33b3a8befa1f3cb2ab.png][]

#### 更便捷的方法 ####

右键package.json，然后show npm scripts

![3ee971af4845404c869ab8b1175de839.png][]

你就成功解锁了隐藏副本（npm命令窗口）

![ae4f3e8d9b15431bbb02b0e05c1b8701.png][]

类似于后端的Maven，可以双击直接运行，推荐使用。 同时还会部署到Configurations

![c9a5afa86943495fbf28c7fe48d783a6.png][]

to be continued......

[74edacebfc7f4fc4b0af838a32592af5.png]: https://img-blog.csdnimg.cn/74edacebfc7f4fc4b0af838a32592af5.png
[53e219a00b434df396cf3c979ed2df42.png]: https://img-blog.csdnimg.cn/53e219a00b434df396cf3c979ed2df42.png
[c4f8e4f3ad3044f29474492de303709c.png]: https://img-blog.csdnimg.cn/c4f8e4f3ad3044f29474492de303709c.png
[Vue_LCLANNADT_-CSDN_vue]: https://blog.csdn.net/m0_57545353/article/details/124366678
[8882a0167a7e42f18741f0c02f3adb48.png]: https://img-blog.csdnimg.cn/8882a0167a7e42f18741f0c02f3adb48.png
[4aebf5349aea4be9b17bb8436671b294.png]: https://img-blog.csdnimg.cn/4aebf5349aea4be9b17bb8436671b294.png
[7029262de7a94d538ccb766ffa559ca8.png]: https://img-blog.csdnimg.cn/7029262de7a94d538ccb766ffa559ca8.png
[921d3eae158e48e2b38e24745fef7c21.png]: https://img-blog.csdnimg.cn/921d3eae158e48e2b38e24745fef7c21.png
[309e40cbd46a4464ac476d3e6c95c611.png]: https://img-blog.csdnimg.cn/309e40cbd46a4464ac476d3e6c95c611.png
[f06b65573ce7427ab448c637a057f5ea.png]: https://img-blog.csdnimg.cn/f06b65573ce7427ab448c637a057f5ea.png
[c16fcf72f249459a88877130938588d1.png]: https://img-blog.csdnimg.cn/c16fcf72f249459a88877130938588d1.png
[f334f4a21c04451b8627896cdb424bd5.png]: https://img-blog.csdnimg.cn/f334f4a21c04451b8627896cdb424bd5.png
[7e78b613750f4fc7a073c4d377b2be25.png]: https://img-blog.csdnimg.cn/7e78b613750f4fc7a073c4d377b2be25.png
[a709517d70264a33b3a8befa1f3cb2ab.png]: https://img-blog.csdnimg.cn/a709517d70264a33b3a8befa1f3cb2ab.png
[3ee971af4845404c869ab8b1175de839.png]: https://img-blog.csdnimg.cn/3ee971af4845404c869ab8b1175de839.png
[ae4f3e8d9b15431bbb02b0e05c1b8701.png]: https://img-blog.csdnimg.cn/ae4f3e8d9b15431bbb02b0e05c1b8701.png
[c9a5afa86943495fbf28c7fe48d783a6.png]: https://img-blog.csdnimg.cn/c9a5afa86943495fbf28c7fe48d783a6.png