用 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