first commit

taliyada · Feb 7, 2018 · b78ae2b · b78ae2b
1 parent 3fde7ea
commit b78ae2b
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,8 @@
+# Node modules
+node_modules/
+
+# dist
+dist/
+
+# Packge-lock
+packge-lock.json
diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-# hello-vue
+# Hello Vue.js
+
+A basic example using webpack & Vue.js
diff --git a/index.html b/index.html
@@ -0,0 +1,58 @@
+<!doctype html>
+    <html>
+    <head prefix="og: http://ogp.me/ns#">
+    <meta charset="utf-8">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
+
+    <!-- facebook open graph -->
+
+    <meta property="og:title" content="">
+    <meta property="og:type" content="website">
+    <meta property="og:description" content="">
+    <meta property="og:image:type" content="image/png">
+    <meta property="og:image" content="">
+    <meta property="og:url" content="">
+
+    <title>Hello World - webpack & Vue.js</title>
+
+    <meta name="description" content="Hello world with webpack & Vue.js">
+
+    <link rel="canonical" href="">
+    <link rel="shortcut icon" href="">
+
+    <!-- manifest -->
+
+    <link rel="manifest" href="">
+
+    <!-- ios icon -->
+
+    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="">
+    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="">
+    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="">
+
+    <!-- css -->
+
+    <style type="text/css">
+
+        /* inline css */
+
+    </style>
+
+    <link rel="stylesheet" type="text/css" href="">
+
+    <!-- google fonts -->
+
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
+
+</head>
+<body>
+
+    <div id="app"></div>
+
+    <!-- javascript -->
+
+    <script src="dist/bundle.js"></script>
+
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,20 @@
+{
+    "name": "Vue.js",
+    "version": "1.0.0",
+    "description": "Hello world with webpack & Vue.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "build-dev": "webpack --config webpack.config.js",
+        "build-prod": "cross-env NODE_ENV=production webpack --config webpack.config.js"
+    },
+    "devDependencies": {
+        "uglifyjs-webpack-plugin": "^1.1.8",
+        "vue": "^2.5.13",
+        "vue-loader": "^14.1.1",
+        "vue-template-compiler": "^2.5.13"
+    },
+    "dependencies": {
+        "cross-env": "^5.1.3",
+        "webpack": "^3.10.0"
+    }
+}
diff --git a/src/components/Hello.vue b/src/components/Hello.vue
@@ -0,0 +1,19 @@
+<template>
+
+    <div class="hello">
+
+        <span>{{ msg }}</span>
+
+    </div>
+
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                msg: 'Hello world!'
+            }
+        }
+    }
+</script>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import Hello from './components/Hello.vue'
+
+// Hello :)
+
+new Vue({
+    el: '#app',
+    components: { Hello },
+    template: '<Hello/>'
+});
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,35 @@
+const path     = require('path');
+const uglifyjs = require('uglifyjs-webpack-plugin');
+const compiler = require('vue-template-compiler');
+
+const env = process.env.NODE_ENV;
+
+let plugins = [];
+
+if (env == 'production') {
+
+    plugins.push(new uglifyjs());
+
+}
+
+module.exports = {
+    entry: './src/main.js',
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist')
+    },
+    module: {
+        rules: [
+            {
+            test: /\.vue$/,
+            loader: 'vue-loader'            
+            },
+        ]
+    },
+    resolve: {
+        alias: {
+          'vue$': 'vue/dist/vue.esm.js'
+        }
+    },
+    plugins: plugins
+};