vue.js的起步

介绍

vue.js 是一个客户端js库，能够用来开发单页应用。为了一个项目的选型，我前先后后的看了angular、react、vuejs ，对前二者是佩服，对后者是爱。由于它简洁干净利索，而且还有高大上的web components实现。即便文档很少，我也愿意选择它。接下来，咱们首先创建一个开始的项目，而且撸一遍开发过程当中涉及到的概念和组件。

vue.js

稍微像样一点的vuejs的开发过程几乎老是搭配webpack、babel一块儿的，喜欢从头hack的人，我告诉你配置是极为繁琐的，幸亏vue.js 提供了一个工具，叫作vue-cli 。可用于快速搭建单页应用起步代码。只需一分钟便可启动经常使用的开发特性：

1. 可用的脚手架代码。

2. 热重载。组件代码更新后自动从新加载

3. 静态代码检查。

4. ES6语言特性

工具准备

咱们须要使用vue-cli来建立一个脚手架项目。

安装 vue-cli

$ npm install -g vue-cli

确认node版本

个人版本是

$ node -v
v5.0.0
$ npm -v
3.10.6

不少问题若是出现，可能和版本有关，建议和我一致 。

建立新项目

执行：

$ vue init webpack my-project

第二个参数webpack，指明建立一个基于 "webpack" 模板的vuejs项目。此模板会建立一个webpack的脚手架代码。

然而，webpack是啥？它自己是一个打包工具，能够把js、css、image打包成一个或者多个js文件，而且能够支持各类loader做为插件对不一样类型的文件作转换处理。实际上webpack就是经过插件vue-loader在加载vue类型的文件时作格式转换，把vue类型文件翻译为浏览器能够识别的js文件。

中国用户注意：vue init命令使用了npm， npm的仓库常常缓慢或者被阻断，可使用国内镜像，只要编辑 ~/.npmrc 加入下面内容：

registry = https://registry.npm.taobao.org

这个的作法能够快得多。

当前可使用的模板有：

webpack - 经过webpack和vue-loader插件，能够调用babel把.vue文件编译为客户端能够识别的js文件。默认还能够提供热加载、代码检查、测试。
webpack-simple - 最简单的webpack和vue-loader插件。
browserify - 经过Browserify + vueify 的组合，能够调用babel把.vue文件编译为客户端能够识别的js文件。默认还能够提供热加载、代码检查、测试。
browserify-simple - 最简单的Browserify + vueify 插件。

理论上webpack和browserify的功能相似，均可以作打包工具。可是webpack就是那个文档特少，可是你们都争着使用的热门工具。因此，咱们就无论那么多，先使用webpack啦。

安装依赖，走你

$ cd my-project
$ npm install
$ npm run dev

到http://localhost:8080查看效果。

查看vue文件

vue文件是三位一体的。就是说css、html、js都在一个文件内，使用标签作出分割。为了更好的查看结构，建议首先安装对应编辑器的高光插件。

安装语法高光

我习惯使用的编辑器是sublime text，安装插件就能够识别全部扩展名为.vue的vuejs组件代码，给予高光显示，便于代码的阅读和编写。这个插件叫作 vue-syntax-highlight，是vuejs官方提供的。它位于github.com。只要把它克隆到你的Sublime包目录内。在个人电脑上，Sublime包目录是/Users/lcj/Library/Application Support/Sublime Text 3/Packages ，因此安装的过程就是

cd /Users/lcj/Library/Application\ Support/Sublime\ Text\ 3/Packages 
git clone https://github.com/vuejs/vue-syntax-highlight

而后从新启动便可。以后阅读代码，全部的扩展名为.vue文件都会有相应的高光显示。

查看vue

起步代码中有一个组件代码，在src/hello.vue内。查看：

<template>
    <div class="hello">
      <h1>{{ msg }}</h1>
    </div>
  </template>


  <script>
  export default {
    data () {
      return {
        msg: 'Hello World!'
      }
    }
  }
  </script>


  <style scoped>
  h1 {
    color: #42b983;
  }
  </style>

文件内分为三个部分， <template>标签包围内的是html代码； <script>内包围的是js代码，而且可使用ES6的语法。 <style>内的则是css代码。使用这个组件的代码在app.vue内。只要首先在脚本内声明标签

import Hello from './components/Hello'
export default {
  components: {
    Hello
  }
}

随后在html内使用标签便可

<hello></hello>

很是大的一个亮点！一个vue文件，内部js、css、html就都齐了，能够做为一个完整的、自包含的组件了。很是有趣的、我我的极为欣赏的web components就在此处了。

vue文件内的语法，固然不是浏览器所能够支持的，浏览器不认识它！魔术在于webpack+vue-loader+babel 。webpack加载vue文件首先调用vue-loader，vue-loader会调用babel转换ES6代码为ES5代码，把css和html做为模块也转换为客户端js代码。这些js代码浏览器就能够识别了。

另外，咱们看看热加载。把hello组件的msg值改改。而后保存。浏览器会自动刷新的。这就是热加载了。对于频繁修改调试的程序员，有了热加载，得轻松很多。

安装chrome开发工具

我习惯使用的浏览器是chrome，能够安装vue的开发工具到chrome插件内。在chrome市场内查询vue-developertools 。有了它，能够在chrome console内看到更加友好的vue错误提示。

回归平常

咱们全部的编辑修改一旦完成须要更新网站时，最终须要把全部的vue，ES6代码等编译出来到ES5的js文件。如今能够构建这些webpack代码：

npm run build

此命令会把咱们已经有的开发成果，编译到dist目录下，就是说编译成前端能够直接使用的html、js、css。

有了它们，我就可使用一个http 静态服务器，在dist目录内执行：

cd dist 
npm install http-server -g
http-server

而后，到http://localhost:8080查看效果。和运行npm run dev看到的如出一辙。

更多

vue还有两个插件，对开发者颇有价值

增强版 ，访问服务器

npm install vue-resource --save

安装路由

npm install vue-router --save

细节展开

咱们蜻蜓点水的看了webpack、vue-loader、babel 、vue组件，将来须要一些篇幅去详细说明它们。

关于

做者：刘传君

建立过产品，创过业。很差动，读书机器。
能够经过 1000copy#gmail.com 联系到我

出品

http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...