前段时间公司做手Q小程序，界面用的Vue，少量花里胡哨的字眼nodejs,webpack,vue-cli……开始进入我的视线，我这个前台技术停留在HTML+CSS+JavaScript的后台程序员也不得不学了一点前台技术，感慨前台技术变化之快之复杂，还好当时没入这个坑。
整理了下自己学习的经历，说我有不对的我权当听不见。

首先，什么是Vue

必需先明白传统前台程序员控制客户交互的方式。
传统前台：html形容页面元素，css渲染样式，js控制页面逻辑操作浏览器提供给js的dom的接口，比方元素的点击事件，以前的写法经常是：

<div id="app"></div><script>  $("#app").on("click",function(){    alert("hello world!");})</script>

这样做看起来没什么问题，不多随着项目的不断扩大，页面上的逻辑越来越多，比方一个表示商品列表的table当中的某一列为商品价格，另一列为数量，需要在其余一个列计算总价，那么你的代码很可能是
“元素A他妈的邻居的儿子的邻居的元素的儿子的值等于元素B他妈的邻居的儿子的匀速的值乘以……”
这样的。为理解决这个问题，Vue引入了一种新的编程思想——不用程序员操作DOM，使用数据绑定的方式，根据数据的变化自动改变元素的变化。
这就是Vue的最基本思路，新手使用Vue的程序员肯定要从思想上转变过来。

安装Vue

而后安装Vue的时候，人家提醒有两种方式，一种是直接引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>

这种就不多说了，第二种是命令行。我刚开始接触的时候看的懵逼
又是npm install又是vue init的究竟是干嘛呢？
为什么安装npm还要先安装nodejs？这又是什么东东？
这里逐个为你解答。
首先npm是前台包管理器，什么意思呢？前台狗们在开发的时候常常要用别人造的轮子，比方
1.去 jQuery 官网下载 jQuery
2.去 BootStrap 官网下载 BootStrap
3.去 Underscore 官网下载 Underscore
这就很难受了，所有有人就想出来能不能把这些前台常用的东西放在一起，想用的时候引用就行了？这样npm就出现了。不过如同刚开始没什么人用npm，知道另一个大佬开发的node.js 恰好缺少一个包管理器，这才将npm内置到node.js当中。

那什么是nodejs呢

众所周知，js是运行在浏览器（比方chrome、火狐）的一个脚本语言，需要在浏览器中才能发挥作用，而且功能仅限浏览器提供的接口，比方添加删除页面元素啊，改个字啊，弹个窗啊。功能很有限，node.js相当于扩充了js的功能，它可以直接运行在操作系统的环境下，可以使用操作系统接口，比方文件存储，数据库甚至网络……而后为了能够直接在操作系统运行，nodejs必需搭建自己的服务器，用来代替本来是浏览器做的事情。

继续安装Vue

哦这里如同要先用cnpm，什么是cnpm？
由于众所周知的起因，我们国内是不能访问某些外国网站的。
为了避免npm install vue 失败 需要用cnpm来安装对应的淘宝镜像，也就是代替那个访问不到的外国网站。

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

安装Vue

cnpm install npm -g

安装完即可以使用vue命令了
而后即可以建立你的vue项目

vue init webpack my-project

这个意思是说使用webpack这个vue的框架模板来搭建项目，webpack是一个成熟的vue框架（框架的意思是说很多人商定俗成的目录结构规划方式）而后会有少量提醒，我就不详细解释了，一路回车。

? Project name my-project? Project description A Vue.js project? Author runoob <test@runoob.com>? Vue build standalone? Use ESLint to lint your code? Yes? Pick an ESLint preset Standard? Setup unit tests with Karma + Mocha? Yes? Setup e2e tests with Nightwatch? Yes

我的目录结构是这样的

之后的编程操作基本都在src目录当中

启动vue服务器

在这个文件夹当中执行npm run dev可以开启本地的vue服务器，这个时候在浏览器中即可以查看helloworld了
编码工作完成后，在项目根目录执行npm run build打包项目，会在项目根目录下生成一个dist目录。就是打包后的项目。

正式上线的项目其实就是静态页面使用axios请求服务器，就跟app一样。就这。