vue.js 2.0开发指南

vue.js 2.0简介

vue.js2.0 是目前很先进,也很流行的MVVM前端开发框架,设计灵感来源于angularjs,经过完善简化,和优化之后一个相当轻巧功能强大的框架。最近淘宝先给Apache组织的weex，相当于一个vue-native框架，更多详细介绍去看 vue.js的官网吧。

准备工作

现在的前端开已经完全的工程化了，自动化了，有非常完善的项目构建工具，几行命令，分分钟创建一项目，包括项目文件，开发依赖，http服务器，"编译器",打包工具，应有尽有，当然这都归功于nodeJs。

简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好，在我看来，在web开发领域大有取代php可能性。

NPM是随同NodeJS一起安装的包管理工具，类似linux RPM，可以下载第三方包到本地使用，安装第三方命令行cli，上传自己的 第三方包和cli，是开发过程成中最常用的命令，这里vue-cli我们初始化项目用的命令行，由于网络问题国外的镜像是在太卡，要改成淘宝的镜像：

npm config set registry https://registry.npm.taobao.org// 配置后可通过下面方式来验证是否成功
npm config get registry// 或npm info express

其他必备工具 webpack

安装：$ npm install webpack -g

暂时没了.....准备工作结束了， 对了补充一下一上操作使用git-bash（mingw）非常好用的命令行工具。

安装vue2.0

# 全局安装 vue-cli $ npm install --global vue-cli 
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project

执行一上命令会得到看到这样的的界面

Clipboard Image.png

说明一切顺利。

然后my-project 下面会看到

Clipboard Image.png

项目初始化成功！

然后：

# 安装依赖，走你 
$ cd my-project 
$ npm install $ npm run dev

不出意外的话会看到

Clipboard Image.png

有几个会出错的原因，可能是因为端口占用，比如tomcat的8080端口，你可以在配置中修改端口：./build/dev-server.js 14行
// default port where dev server listens for incoming trafficvar port =8899;
然后重新执行 npm run dev 命令 即可。

Clipboard Image.png

看到这个界面说明一切就绪了，在准备开发之前还是先来熟悉一下目录文件吧下面一张截图：

Clipboard Image.png

简单了解一下即可，详细了解就去搜索引擎去找。
开始开发了！
打开你心爱顺手的编辑器，open folder->vue.2.0

Clipboard Image.png

然后插入点什么保存，在看看浏览器已经自动刷新了,对，这就是自动化的好处。
简单讲一下代码#app就是所谓的根组件，所有组件都应该是他的子孙。
然后展开src看到main.js 这个基本是不需要动的，就是项目的js入口文件。

Clipboard Image.png

App.vue 是就是根组件，hello.vue 就是子组件，打开App.vue

Clipboard Image.png

一会看到一个非常清爽的组件代码结构。顶部 HTML模板， 中部ES6 JS 底部CSS，不能更清晰了吧，上面的ES6新标准，在网上可以找到很多文章教程，看一看就可以开发了。
可能在上面的js代码洒脱的敲了两个换行，在保存的时候可能会遭遇下面这张图。

Clipboard Image.png

其实并没有什么错，真是代码的缩进和规范出了问题，目前看来这种检测比python还是有点变态的，先把它干掉，先学习在说，打开文件./build/webpack.base.conf.js 36行
删掉，然后 ctrl+c ，再 npm run dev 就可以了,修改一下JS代码试试吧。
配置代理
在真正开发项目的时候,会遇到跨域的问题，我们的前段开发服务器如何与后端通讯，这个时候就要用到代理了，这个配置也非常简单的。打开./build/dev-server.js 17行改为

var proxyTable = {  '/api': {    target: 'http://xxxx.com'  }}

配置完这个之后，同样要重启http服务器，在npm run dev 你会看到

Clipboard Image.png

然后在浏览器里面访问下 http://localhost:8899/api/user/status/get 吧。
安装ajax模块
axios.js 是官方推荐的，基于 Promise的ajax库，用了一下比较好用。

安装：npm install axios
得到：√ All packages installed (xxx) 安装成功

例子：hello.vue

先到这里了....以后陆续补充吧。发现bug和错别字顺手改到吧，落掉哪一步也记得补充上哦。