idea下搭建基于vue-cli的框架
目录
1.准备工作
先安装好nodejs和npm，安装方法不再赘述，网上有很多教程。使用如下命令查看是否安装成功
node -v
npm -v
如下图则为安装成功
如果没有翻墙工具，最好安装阿里的cnpm镜像，以免出现不必要的麻烦。安装淘宝npm镜像：
npm i -g cnpm --registry=https://registry.npm.taobao.org然后安装vue-cli脚手架
cnpm i -g vue-cli测试是否安装成功：
vue -V2.创建工程
打开idea，创建一个Static Web
Next，下一步输入项目名称，然后Finish即可。进入idea之后，选择左下角的Terminal，直接通过命令行方式进入到项目中。
PS：为了便于操作，其实也可以先创建项目，然后在Terminal中安装npm和cnpm。
3.生成项目
在Terminal中执行如下命令，使用脚手架生成项目
vue init webpack如果你之前对webpack有所接触，其实通过命令不难看出，脚手架创建项目主要还是通过webpack来生成的，这里不得不赞叹一声，webpack实在是太强大了。命令之后之后，会显示 donloading template，然后会一行一行需要输入项目相关信息，我的输入如下：
到这里，一般选择第一项Runtime + Complier即可。
Generate project in current directory?(当前目录作为工程目录)：Y
Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名
Vue build（是否安装编译器）:回车
Install vue-router（是否安装Vue路由）：回车
Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：n
Set up unit tests（安装测试工具）：n
Setup e2e tests with Nightwatch（也是测试相关）：n
Should we run `npm install` for you after the project has been created? (recommended)：选择：No, I will handle that myself
执行如下命令安装相关Dependencies
cnpm iPS：cnpm i = cnpm install 。idea在右下角也会一直有相关提示，让执行Run 'npm install'。最好使用cnpm i 安装，免得有意想不到的麻烦。安装过程根据网速快慢自行等待。安装完成后，就可以直接运行项目了，在命令行执行如下命令：
cnpm run dev然后浏览器打开：localhost:8080，就可以看到项目已经正常跑起来，Ctrl+C退出运行。
4.配置idea
File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version为ECMAScript 6，确认
File - Settings - Plugins：搜索vue，安装Vue.js
Run - Edit Configurations...：点击加号，选择npm，Name为Dev，package.json选择你工程中的package.json，Command为run，Scripts为dev,然后就可以直接在idea中运行了。
继续点击加号，选择npm，Name为Build，package.json选择你工程中的package.json，Command为run，Scripts为build,然后就可以直接在idea中打包了。
至此基于vue-cli最基础的vue项目创建完成，下面我们来安装一些常用的组件，然后自己针对项目做一些通用的工具类和规划。
5.安装babel-polyfill
安装babel-polyfill的意义在于，Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而可以在现有环境执行。所以你可以用ES6编写，而不用考虑环境支持的问题。如果不安装的话，项目完成开发之后，在chrome浏览器显示正常，但是到百度浏览器或者IE低版本浏览器上就显示错误，主要原因在于ie9和一些低版本的浏览器对es6语法不支持。所以非常有必要安装babel,在命令行执行如下命令：
cnpm i babel-polyfill -D安装成功之后，修改/build/webpack.base.conf.js文件，找到
module.exports = {
entry: {
app: './src/main.js'
},
#--> 修改为
module.exports = {
entry: {
app: ['babel-polyfill', './src/main.js']
},6.安装axios
axios是一个基于Promise用于异步请求通信的工具，就像jquery的$.ajax一样。安装axios执行如下命令：
cnpm i axios -D
cnpm i es6-promise -D其中安装es6-promise主要在于为了兼容在某些安卓版本手机上的axios会出现失败的问题。安装完成之后，在main.js中引入
import 'es6-promise/auto'PS：关于axios的兼容性，这里暂时先做记录，实际上我还未遇到，后面来验证。