IDEA中Vue的安装和使用【window10】

一.准备工作

Vue是前端开发框架。搭建框架，首先要搭建环境。搭建Vue的环境工具：node.js（JavaScript的运行环境），然后再用nodejs里面的npm（包管理和分发工具）来安装依赖包。

二.安装node.js

下载地址：https://nodejs.org/zh-cn/
 最好下载稳定版本：下载完之后（安装程序可以直接next step）

三.检查是否安装成功

打开CMD 输出下图代码，会显示版本信息。

四.打开IDEA准备创建项目

1.打开IDEA创建一个 Static Web 项目

2.打开Terminal

五.正式创建项目

1.首先安装npm的阿里镜像，原生npm下载依赖包过慢，镜像可以提高下载效率。

输入指令：输入后等待安装完成

npm i -g cnpm --registry=https://registry.npm.taobao.org

出现错误：

更换镜像源即可

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

2.安装Vue的脚手架工具vue-cli

npm i -g vue-cli
测试是否安装成功：
vue -V    //注意：-V是大写的V，不是小写的v

3、安装webpack工具（如果以前没有安装webpack，一定要安装！！！）

cnpm install -g webpack

六.基本工具安装完成后，开始创建项目

指令：vue init webpack 项目名

创建成功的项目的目录结构：

八.查看IDEA的Static Web里的Vue项目

九.惊喜的时刻：运行Vue项目

--运行Vue项目
cnpm run dev

运行成功展示：htttp://localhost:8080

十.下一步就是配置好IDEA的Vue环境了（配置好了，才能编写代码！）
1.在setting中的plugins安装Vue.js插件（本人已经安装）

2.配置HTML支持.vue后缀的文件。

3.配置ECMAScript6