Hello Vue #2

FrankFang · 2017-01-11T02:28:46Z

Vue.js 是什么

我不讲 Vue.js 是什么，我们先学再悟。

安装

去官网找 installation 关键字，你会看到这个页面（注意看网址）：
英文：https://vuejs.org/v2/guide/installation.html#NPM
中文：https://cn.vuejs.org/v2/guide/installation.html#NPM

copy 它给的命令，在我们任务一的项目目录里运行（最好把任务一的代码复制一份，改名为任务二）：

npm install vue

如果你注意看文档里的解释（点右上角的「Translations」有中文文档），你会发现有两个构建版本（不是 Vue 1 和 Vue 2，而是 standalone 和 runtime-only ），但是两个版本效果不同。你现在只要记住我们下面使用的 Vue 是「独立构建」（standalone build）版本就行了，另一个版本以后学。

按照文档，我们需要添加 webpack 配置（下面是修改后的 webpack.config.js）：

module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react'
      },
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  }
}

解决警告

安装 vue 时，你的控制台有很多警告，如下：

npm http request GET https://registry.npm.taobao.org/vue
npm http 200 https://registry.npm.taobao.org/vue
/Users/frank/jrg/jrg-project-5/step-2
├── vue@2.1.8
└── UNMET PEER DEPENDENCY webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc

npm WARN enoent ENOENT: no such file or directory, open '/Users/frank/jrg/jrg-project-5/step-2/package.json'
npm WARN babel-loader@6.2.10 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
npm WARN step-2 No description
npm WARN step-2 No repository field.
npm WARN step-2 No README data
npm WARN step-2 No license field.

npm WARN step-2 No xxx

最后四行警告说我们没有 description、repository field、README data 和 license field。
要解决这个问题，我们必须要有如下几个文件：

package.json
README.md

package.json

使用 npm init 可以创建一个初始的 package.json，你敲完这个命令之后，npm 会问你很多问题，方便起见，我们先不回答，一路回车就行（你看得懂也可以回答一下）。

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (step-2)
version: (1.0.0)
description:
entry point: (app.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/frank/jrg/jrg-project-5/step-2/package.json:

{
  "name": "step-2",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

这时 package.json 就创建好了，你需要

把里面的 description 改一下
如果你这个目录有对应的 git 远程仓库的话，你也可以加上 repository 字段，只需要把 FrankFang/xxx 改成你的仓库名就行了。

文件结果如下：

{
  "name": "step-2",
  "version": "1.0.0",
  "description": "A vue.js demo",
  "main": "app.js",
  "dependencies": {
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/FrankFang/xxx.git"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

README.md

这个文件对于开源项目来说非常重要，只是你现在还不知道怎么写而已。那么我们就创建一个空文件来掩盖这个警告吧：

touch README.md

重新运行 npm i vue 是不是警告变少了：

# npm i vue
npm http request GET https://registry.npm.taobao.org/vue
npm http 304 https://registry.npm.taobao.org/vue
step-2@1.0.0 /Users/frank/jrg/jrg-project-5/step-2
├── vue@2.1.8
└── UNMET PEER DEPENDENCY webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc

npm WARN babel-loader@6.2.10 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
npm WARN step-2@1.0.0 No repository field.

警告 babel-loader@6.2.10 requires a peer of webpack

记不记得上一篇教程我要你全局安装 webpack 命令：

npm i -g webpack

同样，任何想要启动你的项目的人，都必须全局安装 webpack。如果他忘了安装，那么这个项目根本就无法运行。这就很麻烦了。你需要在 README.md 里警告其他人一定要安装 webpack 才行。

npm 想了另一个办法来解决这个麻烦，把你依赖的命令都声明在 package.json 里：

npm i -S webpack vue babel-loader babel-core babel-preset-es2015 babel-preset-react

运行之后，我们依赖的所有包（任务一需要的包我也写在上面了），都会被安装，同时 package.json 的 dependencies 字段，会记录这些包的名字和版本，就像这样：

// 这是 package.json 文件的内容
{
  省略...
  "main": "app.js",
  "dependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "vue": "^2.1.8",
    "webpack": "^1.14.0"
  },
  省略...
}

好处：

别人 git clone 你的项目之后，只需要运行 npm i 就可以安装你指定的包
不需要全局安装 webpack 了，转而使用 ./node_modules/.bin/webpack 这个文件作为 webpack 命令（原来命令就是文件啊？你才知道）

我们来试一下：

# ./node_modules/.bin/webpack
Hash: 61a3dfaceb637bce005a
Version: webpack 1.14.0
Time: 627ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.83 kB       0  [emitted]  main
    + 2 hidden modules

然后你就可以把全局安装的 webpack 卸载掉了。（不过没必要卸载）

至此就没有警告了。其实程序员从来都不在乎警告的 😄

copy-run-modify Vue

Copy

先抄 https://cn.vuejs.org/v2/guide/#起步。
先不要管你抄的东西是什么意思。

改写 page.html
<html>
  <head>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>

    <script src="bundle.js"></script>
  </body>
</html>

改写 app.js 
import bar from './bar';

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Run

然后运行 webpack，打开 page.html

看到浏览器控制台报错：
```
Uncaught ReferenceError: Vue is not defined
```
app.js 里的 Vue 确实不知道是从哪来的，仿照 import bar from './bar'，我们在 app.js 里加一句 import Vue from 'vue'，结果如下：
```
import bar from './bar'
import Vue from 'vue'

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})                                                               
```
然后运行 webpack，刷新 page.html。

没有报错，页面看起来是这样：

Modify

现在我们来看看我们 copy 了些什么玩意。

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

div 里的 {{message}} 怎么变成了 Hello Vue!

看起来 Hello Vue! 和 message 有某种对应关系，那么我们把 Hello Vue! 改成 Hello Frank! 试试。

改完之后保存，运行 webpack，刷新 page.html，页面变成了：

看来我们的猜测是对的，data 的 message 与页面中的 {{message}} 存在绑定关系。

接下来我们可以继续「猜测」，然后通过 modify 来验证。
div id="app" 与 el: '#app'

我们猜测 div id="app" 与 el: '#app' 有对应关系，那么我们试着把 div 的 id=app 改成 id=xxx。

改 HTML 是不需要运行 webpack 的，然后我们直接刷新 page.html 试试：

果然报错，找不到 #app，说明我们的猜测正确。