Update dependencies and review README (01 Hello VueJS)

Sara Lissette · Sara Lissette · commit 254d13b235fe · 2019-06-20T16:08:28.000+01:00
diff --git a/01 Hello VueJS/.babelrc b/01 Hello VueJS/.babelrc
@@ -1,5 +1,10 @@
 {
   "presets": [
-    "env"
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry"
+      }
+    ]
   ]
 }
diff --git a/01 Hello VueJS/README.md b/01 Hello VueJS/README.md
@@ -162,7 +162,7 @@ module.exports = {
 -   extensions: ['.js', '.ts'],
 +   extensions: ['.js', '.ts', '.vue'],
 +   alias: {
-+     'vue': 'vue/dist/vue.esm.js',
++     'vue': 'vue/dist/vue.runtime.esm.js',
 +   },
   },
 ...
@@ -238,11 +238,13 @@ module.exports = {
 + import Vue from 'vue';
 
 + new Vue({
-+  el: '#root',
-+  template: '<h1>{{message}}</h1>',
-+  data: {
-+    message: 'Hello from Vue.js',
-+  },
++   el: '#root',
++   render: function (createElement) {
++     return createElement(
++       "h1",
++       "Hello from Vue.js",
++     )
++   }
 + });
 
 ```
@@ -261,9 +263,11 @@ import Vue from 'vue';
 
 export default Vue.extend({
   name: 'App',
-  data: () => ({
-    message: 'Hello from App',
-  }),
+  data() {
+    return {
+      message: 'Hello from App',
+    };
+  },
 });
 </script>
 
@@ -280,19 +284,22 @@ import Vue from 'vue';
 + import App from './App.vue';
 
 new Vue({
-  el: '#root',
-- template: '<h1>{{message}}</h1>',
-- data: {
--   message: 'Hello from Vue.js',
-- },
-+ render: (h) => h(App),
-});
+-   el: '#root',
+-   render: function (createElement) {
+-     return createElement(
+-       "h1",
+-       "Hello from Vue.js",
+-     )
+-   }
++ render: h => h(App),
+- });
++ }).$mount('#root');
 
 ```
 
 - Create `sfc.d.ts` in order to TypeScript recognize and treat .vue files
 
- ###./src/sfc.d.ts
+###./src/sfc.d.ts
 
 ```javascript
 declare module '*.vue' {
diff --git a/01 Hello VueJS/package.json b/01 Hello VueJS/package.json
@@ -24,24 +24,24 @@
   },
   "homepage": "https://github.com/Lemoncode/vuejs-by-sample#readme",
   "devDependencies": {
-    "@babel/cli": "^7.1.5",
-    "@babel/core": "^7.1.6",
-    "@babel/preset-env": "^7.1.6",
-    "css-loader": "^1.0.1",
-    "file-loader": "^2.0.0",
-    "fork-ts-checker-webpack-plugin": "^0.5.0",
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.5",
+    "@babel/preset-env": "^7.4.5",
+    "css-loader": "^3.0.0",
+    "file-loader": "^4.0.0",
+    "fork-ts-checker-webpack-plugin": "^1.3.7",
     "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^0.4.5",
-    "ts-loader": "^5.3.1",
-    "typescript": "^3.2.1",
-    "url-loader": "^1.1.2",
-    "vue-loader": "^15.4.2",
-    "vue-template-compiler": "^2.5.17",
-    "webpack": "^4.26.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.10"
+    "mini-css-extract-plugin": "^0.7.0",
+    "ts-loader": "^6.0.3",
+    "typescript": "^3.5.2",
+    "url-loader": "^2.0.0",
+    "vue-loader": "^15.7.0",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.34.0",
+    "webpack-cli": "^3.3.4",
+    "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {
-    "vue": "^2.5.17"
+    "vue": "^2.6.10"
   }
 }
diff --git a/01 Hello VueJS/src/App.vue b/01 Hello VueJS/src/App.vue
@@ -3,11 +3,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue from 'vue';
+
 export default Vue.extend({
   name: 'App',
-  data: () => ({
-    message: 'Hello from App',
-  }),
-})
+  data() {
+    return {
+      message: 'Hello from App',
+    };
+  },
+});
 </script>
diff --git a/01 Hello VueJS/src/main.ts b/01 Hello VueJS/src/main.ts
@@ -2,6 +2,5 @@ import Vue from 'vue';
 import App from './App.vue';
 
 new Vue({
-  el: '#root',
-  render: (h) => h(App),
-});
+  render: h => h(App),
+}).$mount('#root');
diff --git a/01 Hello VueJS/webpack.config.js b/01 Hello VueJS/webpack.config.js
@@ -12,7 +12,7 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.ts', '.vue'],
     alias: {
-      'vue': 'vue/dist/vue.esm.js',
+      vue: 'vue/dist/vue.runtime.esm.js',
     },
   },
   mode: 'development',
@@ -100,4 +100,4 @@ module.exports = {
     }),
     new VueLoaderPlugin(),
   ],
-};
+};

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,10 @@`
`1`	`1`	`{`
`2`	`2`	`"presets": [`
`3`		`- "env"`
	`3`	`+ [`
	`4`	`+ "@babel/preset-env",`
	`5`	`+ {`
	`6`	`+ "useBuiltIns": "entry"`
	`7`	`+ }`
	`8`	`+ ]`
`4`	`9`	`]`
`5`	`10`	`}`