-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hello Vue #2
Comments
Vue-test SJ |
yjl v-o-r for task-02 link |
Vue.js-demo LX |
vue LZM |
vue-test CJC |
vue-demoGJC |
vue-demo WXY |
vue-demo WLF |
vue-demo ZJY |
vue-demo |
Vue.js-demo xxk |
Hello-Vue WHJ |
vue-demo zxw |
vue demo SHZ |
task2 |
task2 LWE |
任务二 LC |
任务二 ZW |
vue2-demo GQC |
task2 WQ |
task2-vueCJH |
vue-demo boloog |
vue-demo 熊凡 |
hello Vue.js 李祺 |
second空末 |
first vue沈文豪 |
webpack_setp_2 杨家文 |
step2 任务班-陈登科 |
Hello Vue 王朽木 |
vuejs 1705郭文华 |
vue-2好像把任务1覆盖了。。 |
https://github.com/xzmly/webpack 你好方方,再见方方 |
任务15:王峻名 |
Vue.js 是什么
我不讲 Vue.js 是什么,我们先学再悟。
安装
去官网找 installation 关键字,你会看到这个页面(注意看网址):
英文:https://vuejs.org/v2/guide/installation.html#NPM
中文:https://cn.vuejs.org/v2/guide/installation.html#NPM
copy 它给的命令,在我们任务一的项目目录里运行(最好把任务一的代码复制一份,改名为任务二):
如果你注意看文档里的解释(点右上角的「Translations」有中文文档),你会发现有两个构建版本(不是 Vue 1 和 Vue 2,而是 standalone 和 runtime-only ),但是两个版本效果不同。你现在只要记住我们下面使用的 Vue 是 「独立构建」(standalone build)版本就行了,另一个版本以后学。
按照文档,我们需要添加 webpack 配置(下面是修改后的 webpack.config.js):
解决警告
安装 vue 时,你的控制台有很多警告,如下:
npm WARN step-2 No xxx
最后四行警告说我们没有 description、repository field、README data 和 license field。
要解决这个问题,我们必须要有如下几个文件:
package.json
使用
npm init
可以创建一个初始的 package.json,你敲完这个命令之后,npm 会问你很多问题,方便起见,我们先不回答,一路回车就行(你看得懂也可以回答一下)。这时 package.json 就创建好了,你需要
文件结果如下:
README.md
这个文件对于开源项目来说非常重要,只是你现在还不知道怎么写而已。那么我们就创建一个空文件来掩盖这个警告吧:
重新运行
npm i vue
是不是警告变少了:警告 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 字段,会记录这些包的名字和版本,就像这样:
好处:
npm i
就可以安装你指定的包./node_modules/.bin/webpack
这个文件作为 webpack 命令(原来命令就是文件啊?你才知道)我们来试一下:
然后你就可以把全局安装的 webpack 卸载掉了。(不过没必要卸载)
至此就没有警告了。其实程序员从来都不在乎警告的 😄
copy-run-modify Vue
Copy
先抄 https://cn.vuejs.org/v2/guide/#起步。
先不要管你抄的东西是什么意思。
Run
然后运行
webpack
,打开 page.html看到浏览器控制台报错:
app.js 里的 Vue 确实不知道是从哪来的,仿照
import bar from './bar'
,我们在 app.js 里加一句import Vue from 'vue'
,结果如下:然后运行
webpack
,刷新 page.html。没有报错,页面看起来是这样:
Modify
现在我们来看看我们 copy 了些什么玩意。
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。
有没有发现今天的教程比上次长很多,以后会越来越长的。
The text was updated successfully, but these errors were encountered: