Hello Vue
Closed this issue · 73 comments
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,说明我们的猜测正确。
你还可以继续猜,然后 modify,比如改 data、改 el 等。
每次改完 JS 你都要运行 webpack 重新打包。
至此,Vue 的 Hello World 我们就做出来了。
致饥人谷学员
你需要看懂本教程,并将上面的操作全部实现,最终做出一个 Vue 的 Hello World。
不要把 node_modules、.DS_Store、.idea 提交上来!
任务截止时间,本周六 21:00。
有没有发现今天的教程比上次长很多,以后会越来越长的。
yjl v-o-r for task-02 link
Vue.js-demo LX
vue-demoGJC
vue-demo WXY
vue-demo ZJY
Vue.js-demo xxk
task2 LWE
任务二 LC
task2-vueCJH
vue-test 任务6-任磊。最后挤一挤~~
step-2 任务6班-赵力群
demo-2 任务10班 张睿
@code-zhangrui README.md 呢
hello-Vue直播11班杨涛
task-2 LK
hello vue 弄庆洋
vue-demo 熊凡
hello Vue.js 李祺
webpack_setp_2 杨家文
vue-2好像把任务1覆盖了。。
https://github.com/xzmly/webpack
你好方方,再见方方