lesson2

vagrant · vagrant · commit 63211578651b · 2018-07-02T18:51:58.000Z
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,14 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
diff --git a/index.html b/index.html
@@ -2,23 +2,10 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <title>learn-vue</title>
   </head>
   <body>
-    <div id="app">
-      <p>{{ message }}</p>
-    </div>
-    <script>
-      new Vue({
-        el: '#app',
-        data: {
-          message: 'Hello Vue.js!'
-        }
-      })
-      </script>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
   </body>
-</html>
-
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,14 @@
+{
+    "name": "learn-vue",
+    "version": "1.0.0",
+    "devDependencies": {
+        "html-webpack-plugin": "^3.2.0",
+        "vue-loader": "^15.2.4",
+        "vue-template-compiler": "^2.5.16",
+        "webpack": "^4.12.1",
+        "webpack-cli": "^3.0.8"
+    },
+    "dependencies": {
+        "vue": "^2.5.16"
+    }
+}
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,16 @@
+<template>
+  <div id="app">
+    <HelloVue/>
+  </div>
+</template>
+
+<script>
+import HelloVue from './components/HelloVue.vue'
+
+export default {
+  name: 'app',
+  components: {
+    HelloVue
+  }
+}
+</script>
diff --git a/src/components/HelloVue.vue b/src/components/HelloVue.vue
@@ -0,0 +1,14 @@
+<template>
+   <p>{{ message }}</p>
+</template>
+
+<script>
+export default {
+  name: 'HelloVue',
+  data: function() {
+    return {
+      message: 'Hello Vue.js!'
+    }
+  }
+}
+</script>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,6 @@
+import Vue from 'vue/dist/vue.js'
+import App from './App.vue'
+
+new Vue({
+    render: h => h(App)
+  }).$mount('#app')
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,29 @@
+var path = require('path');
+const { VueLoaderPlugin } = require('vue-loader')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+module.exports = {
+  mode: 'development',
+  entry: './src/main.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      }
+    ]
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    // 以下是HtmlWebpackPlugin的配置
+    new HtmlWebpackPlugin({
+      template: 'index.html',
+      filename: './index.html',
+      hash: true
+    })
+  ]
+};
