1. 在IDEA中配置vue插件

点击File-->Settings-->Plugins-->搜索vue.js插件进行安装。

image.png

安装vue后，需要重启软件

image.png

2. 搭建node.js环境

安装node.js 可以去官网下载：https://nodejs.org/zh-cn/

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

输入

node --version

检查Node.js版本

image.png

npm包管理器是集成在node中的，输入npm -v 就会显示npm版本信息.

image.png

node环境已经安装成功，由于有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所以还需要安装npm的国内镜像：cnpm

3. 安装cnpm

在命令行中输入
npm install -g cnpm --registry=http://registry.npm.taobao.org
然后等待安装，安装完成之后，我们就可以用cnpm代替npm来安装依赖包了。

image.png

安装完毕

image.png

4. 安装vue-cli脚手架构建工具

在命令行中运行命令cnpm install -g vue-cli,然后等待安装完成，通过以上三步，我们的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

image.png

5. 构建运行项目

image.png

运行命令初始化的时候会让用户输入几个基本的选项，如项目名称、描述、作者等信息，可以直接回车默认就可以了。

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

运行

image.png