使用 IDEA 搭建 Vue 项目

使用 IDEA 搭建 Vue 项目_第1张图片

安装插件

查看你的 IDEA 的版本号
使用 IDEA 搭建 Vue 项目_第2张图片
然后下载对应版本的 Vue 插件,可能需要梯子。

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

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

使用 IDEA 搭建 Vue 项目_第3张图片
然后进入插件设置页面,选择从本地磁盘安装插件。
使用 IDEA 搭建 Vue 项目_第4张图片
安装成功之后重启 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

使用 IDEA 搭建 Vue 项目_第5张图片

方法二:

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

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

使用 IDEA 搭建 Vue 项目_第6张图片
选择创建即可。
使用 IDEA 搭建 Vue 项目_第7张图片

方法三:

使用 IDEA 直接创建。
使用 IDEA 搭建 Vue 项目_第8张图片
配置相关软件的地址,只要你电脑上面有环境,IDEA 就会智能检测,你只需点击下三角选择即可。

使用 IDEA 搭建 Vue 项目_第9张图片
他会自动执行相关命令,就代替你执行了 vue create demo的命令了。
使用 IDEA 搭建 Vue 项目_第10张图片
使用 IDEA 搭建 Vue 项目_第11张图片

你可能感兴趣的:(实用工具)