Hello Vue

[FrankFang]

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

1. 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 就创建好了，你需要

   1. 把里面的 description 改一下
   2. 如果你这个目录有对应的 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"
   }
   

2. 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"
  },
  省略...
}

好处：

1. 别人 git clone 你的项目之后，只需要运行 npm i 就可以安装你指定的包
2. 不需要全局安装 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

1. 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!'
     }
   })                                                               

2. 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!'
  }
})

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

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

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

   

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

   接下来我们可以继续「猜测」，然后通过 modify 来验证。

2. div id="app" 与 el: '#app'

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

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

   

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

你还可以继续猜，然后 modify，比如改 data、改 el 等。

每次改完 JS 你都要运行 webpack 重新打包。

至此，Vue 的 Hello World 我们就做出来了。

致饥人谷学员

你需要看懂本教程，并将上面的操作全部实现，最终做出一个 Vue 的 Hello World。

不要把 node_modules、.DS_Store、.idea 提交上来！

任务截止时间，本周六 21:00。

有没有发现今天的教程比上次长很多，以后会越来越长的。

[FrankFang]

所有代码在这里：https://github.com/jirengu-inc/jrg-project-5/tree/master/step-2

[starlikerain]

Link

Vue我来了 正如我悄悄的走

[0xjeso]

Vue-test SJ

[TerenYeung]

yjl v-o-r for task-02 link

[nineSean]

Vue.js-demo LX

[lzm320856]

vue LZM

[chaocool]

vue-test CJC

[whiteblank]

vue-demoGJC

[WangXiaoyugg]

vue-demo WXY

[hungryYang]

hello vue

[wlf1112]

vue-demo WLF

[zhangjiuyi]

vue-demo ZJY

[Rice-F]

Vue.js-demoSJ

[LisaLi85]

Vue-demo LLL

[Panda-HJN]

vue-demo HJN

[xiaokunxu]

Vue.js-demo xxk

[wuhanjun]

Hello-Vue WHJ

[Zegendary]

vue-demo zxw

[ReedSun]

vue demo SHZ

[JayChenFE]

task2 任务3陈捷

[JaeJiang]

✌️step-2 Josh/姜杭轩

[mimi3824ku]

task2 LWE

[Hsyneve]

难道我又是最后一个。。。不开心 hsy

[have-not-BUG]

任务二 LC

[muxi7]

任务二 ZW

[GuoQichen]

vue2-demo GQC

[myql]

task2 WQ

[candy252324]

task2-vueCJH

[yukui630]

task2vue

[sen-lin]

二啊啊啊啊

[lightbuild]

vue-test 任务6-任磊。最后挤一挤~~

[baixiaoji]

vue-demo ZLJ

[ab690257072]

step-2 任务6班-赵力群

[batman-1]

vue-demo

[code-zhangrui]

demo-2 任务10班 张睿

[FrankFang]

@code-zhangrui README.md 呢

[code-zhangrui]

已补充！

2017-02-07 19:16 GMT+08:00 Frank Fang notifications@github.com:

@code-zhangrui https://github.com/code-zhangrui README.md 呢

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jirengu-inc/jrg-project-5/issues/2#issuecomment-277969491, or mute the thread https://github.com/notifications/unsubscribe-auth/AWbkeNt6H1fBy3pKR4f199acagWcxDy9ks5raFKUgaJpZM4LgIQI .

[sfyr111]

Hello Vue

[JeromeYangtao]

hello-Vue直播11班杨涛

[superDCF]

hello vue 直播11班 丁超发

[MasterGaoJin]

task-2 LK

[n313893254]

hello vue 弄庆洋

[success-cg]

陈功 task-2

[boloog]

vue-demo boloog

[kumabearplus]

vue-demo 熊凡

[Honohonoho]

hello Vue.js 李祺

[komolei]

second空末

[swhzzz]

first vue沈文豪

[selectyang]

webpack_setp_2 杨家文

[jettzhang95]

vuejs-step2