init

Author: yyx990803

.gitignore

@@ -0,0 +1,3 @@
+dist
+.DS_Store
+node_modules

index.html

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="/dist/main.css">
+<div id="app"></div>
+<script src="/dist/main.js"></script>

package.json

@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server",
+    "build": "webpack --env.prod"
+  },
+  "dependencies": {
+    "vue": "^3.0.0-alpha.0"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.0.0-alpha.0",
+    "css-loader": "^3.4.0",
+    "file-loader": "^5.0.2",
+    "mini-css-extract-plugin": "^0.9.0",
+    "url-loader": "^3.0.0",
+    "vue-loader": "^16.0.0-alpha.0",
+    "webpack": "^4.41.4",
+    "webpack-cli": "^3.3.10",
+    "webpack-dev-server": "^3.10.1"
+  }
+}

src/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <img src="./logo.png">
+  <h1>{{ msg }}</h1>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      msg: 'Hello Vue 3!'
+    }
+  }
+}
+</script>
+
+<style scoped>
+img {
+  width: 200px;
+}
+h1 {
+  font-family: Arial, Helvetica, sans-serif;
+}
+</style>

src/logo.png

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp().mount(App, '#app')

src/main.js

@@ -0,0 +1,51 @@
+const path = require('path')
+const { VueLoaderPlugin } = require('vue-loader')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+
+module.exports = (env = {}) => ({
+  mode: env.prod ? 'production' : 'development',
+  devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
+  entry: path.resolve(__dirname, './src/main.js'),
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/dist/'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: 'vue-loader'
+      },
+      {
+        test: /\.png$/,
+        use: {
+          loader: 'url-loader',
+          options: { limit: 8192 }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: { hmr: !env.prod }
+          },
+          'css-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css'
+    })
+  ],
+  devServer: {
+    inline: true,
+    hot: true,
+    stats: 'minimal',
+    contentBase: __dirname,
+    overlay: true
+  }
+})