使用Vue-cli 2.x搭建vue项目并在IDEA中配置的详细过程

今天第一次接触到了SPA——单页面应用的开发。并使用Vue进行开发SPA。下面记录这次学习到的vue项目创建过程。

一、搭建Node.js环境

Node.js可以直接去官网下载：https://nodejs.org/zh-cn/。推荐下载长期支持版

安装过程选择默认即可，安装完成后，在cmd命令行中输入node -v和npm -v，查看是否安装成功。其中npm包管理工具是集成在Node.js中的。

如下图，出现对应版本号就说明安装成功了。

二、设置npm下载地址

因为执行npm install命令时，默认使用的是国外的下载源，可能导致下载依赖包时出错。
可以通过如下代码配置为使用淘宝镜像，改为国内镜像能有效提高下载的成功率。

npm config set registry https://registry.npm.taobao.org

通过以下代码查看npm的仓库地址，以查看是否成功设置下载地址。

npm config get registry

配置成功，这样就可以使用cnpm代替npm来安装依赖包了。

三、安装vue-cli 2.x

输入以下命令，安装vue的脚手架工具vue-cli

cnpm install -g vue-cli

安装完成后，就可以开始构建项目了。

四、构建项目

进入到想要放置项目的位置，输入以下命令使用webpack模板进行创建项目，

vue init webpack 项目名

运行命令后，用户需要进行一些设置，如下

下载完成后，如果上面操作的最后一项中不是选择npm，就需要cd到项目中，来使用以下命令自行下载依赖：

cnpm install

我这里，前面构建项目时已下载好了

五、运行项目

运行以下命令以热加载的方式运行我们的应用，热加载可以让我们不用手动刷新，浏览器就能实时看到修改后的效果。

cnpm run dev

通过以下地址，在浏览器中访问

出现如下界面，项目创建成功，这样就成功利用vue-cli初始化构建vue项目。

通过Ctrl+c停止项目运行

初始的项目目录结构如下：

六、IDEA中配置vue

(1)点击File–>Settings–>Plugins–>搜索vue.js插件进行安装，下面的图中我已经安装好了。

(2)在IDEA中打开刚才创建的test项目
opem–>对应的目录下，选择test项目,然后在IDEA中运行项目。
可以通过底部的Terminal窗口输入命令

为了方便使用，可以直接在IDEA中的Add Configuration配置。


这样就可以直接点击三角符号运行了