创建iview+vue项目

最近项目中要升级框架，前端要使用Iview+Vue框架做前后端分离，所以没办法，又要学习前端的东西，下面简单介绍下如何快速创建一个简单前端项目架子；

• 安装node环境
• 使用淘宝的镜像
• 安装vue-cli脚手架
• 创建项目

一.安装node环境

在搭建vue的开发环境之前，一定要先下载安装node.js，vue的运行是要依赖于node的npm的管理工具来实现，node可以在官网自行下载自己系统的制定版本，网址:https://nodejs.org/zh-cn/傻瓜式安装好node之后，打开docs管理工具，输入命令：$\ast \ast node-v\ast \ast ,$ npm -v 查看（node、npm）安装是否成功；如果安装成功会显示node和npm的版本号，如下图所示安装成功：

二.使用淘宝的镜像

安装完node环境之后，npm包含的很多依赖包是部署在国外的，在国内大家都知道下载速度是超级慢的；所以我们要安装cnpm，cnpm是淘宝对npm的镜像服务器，这样使用cnpm安装依赖的包就快多了，所以我们用cnpm管理工具代替npm管理工具，
安装命令为：$ npm install -g cnpm --registry=https://registry.npm.taobao.org；即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了，输入命令：$ cnpm -v检查是否安装成功如下图：

三.安装Vue脚手架vue-cli

Vue-cli是Vue的脚手架工具，就像建筑工人在高处作业时一般都要搭一个脚手架，方便工作，在这里vue-cli为我们生成了目录结构,安装vue-cli脚手架构建工具，输入命令 $ npm install -g vue-cli，或者$ cnpm install vue-cli -g安装完成即可，查看vue-cli是否成功，使用$ vue -V 查看vue版本和使用$ vue list, 成功如下：

四.创建项目

选定路径，新建vue项目，这里我在桌面新建了test文件夹，下面我们新建demo项目，
使用命令$ vue init webpack ”项目名称“，如下

说明：
Vue build ==> 打包方式，回车即可；

Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；

Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；

Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车

现在项目已经创建好了，其有如下目录（利用vue-cil初始化构建vue项目，我们会获得一个初始化的文件夹结构）：

然后让项目安装下依赖再运行一下，操作指令：
安装依赖：$ cnpm install ---->安装完后项目中会出现node_modules文件夹
运行：$ cnpm run dev
注意 这里要在demo下进行安装和运行!!! 操作如下

启动成功输入url:http://localhost:8080
这样一个环境和一个最最简单的项目就创建完成了！！！！