You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -4,16 +4,16 @@
4
4
5
5
Welcome to my first application bulid tutorial: **Bulid vue-hackernews-2.0 from Scratch**.
6
6
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.
8
8
9
9
**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.
10
10
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.
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.
Copy file name to clipboardExpand all lines: tutorials/0-vue.js-vuex-router/README.md
+5-5
Original file line number
Diff line number
Diff line change
@@ -16,21 +16,21 @@ As a new learner of front-end development, ever since I started to learn Vue-HN
16
16
</p>
17
17
18
18
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:
20
20
-[Vue.js 2.0: The Progressive JavaScript Framework](https://vuejs.org/)
21
21
-[Vue-router 2.0: A Simple Router for Vue.js](https://router.vuejs.org/en/)
22
22
-[Vuex 2.0: State Management Patter and Library for Vue.js Application ](http://vuex.vuejs.org/en/)
23
23
-[Hacker News API: HackerNews API Works with Firebase](https://github.com/HackerNews/API)
24
24
-[Learn ES2015: A detailed overview of ECMAScript 2015 features](https://babeljs.io/learn-es2015/)
25
25
-[Firebase: App success made simple](https://firebase.google.com/docs/web/setup)
26
26
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.
28
28
29
29
## Process
30
30
31
31
There are some key points to bulid this project:
32
32
- 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:
34
34
```javascript
35
35
// without installing firebase package:
36
36
@@ -53,9 +53,9 @@ There are some key points to bulid this project:
53
53
54
54
```
55
55
56
-
- How to communicate between vuex and router?
56
+
- How to communicate between Vuex and router?
57
57
**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;
59
59
- With the help of a package named "vuex-router-sync".
60
60
> 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.
Copy file name to clipboardExpand all lines: tutorials/1-webpack-vue.js-router-store-firebase/README.md
+3-2
Original file line number
Diff line number
Diff line change
@@ -124,9 +124,10 @@ npm test
124
124
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.
125
125
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.
0 commit comments