使用 IDEA 搭建 Vue 项目

时间:2022-07-22
本文章向大家介绍使用 IDEA 搭建 Vue 项目,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

安装插件

查看你的 IDEA 的版本号

然后下载对应版本的 Vue 插件,可能需要梯子。

https://plugins.jetbrains.com/plugin/9442-vue-js/versions

也可以从 CSDN 下载:https://download.csdn.net/download/weixin_43941364/12384707

然后进入插件设置页面,选择从本地磁盘安装插件。

安装成功之后重启 IDE 即可。

安装 Vue

我们使用 Vue Cli3 脚手架工具,所以要先安装该工具。

前提是你已经学了 NodeJs 等工具。

npm install -g @vue/cli
或者使用 cnpm, 建议使用 cnpm

创建项目

有三种方式:

方法一:

首先新建一个文件夹,比如我这里就叫做 vue-demo01,然后进入该文件夹,执行vue create hello-world创建项目,然后使用 IDEA 打开项目,最后再 IDEA 的Terminal 中执行npm run serve 运行。

总结一下就两句:

vue create hello-world
npm run serve

方法二:

当然你也可以使用图形化界面创建项目:

在命令行窗口执行命令vue ui,然后他会自动打开浏览器窗口。

选择创建即可。

方法三:

使用 IDEA 直接创建。

配置相关软件的地址,只要你电脑上面有环境,IDEA 就会智能检测,你只需点击下三角选择即可。

他会自动执行相关命令,就代替你执行了 vue create demo的命令了。