initial commit

Author: labnize

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [["env", {
+    "targets": {
+      "browsers": ["last 2 versions"]
+    }
+  }]],
+  "plugins": [
+    ["transform-object-rest-spread"]
+  ]
+}

.eslintignore

@@ -0,0 +1,26 @@
+module.exports = {
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true
+  },
+  extends: 'airbnb-base',
+  rules: {
+    quotes: [2, 'single'],
+    semi: 2,
+    'max-len': [1, 120, 2],
+    'arrow-body-style': [1, 'as-needed'],
+    'comma-dangle': [2, 'never'],
+    'no-debugger': 2,
+    'no-console': 2,
+    'object-curly-spacing': [2, 'always'],
+    'no-undef': [1],
+    'new-cap': 1,
+    'no-param-reassign': 2,
+    'global-require': 0,
+    'no-mixed-operators': 0,
+    "import/no-extraneous-dependencies": 0,
+    "import/no-unresolved": 0,
+    "import/extensions": 0
+  }
+};

.eslintrc.js

@@ -0,0 +1,6 @@
+.idea/
+node_modules/
+
+.DS_Store
+*.log
+*.log.*

.gitignore

@@ -0,0 +1,19 @@
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const webpackDevConfig = require('./webpack.config.js');
+const open = require('open');
+
+const compiler = webpack(webpackDevConfig);
+new WebpackDevServer(compiler, {
+  contentBase: './',
+  historyApiFallback: true,
+  hot: true,
+  noInfo: false,
+  publicPath: '/',
+  stats: { colors: true }
+}).listen(3001, (err) => {
+  console.log('http://127.0.0.1:3001');
+  console.log('Opening your system browser...');
+  open('http://127.0.0.1:3001');
+});
+

build/dev-server.js

@@ -0,0 +1,76 @@
+const webpack = require('webpack');
+const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const webpackConfig = {
+  entry: {
+    app: path.resolve(__dirname, '../src/main.js')
+  },
+  output: {
+    filename: '[name].js',
+    publicPath: '/'
+  },
+  cache: true,
+  devtool: 'inline-source-map',
+  resolve: {
+    extensions: ['.js', '.vue'],
+    alias: {
+      vue$: 'vue/dist/vue.esm.js'
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          extractCSS: true
+        }
+      },
+      {
+        test: /\.js$/,
+        use: [
+          {
+            loader: 'babel-loader'
+          }
+        ],
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
+        use: ['url-loader?limit=1024&name=images/[name].[hash:8].[ext]']
+      },
+      {
+        test: /\.styl$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            'css-loader',
+            'stylus-loader'
+          ]
+        })
+      }]
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new ExtractTextPlugin({
+      filename: 'styles.[contenthash].css',
+      disable: false,
+      allChunks: true
+    }),
+    new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery'
+    }),
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: path.resolve(__dirname, '../src/index.html'),
+      inject: true
+    })
+  ]
+};
+
+module.exports = webpackConfig;

build/webpack.config.js

@@ -0,0 +1,42 @@
+{
+  "name": "vue-vuex-router-webpack",
+  "version": "0.0.1",
+  "description": "",
+  "main": "main.js",
+  "dependencies": {},
+  "scripts": {
+    "start": "node build/dev-server.js"
+  },
+  "keywords": [
+    "vue",
+    "vue-router",
+    "vuex",
+    "webpack"
+  ],
+  "author": "July",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.0",
+    "css-loader": "^0.28.5",
+    "eslint": "^4.5.0",
+    "eslint-config-airbnb-base": "^11.3.2",
+    "eslint-plugin-import": "^2.7.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
+    "html-webpack-plugin": "^2.30.1",
+    "open": "0.0.5",
+    "style-loader": "^0.18.2",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",
+    "url-loader": "^0.5.9",
+    "vue": "^2.4.2",
+    "vue-loader": "^13.0.4",
+    "vue-template-compiler": "^2.4.2",
+    "webpack": "^3.5.5",
+    "webpack-dev-server": "^2.7.1"
+  }
+}

package.json

@@ -0,0 +1,28 @@
+<template>
+  <div id="app">
+    <img src="./assets/logo.png">
+    <hello></hello>
+  </div>
+</template>
+
+<script>
+import Hello from './components/Hello';
+
+export default {
+  name: 'app',
+  components: {
+    Hello,
+  },
+};
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

src/app.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <h2>Essential Links</h2>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
+      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
+      <br>
+      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
+    </ul>
+    <h2>Ecosystem</h2>
+    <ul>
+      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
+      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
+      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'hello',
+  data() {
+    return {
+      msg: 'Welcome to Your Vue.js App',
+    };
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+</style>

src/assets/logo.png

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en" id="html">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
+    <title>Vue demo</title>
+</head>
+<body>
+<div id="app"></div>
+</body>
+</html>

src/components/Hello.vue

@@ -0,0 +1,9 @@
+import Vue from 'vue';
+import App from './app';
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  template: '<App/>',
+  components: { App }
+});