前段时间公司做手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一样。就这。