File tree 1 file changed +10
-4
lines changed
1 file changed +10
-4
lines changed Original file line number Diff line number Diff line change @@ -3,13 +3,14 @@ This repository is a clone from Stu Ratcliffe [Server rendering Vue.js applicati
3
3
Following his articile and trying to have some write up. (e.g. using latest packages in package.json)
4
4
5
5
## Install and run:
6
- if Webpack is not installed yet:
6
+ if Webpack is not installed yet:
7
7
npm install -g webpack
8
8
9
9
dotnet restore
10
10
npm install
11
11
webpack
12
12
dotnet run
13
+
13
14
## Packages used:
14
15
- lodash <- similiar to numpy in Python, utilies library for manipulating array/object.
15
16
- axios <- Promise based HTTP client for the browser and Node.js, think of $.ajax() if you come from jQuery world
@@ -39,24 +40,29 @@ if Webpack is not installed yet:
39
40
Here we try to modify the implementation order different from the original post.
40
41
We are going to add the loading indicator before implementing the Server Side Rendering.
41
42
To simulate timely API call form remote server, we add the following line in HomeController.cs:
43
+
42
44
public JsonResult initialMessages(){
43
45
//Added to simulate initial loading from remote server
44
46
Thread.Sleep(2000);
45
47
...
46
48
}
47
49
48
- 1 . Add nprogess in package.json dependency:
50
+ 1 . Add nprogess in package.json dependency:
51
+
49
52
"dependencies": {
50
53
"vue": "^2.5.8",
51
54
"vuex": "^3.0.1",
52
55
"vue-router": "^3.0.1",
53
56
"lodash": "^4.17.4",
54
57
"axios": "^0.17.1",
55
58
"nprogress": "^0.2.0"
56
- }
57
- 2 . Add style-loader and css-loader to webpack.config:
59
+ }
60
+
61
+ 2 . Add style-loader and css-loader to webpack.config:
62
+
58
63
{
59
64
test: /\. css$/,
60
65
loader: "style-loader!css-loader"
61
66
}
67
+
62
68
3 . Modify ClientApp/vuex/actions.js, add ` NProgress.start() ` and ` NProgress.done() ` before and after axios remote call.
You can’t perform that action at this time.
0 commit comments