一、前言

眼下前后端分离开发模式比较盛行，同时各个公司也都比较提倡“敏捷开发”，那么选择一个前端的开发工具比较重要，接下来我会用VUE通过实战的方式和大家一起了解、熟悉和使用这个工具。我一直坚持一个道理“能解决问题的技术才是真技术”！

二、环境搭建

任何一种开发语言和工具都是从搭建环境和“hello world”，搭建环境很重要也会根据自己电脑的实际情况遇到的问题也会不同。只能摸索着去解决。

1.测试环境 ：windows10 家庭版， 安装了360的安全软件

2.第一步：下载安装node.js

下载node.js

按照默认情况进行安装即可，没有什么特别的。

安装node.js

验证安装是否成功，找到安装路径看到安装情况

安装路径

检验是否成功

此时可能遇到问题：键入 node -v 提示 “不是内部命令......”,说明没有配置环境变量，具体做法如下：

环境变量配置路径图

安装淘宝NPM镜像（可选），主要解决国内访问npm官网比较慢的问题

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

2.第二步：安装vue脚手架 vue-cli，参数-g表示全局

cnpm install vue-cli -g

检验是是否安装成功

注意：运行npm或cnpm时提示“不是内部命令...”提示时，请参照上面环境变量配置，在path中添加路径“C:Program Filesnodejsnode_global” 前面的具体路径根据你的安装路径来定。

三、项目搭建

1.第一步：在电脑上创建项目所在的文件夹；

2.第二步：在命令行模式下进入到第1步创建的文件夹；

3.第三步：创建项目

vue init webpack  

按照上图根据提示进行设置，其中Use ESLint to lint your code? 要注意，如果选择yes，对我们后面开发过程的语法检查会比较严格，这个选型后面也修改配置进行调整。

注意：如果创建项目的时候没有选择 npm install 那么创建后需要单独运行。

4. 第四步：运行项目，在程序目录下运行

cnpm run dev   或npm run dev

打开浏览器，根据提示的地址：打开http://localhost:8080/#/ ，这样就看到了我们的第一个VUE程序界面了！耶！！耶！！！

在后续开发过中程新项目的搭建也是一样。

四、总结

环境搭建和创建项目只是万里长征第一步，后续还有很多东西需要掌握才能真正做出项目来，接下来会通过实战的方式陆续和大家一起分享

1.vue开发工具 vscode

2.用vue+mxgraph 实现流程可视化实现，尝试去做kettle的转化和作业的流程图。

加油！！！