用 IntelliJ IDEA 从零搭建一个最简单的 Vue 项目

用 IntelliJ IDEA 从零搭建一个最简单的 Vue 项目

一、安装 Node.js

注：如果已经安装过 Node.js 当然就不需要安装啦。

下载地址：https://nodejs.org/en/download/。
下载完成后安装。
打开命令窗口执行下面两条命令查看是否安装成功：
E:\> node -v
v10.15.3
E:\> npm -v
6.4.1

二、搭建项目
1. 打开 IDEA，新建项目
File > New > Project... > Static Web > 填写项目名称和选择保存位置 > Finish

2.安装 Vue 脚手架工具
先说明下：安装好工具后，以后再创建新的 Vue 工程就不需要再安装啦，因为这是从零搭建，所以有必要逐步详述。
安装 npm 的淘宝镜像（下载速度比较快），打开 IDEA 的 Terminal 窗口：

顺序执行以下的命令：
E:\lab\demo> npm i -g cnpm --registry=https://registry.npm.taobao.org
E:\lab\demo> npm i -g vue-cli
测试是否安装成功：
E:\lab\demo> vue -V

3. 初始化工程
进入工程的上级目录：
E:\lab\demo> cd ..

执行命令初始化工程：
E:\lab> vue init webpack demo
其中 demo 就是新建的工程名。

4. 运行工程
初始化完成后，会显示需要执行的命令（黄色文字）：

第一个命令是进入工程目录：
E:\lab> cd demo

第二个命令会在工程目录下生成名为 node_modules 大文件夹（近 200M 大小）：
E:\lab\demo> npm install
如果把 node_modules 文件夹删除了，就再执行这个命令生成。
第三个命令就是运行工程啦：
E:\lab\demo> npm run dev
然后会提示：

打开浏览器输入：localhost:8080 ， 出现下面画面，说明这个简单的 Vue 工程就搭建完成啦。

Ok，完毕！

参考：https://www.jianshu.com/p/9c1d4f8ed068