Skip to content

Commit 079bd1b

Browse files
committed
fix some mistakes
1 parent e3e8118 commit 079bd1b

File tree

7 files changed

+24
-19
lines changed

7 files changed

+24
-19
lines changed

Diff for: README.cn.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22

33
## 前言 [ [English Version](./README.md) ]
44

5-
欢迎大家来到我的第一个程序搭建教程: **从零开始搭建 《vue-hackernews-2.0》**.
5+
欢迎大家来到我的第一个程序搭建教程: **从零开始搭建 《vue-hackernews-2.0》**
66

77
作为一个前端开发的初学者,在接触学习到 Vue.js 的时候,我发现官方提供并极力推荐的项目《vue-hackernews-2.0》对于新手而言比较难理解。但同时我又被这种高度工业化的项目所吸引,所以我决定花一段时间来弄清楚这个项目到底是怎么运行起来的。 在这个教程中我将会通过利用不同的版本的迭代的方式来逐步重建这个项目。
88

99
**这个项目是面向初学者的。** 整个教程中,我逐步实现了这个项目的四个版本,每一个版本之间有一定的递进关系。为了方便理解掌握每个版本的内容,在每个版本的说明中,我会尽量把在相应版本中所需要掌握的知识点列出来。
1010

11-
注明: 简便起见,如未特别说明,在之后的所有章节中我会用 Vue-HN 来代替 vue-hackernews-2.0 项目。 项目运行的系统是 Windows,因条件限制未在其他系统上测试,请见谅。
11+
> 注明:简便起见,如未特别说明,在之后的所有章节中我会用 Vue-HN 来代替 vue-hackernews-2.0 项目。 项目运行的系统是 Windows 7,因条件限制未在其他系统上测试,请见谅。
1212
1313

1414
## 各版本简介
@@ -27,7 +27,7 @@
2727
</p>
2828

2929
### 1. Webpack, Vue.js, Vue-router, Vuex and Hackernews API
30-
经过第一个版本后,我们对这个项目有了初步的了解。在这个版本中,我们会使用一些工具,使得我们这个项目初步模块化,同时也更加便于维护。在这个版本中我们将会使用到一些基本的插件和包,并通过 webpack 来实现功能。我们只需要简单的配置一下 webpack 就行,不会涉及到服务器端的内容,不会涉及缓存也不会涉及生产模式及开发模式的不同配置。下面的动图就是这个版本的成品,同时这个动图里面还包含了对整个项目的简单解构。
30+
经过第一个版本后,我们对这个项目有了初步的了解。在这个版本中,我们会使用一些工具,使得我们这个项目初步模块化,同时也更加便于维护。我们将会使用到一些基本的插件和包,并通过 webpack 来实现功能。我们只需要简单的配置一下 webpack 就行,不会涉及到服务器端的内容,不会涉及缓存也不会涉及生产模式及开发模式的不同配置。下面的动图就是这个版本的成品,同时这个动图里面还包含了对整个项目的简单解构。
3131

3232
<p align="center">
3333
<img src="./tutorials/1-webpack-vue.js-router-store-firebase/public/first_edition.gif" width="700px" alt="Basic functions and simple deconstruction" >

Diff for: README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@
44

55
Welcome to my first application bulid tutorial: **Bulid vue-hackernews-2.0 from Scratch**.
66

7-
As a new learner of front-end develop and vue.js, I find it a bit difficult to understand the offical example: vue-hackernews-2.0. Meanwhile, the complexity of this example really attracts me. So I spend some time on figuring out how it works and with this tutorial I will show you how I rebulid it step-by-step.
7+
As a new learner of front-end development and Vue.js, I find it a bit difficult to understand the offical example: vue-hackernews-2.0. Meanwhile, the complexity of this example really attracts me. So I spend some time on figuring out how it works and with this tutorial I will show you how I rebulid it step-by-step.
88

99
**Note that this tutorial is for beginners.** I will divide this tutorial into serval chapters, each of then represent different step of the whole process. In the head of every chapter, I would list some basic understandings that are acquired for the corresponding chapter.
1010

11-
Notices: Vue-HN is short for vue-hackernews-2.0 in all the after chapters to help us save some keystrokes. The code of this tutorial works on Windows, other OS haven't been tested.
11+
> Notices: Vue-HN is short for vue-hackernews-2.0 in all the after chapters to help us save some keystrokes. The code of this tutorial works on Windows 7, other OS haven't been tested.
1212
1313

1414
## Brief Intro to Each Edition
1515
### 0. Vue.js, Vuex, Vue-router, HN API, Firebase, ES6
16-
As a new learner of front-end development, ever since I started to learn Vue-HN project, I wondered whether it is possible to make this project with just vue.js, vuex and vue-router. After some tries and failures, I finally made it. The GIFs below are the animation screenshots of the my edition and offical edition respectively.
16+
As a new learner of front-end development, ever since I started to learn Vue-HN project, I wondered whether it is possible to make this project with just Vue.js, Vuex and Vue-router. After some tries and failures, I finally made it. The GIFs below are the animation screenshots of the my edition and offical edition respectively.
1717

1818
<p align="center">
1919
<img src="./tutorials/0-vue.js-vuex-router/img/Author.gif" width="700px" alt="Origin Website">
@@ -50,7 +50,7 @@ In this edition, I will change the style of Vue-HN to be more Vue.js, at least i
5050

5151

5252

53-
## Table of contents
53+
## Table of Contents
5454

5555
[0-vue.js-vuex-router-firebase-ES6](/tutorials/0-vue.js-vuex-router)
5656
[1-webpack-vue.js-router-store-firebase](/tutorials/1-webpack-vue.js-router-store-firebase)

Diff for: tutorials/0-vue.js-vuex-router/README.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,21 @@ As a new learner of front-end development, ever since I started to learn Vue-HN
1616
</p>
1717

1818

19-
As we can see, almost all the features that existed in the offical example can also be implemented with just vue.js and its ecosystem. Before you start with this chapter, you should acquire some knowledge listed as below:
19+
As we can see, almost all the features that existed in the offical example can also be implemented with just Vue.js and its ecosystem. Before you start with this chapter, you should acquire some knowledge listed as below:
2020
- [Vue.js 2.0: The Progressive JavaScript Framework](https://vuejs.org/)
2121
- [Vue-router 2.0: A Simple Router for Vue.js](https://router.vuejs.org/en/)
2222
- [Vuex 2.0: State Management Patter and Library for Vue.js Application ](http://vuex.vuejs.org/en/)
2323
- [Hacker News API: HackerNews API Works with Firebase](https://github.com/HackerNews/API)
2424
- [Learn ES2015: A detailed overview of ECMAScript 2015 features](https://babeljs.io/learn-es2015/)
2525
- [Firebase: App success made simple](https://firebase.google.com/docs/web/setup)
2626

27-
Don't get dizzy when you see so many lists, because apart from the vue.js and its ecosystem, you just need to know a little about the others. Take ES6 for example, it is enough if you have ever used arrow function, Promise and some other basic features.
27+
Don't get dizzy when you see so many lists, because apart from the Vue.js and its ecosystem, you just need to know a little about the others. Take ES6 for example, it is enough if you have ever used arrow function, Promise and some other basic features.
2828

2929
## Process
3030

3131
There are some key points to bulid this project:
3232
- How to get data through the offered HackerNews API without installing Firebase package?
33-
**Answer :** After reading the Firebase ducument, I find the way to use firebase in a project without installing firebase package. Codes that with and without installing package can be like following:
33+
**Answer :** After reading the Firebase ducument, I find the way to use Firebase in a project without installing Firebase package. Codes that with and without installing package can be like following:
3434
```javascript
3535
// without installing firebase package:
3636

@@ -53,9 +53,9 @@ There are some key points to bulid this project:
5353

5454
```
5555

56-
- How to communicate between vuex and router?
56+
- How to communicate between Vuex and router?
5757
**Answer :** Two key points to ensure this:
58-
- Register store and router in the same vue instance;
58+
- Register vuex and router in the same vue instance;
5959
- With the help of a package named "vuex-router-sync".
6060
> Note: Without a package management tool, we should modify the index.js of this package and rename it as sync.js and then link it as a javascript file.
6161

Diff for: tutorials/1-webpack-vue.js-router-store-firebase/README.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -124,9 +124,10 @@ npm test
124124
We have made some progress when comparing this edition with the previous one, because this edition is more modularized and maintainable. As mentioned in the last chapter, previous edition only works in Chrome because of the dependency which is not a problem any more.
125125
However, the project is still far from perfect. In the next edition, we would take more factors into consideration. All packages and plugins that deal with these factors are aiming at a better user experience.
126126

127+
Next Edition:
128+
[2-Packages-Plugins-for-Better-User-Experience](/tutorials/2-Packages-Plugins-for-Better-User-Experience)
127129

128-
129-
Editions:
130+
Table of Content:
130131
[Introductioin](/README.md)
131132
[0-vue.js-vuex-router-firebase-ES6](/tutorials/0-vue.js-vuex-router)
132133
[1-webpack-vue.js-router-store-firebase](/tutorials/1-webpack-vue.js-router-store-firebase)

Diff for: tutorials/2-Packages-Plugins-for-Better-User-Experience/README.md

+6-2
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,13 @@ npm start
5353
```
5454

5555
## Next
56-
Basically, above is all what I get for the project. In next chapter, I will do some change as I like. Meet you there.
56+
Basically, above is all what I get for the project. In next chapter, I will do some change as I like. Meet you there.
5757

58-
Editions:
58+
Next Edition:
59+
[3-Change-the-Project-as-I-like](/tutorials/3-Change-the-Project-as-I-like)
60+
61+
62+
Table of Content:
5963
[Introductioin](/README.md)
6064
[0-vue.js-vuex-router-firebase-ES6](/tutorials/0-vue.js-vuex-router)
6165
[1-webpack-vue.js-router-store-firebase](/tutorials/1-webpack-vue.js-router-store-firebase)

Diff for: tutorials/3-Change-the-Project-as-I-like/README.cn.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
在这个版本中,我将会根据自己的喜好对整个网页进行一些改造,使得网页整体更具有 Vue.js 风格,至少从视觉上来说更加的 Vue.js。下面的动图可以预览到我这个版本的成品,为了对照官方例子,你可以去[官网](https://vue-hn.now.sh/top)查看原网页。对于所添加及更改的部分,本节的下半部分将会详细介绍。
66

77
<p align="center">
8-
<img src="./tutorials/3-Change-the-Project-as-I-like/public/last-edition-resize.gif" width="700px" alt="Last Edition of Vue-HackerNews" >
8+
<img src="./public/last-edition-resize.gif" width="700px" alt="Last Edition of Vue-HackerNews" >
99
<br/>
1010
[ Vue-HackerNews 最后版本 ]
1111
</p>
@@ -59,7 +59,7 @@ npm start
5959

6060
## 结尾
6161
到目前为止,这个项目的所有版本都已经完成了。在完成这些版本的过程中,我感受到了思考和创造带来的乐趣。这就是生活啊,希望大家也能感受到。
62-
最后,衷心感谢原作者 [尤雨溪前辈](https://github.com/yyx990803)给我们提供了一个这么好用的框架以及这么精彩的官方示例!
62+
最后,衷心感谢原作者 [尤雨溪前辈](https://github.com/yyx990803) 给我们提供了一个这么好用的框架以及这么精彩的官方示例!
6363

6464

6565

Diff for: tutorials/3-Change-the-Project-as-I-like/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,4 +66,4 @@ Editions:
6666
[0-vue.js-vuex-router-firebase-ES6](/tutorials/0-vue.js-vuex-router)
6767
[1-webpack-vue.js-router-store-firebase](/tutorials/1-webpack-vue.js-router-store-firebase)
6868
[2-Packages-Plugins-for-Better-User-Experience](/tutorials/2-Packages-Plugins-for-Better-User-Experience)
69-
[3-Change-the-Project-as-I-like](tutorials/3-Change-the-Project-as-I-like)
69+
[3-Change-the-Project-as-I-like](/tutorials/3-Change-the-Project-as-I-like)

0 commit comments

Comments
 (0)