Vue.js的入门

介绍

vue.js 是一个客户端js库，可以用来开发单页应用。为了一个项目的选型，我前前后后的看了angular、react、vuejs ，对前两者是佩服，对后者是爱。因为它简洁干净利索，并且还有高大上的web components实现。即使文档不多，我也愿意选择它。接下来，我们首先建立一个开始的项目，并且撸一遍开发过程中涉及到的概念和组件。

vue.js

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

可用的脚手架代码。

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

静态代码检查。

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: &#39;Hello World!&#39;
      }
    }
  }
  </script>
 
  <style scoped>
  h1 {
    color: #42b983;
  }
  </style>

文件内分为三个部分，