写这篇博客之前，楼主是实打实的Java后端人员，偶尔用用js，jq这些前端框架实现前后台交互，用用一些ui控件画画图，仅此而已，所以去用vue这种前后端分离的开发模式非常的不适应，想想都觉得我这篇博客出来的多么心酸。
首先，既然是前后端分离的项目，那么就说明他们是用不同的工具进行的开发，只不过最后进行一个集成打包。后端就不说了，熟悉常用的idea和数据库即可。前端vue来讲，需要在本地按章node.js的开发环境，其次，需要相应的前端开发工具来配合开发
1.安装node.js的环境，相关jar包下载路径大家可以去这里：node.js下载，下载解压后，直接运行.exe文件即可。安装完成后我们可以通过cmd黑界面进行查看，（一定要用管理员身份登录，以避免权限不足的问题），直接输入node -v 可以查看node.js的版本号，出来下图中的版本号即代表安装成功。
这个时候我们就要去做相应的准备工作了，需要去下载相应的npm,vue-cli脚手架，我们一步步来。
1.1安装npm
执行npm install -g cnpm --registry=https:
第一次安装时间会有点长，需要下载相应的包文件等等，执行完后输入npm -v进行检测，出现相应的版本号即代表成功。
1.2安装vue-cli脚手架
执行npm install --global vue-cli，安装完成后输入vue出现相应信息即代表成功
1.3直接黑界面新建项目进行测试，你需要像后端开发一样，建立一个独属的工作空间，我这里是新建在D:/vueecl
1.4执行vue init webpack test
上图中代表的事执行完后需要输入的相应选项，除了vue-router进行选择以外，其他都可以选择no,而vue-router代表的是是否配置路由，为了浏览器访问的不必要的麻烦我们直接配置为yes,注意此处不需要大小写。
1.5执行cd 项目名
其实走到这里就代表是成功了，我们只需要执行最后一步进行项目启动即可。
1.6启动项目，执行npm run dev
1.7复制图中的地址，浏览器进行访问。
出现如图所示代表你前端启动成功了vue项目。也代表了你对vue以及nodejs的配置成功。
2.使用相应的前端开发工具开发vue项目，用完dos命令，总该弄点高大上的软件开发vue项目吧，年纪大了记不住那么多命令,,哈哈，我找到的是vscode和hbuilder，经过我的权衡，感觉还是前者高大上一点，下面就着重讲下vscode吧。
2.1 首先是vscode的界面风格
其实刚开始进来的时候整体是英文化，只不过在界面右下角不停的提示我中文版本可以更新，所以我就更新成现在的样子啦、当然啦，这些都不重要。
2.2导入之前工作空间的vue项目。点击-->file-->open file-->选择你的文件-->ok.怎么执行呢，
执行相应的命令，完成出现和cmd中一样的链接，代表成功，在浏览器中直接执行出现vim画面即可。
2.3vscode编辑vue项目的插件
下面我就说几个我安装vscode后的几款插件，便于像楼主这样的小白跳过一些小坑。
2.3.1 vue 2 snippets --> vue代码提示,像v-model,v-for相应的vue代码，会有相应的提示还是比较方便的，直接在插件中搜索vue，第一个就是。
2.3.2 Eslint --> 代码检查,我知道在java后端的html页面写js，jq代码的时候，硬是要将项目启动后在浏览器进行调试，而这个插件可以帮助我们在代码开发过程中检查我们的代码格式。不过有一点，需要配置一下设置
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"plugins": ["html"]
}具体配置地点--》
粘贴进右边的用户设置栏即可。
2.3.3Vetur —— 语法高亮、智能感知、Emmet等 包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）
这个同样需要进行配置。
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}2.3.4Auto Close Tag —— 自动闭合HTML/XML标签，讲道理每次用alt+/很烦，不熟悉这个软件感觉敲的又很慢，突然发现这个神器，立马装上。
此处介绍了安装node.js的环境，安装vue-cli脚手架，安装vscode，配置插件,启动vue项目等等，后期会逐步更新相应的文章，希望大家关注