{"action":"created","issue":{"url":"https://api.github.com/repos/jirengu-inc/jrg-project-5/issues/2","repository_url":"https://api.github.com/repos/jirengu-inc/jrg-project-5","labels_url":"https://api.github.com/repos/jirengu-inc/jrg-project-5/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/jirengu-inc/jrg-project-5/issues/2/comments","events_url":"https://api.github.com/repos/jirengu-inc/jrg-project-5/issues/2/events","html_url":"https://github.com/jirengu-inc/jrg-project-5/issues/2","id":199988178,"number":2,"title":"Hello Vue","user":{"login":"FrankFang","id":839559,"avatar_url":"https://avatars0.githubusercontent.com/u/839559?v=4","gravatar_id":"","url":"https://api.github.com/users/FrankFang","html_url":"https://github.com/FrankFang","followers_url":"https://api.github.com/users/FrankFang/followers","following_url":"https://api.github.com/users/FrankFang/following{/other_user}","gists_url":"https://api.github.com/users/FrankFang/gists{/gist_id}","starred_url":"https://api.github.com/users/FrankFang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/FrankFang/subscriptions","organizations_url":"https://api.github.com/users/FrankFang/orgs","repos_url":"https://api.github.com/users/FrankFang/repos","events_url":"https://api.github.com/users/FrankFang/events{/privacy}","received_events_url":"https://api.github.com/users/FrankFang/received_events","type":"User","site_admin":false},"labels":[{"id":514959069,"url":"https://api.github.com/repos/jirengu-inc/jrg-project-5/labels/%E6%95%99%E7%A8%8B","name":"教程","color":"128A0C","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":61,"created_at":"2017-01-11T02:28:46Z","updated_at":"2017-07-28T02:25:01Z","closed_at":"2017-02-11T13:27:10Z","body":"# Vue.js 是什么\r\n\r\n我不讲 Vue.js 是什么，我们先学再悟。\r\n\r\n# 安装\r\n\r\n去官网找 installation 关键字，你会看到这个页面（注意看网址）：\r\n英文：https://vuejs.org/v2/guide/installation.html#NPM\r\n中文：https://cn.vuejs.org/v2/guide/installation.html#NPM\r\n\r\ncopy 它给的命令，在我们任务一的项目目录里运行（最好把任务一的代码复制一份，改名为任务二）：\r\n\r\n```\r\nnpm install vue\r\n```\r\n\r\n如果你注意看文档里的解释（点右上角的「Translations」有中文文档），你会发现有两个构建版本（不是 Vue 1 和 Vue 2，而是 standalone 和 runtime-only ），但是两个版本效果不同。你现在只要记住我们下面使用的 Vue 是 「独立构建」（standalone build）版本就行了，另一个版本以后学。\r\n\r\n[按照文档](https://cn.vuejs.org/v2/guide/installation.html#独立构建-vs-运行时构建)，我们需要添加 webpack 配置（下面是修改后的 webpack.config.js）：\r\n\r\n```\r\nmodule.exports = {\r\n  entry: './app.js',\r\n  output: {\r\n    filename: 'bundle.js'\r\n  },\r\n  module: {\r\n    loaders:[\r\n      {\r\n        test: /\\.js[x]?$/,\r\n        exclude: /node_modules/,\r\n        loader: 'babel-loader?presets[]=es2015&presets[]=react'\r\n      },\r\n    ]\r\n  },\r\n  resolve: {\r\n    alias: {\r\n      'vue$': 'vue/dist/vue.common.js'\r\n    }\r\n  }\r\n}\r\n\r\n```\r\n\r\n# 解决警告\r\n\r\n安装 vue 时，你的控制台有很多警告，如下：\r\n\r\n```\r\nnpm http request GET https://registry.npm.taobao.org/vue\r\nnpm http 200 https://registry.npm.taobao.org/vue\r\n/Users/frank/jrg/jrg-project-5/step-2\r\n├── vue@2.1.8\r\n└── UNMET PEER DEPENDENCY webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc\r\n\r\nnpm WARN enoent ENOENT: no such file or directory, open '/Users/frank/jrg/jrg-project-5/step-2/package.json'\r\nnpm 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.\r\nnpm WARN step-2 No description\r\nnpm WARN step-2 No repository field.\r\nnpm WARN step-2 No README data\r\nnpm WARN step-2 No license field.\r\n```\r\n\r\n## npm WARN step-2 No xxx\r\n\r\n最后四行警告说我们没有 description、repository field、README data 和 license field。\r\n要解决这个问题，我们必须要有如下几个文件：\r\n\r\n* package.json\r\n* README.md \r\n\r\n1. package.json\r\n\r\n    使用 `npm init` 可以创建一个初始的 package.json，你敲完这个命令之后，npm 会问你很多问题，方便起见，我们先不回答，一路回车就行（你看得懂也可以回答一下）。\r\n\r\n    ```\r\n    This utility will walk you through creating a package.json file.\r\n    It only covers the most common items, and tries to guess sensible defaults.\r\n\r\n    See `npm help json` for definitive documentation on these fields\r\n    and exactly what they do.\r\n\r\n    Use `npm install <pkg> --save` afterwards to install a package and\r\n    save it as a dependency in the package.json file.\r\n\r\n    Press ^C at any time to quit.\r\n    name: (step-2)\r\n    version: (1.0.0)\r\n    description:\r\n    entry point: (app.js)\r\n    test command:\r\n    git repository:\r\n    keywords:\r\n    author:\r\n    license: (ISC)\r\n    About to write to /Users/frank/jrg/jrg-project-5/step-2/package.json:\r\n\r\n    {\r\n      \"name\": \"step-2\",\r\n      \"version\": \"1.0.0\",\r\n      \"description\": \"\",\r\n      \"main\": \"app.js\",\r\n      \"dependencies\": {\r\n      },\r\n      \"devDependencies\": {},\r\n      \"scripts\": {\r\n        \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\r\n      },\r\n      \"author\": \"\",\r\n      \"license\": \"ISC\"\r\n    }\r\n\r\n\r\n    Is this ok? (yes)\r\n    ```\r\n    这时 package.json 就创建好了，你需要\r\n    1. 把里面的 description 改一下\r\n    2. 如果你这个目录有对应的 git 远程仓库的话，你也可以加上 repository 字段，只需要把 FrankFang/xxx 改成你的仓库名就行了。\r\n\r\n    文件结果如下：\r\n\r\n    ```\r\n    {\r\n      \"name\": \"step-2\",\r\n      \"version\": \"1.0.0\",\r\n      \"description\": \"A vue.js demo\",\r\n      \"main\": \"app.js\",\r\n      \"dependencies\": {\r\n      },\r\n      \"repository\": {\r\n        \"type\": \"git\",\r\n        \"url\": \"git+https://github.com/FrankFang/xxx.git\"\r\n      },\r\n      \"devDependencies\": {},\r\n      \"scripts\": {\r\n        \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\r\n      },\r\n      \"author\": \"\",\r\n      \"license\": \"ISC\"\r\n    }\r\n\r\n    ```\r\n\r\n2. README.md\r\n\r\n    这个文件对于开源项目来说非常重要，只是你现在还不知道怎么写而已。那么我们就创建一个空文件来掩盖这个警告吧：\r\n\r\n    ```\r\n    touch README.md\r\n    ```\r\n\r\n    重新运行 `npm i vue` 是不是警告变少了：\r\n\r\n    ```\r\n    # npm i vue\r\n    npm http request GET https://registry.npm.taobao.org/vue\r\n    npm http 304 https://registry.npm.taobao.org/vue\r\n    step-2@1.0.0 /Users/frank/jrg/jrg-project-5/step-2\r\n    ├── vue@2.1.8\r\n    └── UNMET PEER DEPENDENCY webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc\r\n\r\n    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.\r\n    npm WARN step-2@1.0.0 No repository field.\r\n    ```\r\n\r\n## 警告 babel-loader@6.2.10 requires a peer of webpack\r\n\r\n记不记得上一篇教程我要你全局安装 webpack 命令：\r\n\r\n`npm i -g webpack`\r\n\r\n同样，任何想要启动你的项目的人，都必须全局安装 webpack。如果他忘了安装，那么这个项目根本就无法运行。这就很麻烦了。你需要在 README.md 里警告其他人一定要安装 webpack 才行。\r\n\r\nnpm 想了另一个办法来解决这个麻烦，把你依赖的命令都声明在 package.json 里：\r\n\r\n`npm i -S webpack vue babel-loader babel-core babel-preset-es2015 babel-preset-react`\r\n\r\n运行之后，我们依赖的所有包（任务一需要的包我也写在上面了），都会被安装，同时 package.json 的 dependencies 字段，会记录这些包的名字和版本，就像这样：\r\n\r\n```\r\n// 这是 package.json 文件的内容\r\n{\r\n  省略...\r\n  \"main\": \"app.js\",\r\n  \"dependencies\": {\r\n    \"babel-core\": \"^6.21.0\",\r\n    \"babel-loader\": \"^6.2.10\",\r\n    \"babel-preset-es2015\": \"^6.18.0\",\r\n    \"babel-preset-react\": \"^6.16.0\",\r\n    \"vue\": \"^2.1.8\",\r\n    \"webpack\": \"^1.14.0\"\r\n  },\r\n  省略...\r\n}\r\n\r\n```\r\n\r\n好处：\r\n\r\n1. 别人 git clone 你的项目之后，只需要运行 `npm i` 就可以安装你指定的包\r\n2. 不需要全局安装 webpack 了，转而使用 `./node_modules/.bin/webpack` 这个文件作为 webpack 命令（原来命令就是文件啊？你才知道）\r\n\r\n我们来试一下：\r\n\r\n```\r\n# ./node_modules/.bin/webpack\r\nHash: 61a3dfaceb637bce005a\r\nVersion: webpack 1.14.0\r\nTime: 627ms\r\n    Asset     Size  Chunks             Chunk Names\r\nbundle.js  1.83 kB       0  [emitted]  main\r\n    + 2 hidden modules\r\n```\r\n\r\n然后你就可以把全局安装的 webpack 卸载掉了。（不过没必要卸载）\r\n\r\n至此就没有警告了。其实程序员从来都不在乎警告的 😄 \r\n\r\n# copy-run-modify Vue\r\n\r\n1. Copy\r\n\r\n    先抄 [https://cn.vuejs.org/v2/guide/#起步](https://cn.vuejs.org/v2/guide/#起步)。\r\n    先不要管你抄的东西是什么意思。\r\n\r\n    ```\r\n    改写 page.html\r\n    <html>\r\n      <head>\r\n      </head>\r\n      <body>\r\n        <div id=\"app\">\r\n          {{ message }}\r\n        </div>\r\n\r\n        <script src=\"bundle.js\"></script>\r\n      </body>\r\n    </html>\r\n\r\n    ```\r\n\r\n    ```\r\n    改写 app.js \r\n    import bar from './bar';\r\n\r\n    var app = new Vue({\r\n      el: '#app',\r\n      data: {\r\n        message: 'Hello Vue!'\r\n      }\r\n    })                                                               \r\n    ```\r\n\r\n2. Run\r\n\r\n    然后运行 `webpack`，打开 page.html\r\n\r\n    看到浏览器控制台报错：\r\n\r\n    ```\r\n    Uncaught ReferenceError: Vue is not defined\r\n    ```\r\n\r\n    app.js 里的 Vue 确实不知道是从哪来的，仿照 `import bar from './bar'`，我们在 app.js 里加一句 `import Vue from 'vue'`，结果如下：\r\n\r\n    ```\r\n    import bar from './bar'\r\n    import Vue from 'vue'\r\n\r\n    var app = new Vue({\r\n      el: '#app',\r\n      data: {\r\n        message: 'Hello Vue!'\r\n      }\r\n    })                                                               \r\n\r\n    ```\r\n\r\n    然后运行 `webpack`，刷新 page.html。\r\n\r\n    没有报错，页面看起来是这样：\r\n\r\n    ![](https://ww4.sinaimg.cn/large/652c38b1gw1fbmmkv3us7j20ww0kw78b.jpg)\r\n\r\n## Modify\r\n\r\n现在我们来看看我们 copy 了些什么玩意。\r\n\r\n```\r\n<div id=\"app\">\r\n  {{ message }}\r\n</div>\r\n```\r\n\r\n```\r\nvar app = new Vue({\r\n  el: '#app',\r\n  data: {\r\n    message: 'Hello Vue!'\r\n  }\r\n})\r\n```\r\n\r\n1. div 里的 {{message}} 怎么变成了 Hello Vue!\r\n\r\n    看起来 `Hello Vue!` 和 message 有某种对应关系，那么我们把 Hello Vue! 改成 Hello Frank! 试试。\r\n\r\n    改完之后保存，运行 `webpack`，刷新 page.html，页面变成了：\r\n\r\n    ![](https://ww1.sinaimg.cn/large/652c38b1gw1fbmmpyc9qaj20ro05aq3q.jpg)\r\n\r\n    看来我们的猜测是对的，data 的 message 与页面中的 {{message}} 存在绑定关系。\r\n\r\n    接下来我们可以继续「猜测」，然后通过 modify 来验证。\r\n\r\n2. `div id=\"app\"` 与 `el: '#app'`\r\n\r\n    我们猜测 `div id=\"app\"` 与 `el: '#app'` 有对应关系，那么我们试着把 div 的 id=app 改成 id=xxx。\r\n\r\n    改 HTML 是不需要运行 `webpack` 的，然后我们直接刷新 page.html 试试：\r\n\r\n    ![](https://ww4.sinaimg.cn/large/652c38b1gw1fbmmugfgqxj210k0l8dkj.jpg)\r\n\r\n    果然报错，找不到 #app，说明我们的猜测正确。\r\n\r\n\r\n你还可以继续猜，然后 modify，比如改 data、改 el 等。\r\n\r\n每次改完 JS 你都要运行 webpack 重新打包。\r\n\r\n至此，Vue 的 Hello World 我们就做出来了。\r\n\r\n# 致饥人谷学员\r\n\r\n你需要看懂本教程，并将上面的操作全部实现，最终做出一个 Vue 的 Hello World。\r\n\r\n不要把 node_modules、.DS_Store、.idea 提交上来！\r\n\r\n任务截止时间，本周六 21:00。\r\n\r\n有没有发现今天的教程比上次长很多，以后会越来越长的。\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/jirengu-inc/jrg-project-5/issues/comments/318538781","html_url":"https://github.com/jirengu-inc/jrg-project-5/issues/2#issuecomment-318538781","issue_url":"https://api.github.com/repos/jirengu-inc/jrg-project-5/issues/2","id":318538781,"user":{"login":"andreaxiang","id":26763591,"avatar_url":"https://avatars3.githubusercontent.com/u/26763591?v=4","gravatar_id":"","url":"https://api.github.com/users/andreaxiang","html_url":"https://github.com/andreaxiang","followers_url":"https://api.github.com/users/andreaxiang/followers","following_url":"https://api.github.com/users/andreaxiang/following{/other_user}","gists_url":"https://api.github.com/users/andreaxiang/gists{/gist_id}","starred_url":"https://api.github.com/users/andreaxiang/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andreaxiang/subscriptions","organizations_url":"https://api.github.com/users/andreaxiang/orgs","repos_url":"https://api.github.com/users/andreaxiang/repos","events_url":"https://api.github.com/users/andreaxiang/events{/privacy}","received_events_url":"https://api.github.com/users/andreaxiang/received_events","type":"User","site_admin":false},"created_at":"2017-07-28T02:25:01Z","updated_at":"2017-07-28T02:25:01Z","body":"[hello vue](https://andreaxiang.github.io/hello-vue/page.html)"}}
{"actor":{"display_login":"andreaxiang"}}