微服务日趋繁荣的当今，前端技术与后端技术的差异越来越大。作为一个一心想成为全栈工程师的后端开发，学习一下前端开发的知识能应对工作中更多的场景，比如前端资源紧张，前端谈对象无心干活。
创建vue开发工程
作为一个资深后端web研发，多少都开发过前端页面，对于html,css,jquery,以及各类模板渲染引擎等知识都有所了解和掌握。如果以为掌握这些技术就可以独步江湖就大错特错了，jquery已经不是江湖上的屠龙刀了，模板引擎失去了倚天剑的锋利。前端技术向工程化，模块化和组件化发展，开发速度的快捷，学习成本不断提高。下面一起看下当前前端常用的技术。
node.js:
node.js是一个javascript运行环境(runtime)，发布于2009年5月，由ryan dahl开发，实质是对chrome v8引擎进行了封装。node.js对一些特殊用例进行优化，提供替代的api，使得v8在非浏览器环境下运行得更好。v8引擎执行javascript的速度非常快，性能非常好。 node.js是一个基于chrome javascript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。node.js 使用事件驱动， 非阻塞i/o模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。总结一下，node,js提供了javascript在浏览器以外的一个执行环境，满足一些特定的场景需求。
npm:
npm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段，并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。
webpack:
webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到javascript模块以及其它的一些浏览器不能直接运行的拓展语言（scss，typescript等），并将其打包为合适的格式以供浏览器使用。通过webpack可以把基于模块开发的前端工程代码打包成可以在浏览器使用的格式。
vue2:
是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，vue 采用自底向上增量开发的设计。vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件系统和vue生态系统支持的库结合使用时，vue 也完全能够为复杂的单页应用程序提供驱动。在开发中vue会把使用vue语法修饰的html标签与js对象进行绑定，从而使html值变化时可以同步修改js对象，js对象值变化时可以在页面暂时，使开发从复杂的document操作中解脱出来。
iveiw组件:
一套基于 vue.js 的高质量 ui 组件库，通过iveiw可以快速的开发出风格一致的前端界面。
构建npm开发环境：访问页面npmjs官网
点击install npm，
再次点击download node.js and npm，
请点击此处输入图片描述根据当前操作系统，选择对应版本下载。笔者使用的是windows系统，直接点击安装，和大部分安装软件一致。安装完成后在命令提示符窗口输入node -v和npm -v可以查看node和npm的安装版本，检验是否安装成功。
d:\>node-vv8.6.0d:\>npm-v5.3.0d:\>
vue项目创建和基础语法
npminstall-gcnpm--registry=https://registry.npm.taobao.org
因为npm使用的众多插件好多需要从国外网站下载，所以修改为国内镜像，下载更快
安装vue和vue-cli(官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。)
cnpminstallvuecnpminstall--globalvue-cli
创建vue工程
#跳转需要创建项目的目录cdd:\www\vue_item#创建项目vueinitwebpacktest_demo回车?projectnametest_demo回车?projectdescriptionavue.jsproject回车?author当前用户回车?vuebuildstandalone回车?installvue-router?yes?useeslinttolintyourcode?no?setupunittestswithkarma+mocha?no?setupe2etestswithnightwatch?no
初始化项目
cdtest_demo#下载相关插件cnpminstall#启动项目cnpmrundev
默认在浏览器打开以下页面:
文中代码下载地址:
https://github/sunhj000/test_demo test_demo
https://github/sunhj000/test_admin test_admin
参考文档:
https://cn.vuejs.org/ vue.js官方网站
https://iviewui/ iview官方网站