Converting into vue-cli template

template/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["env", { "modules": false }]
+  ], 
+  "plugins": [
+    "lodash",
+    ["component", [
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-default"
+      }
+    ]]
+  ]
+}

template/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

template/.eslintignore

@@ -0,0 +1,2 @@
+build/*.js
+config/*.js

template/.eslintrc.js

@@ -0,0 +1,56 @@
+// http://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+  },
+  extends: 'airbnb-base',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // check if imports actually resolve
+  'settings': {
+    'import/resolver': {
+      'webpack': {
+        'config': 'webpack.config.js'
+      }
+    }
+  },
+  // add your custom rules here
+  'rules': {
+    "no-underscore-dangle": [
+      0
+    ],
+    "new-cap": [
+      0
+    ],
+    "semi": [2, "always"],
+    // don't require .vue extension when importing
+    'import/extensions': ['error', 'always', {
+      'js': 'never',
+      'vue': 'never'
+    }],
+    // allow optionalDependencies
+    'import/no-extraneous-dependencies': ['error', {
+      'optionalDependencies': ['test/unit/index.js']
+    }],
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  },
+  "globals": {
+    "describe": true,
+    "it": true,
+    "expect": true,
+    "window": true,
+    "document": true,
+    "__DEV__": true,
+    "__PROD__": true,
+    "__APP_MODE__": ""
+  },
+};

template/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Rohit Kumar Rai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

template/README.md

@@ -0,0 +1,19 @@
+# vue-starter
+
+> A Vue.js starter kit that lets you focus on more programming and less configruation.
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+```
+
+For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
+=======

template/build/webpack.base.js

@@ -0,0 +1,81 @@
+const path = require('path');
+const config = require('../config');
+const webpack = require('webpack');
+const ESlintFormatter = require('eslint-friendly-formatter');
+
+const defaults = {
+  __DEV__: JSON.stringify(config.isDev),
+  __PROD__: JSON.stringify(config.isProd),
+  'process.env.NODE_ENV': `"${config.env}"`,
+  __APP_MODE__: `"${config.appMode}"`,
+};
+
+const webpackConfig = {
+  entry: './src/index.js',
+  output: {
+    path: config.assetsRoot,
+    publicPath: config.assetsPublicPath,
+    filename: config.isDev ? './js/[name].js' : './js/[name].[chunkhash].js',
+    chunkFilename: config.isDev ? './js/[id].js' : './js/chunk.[chunkhash].js',
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      vue$: 'vue/dist/vue.esm.js',
+    },
+  },
+  plugins: [
+    new webpack.DefinePlugin(defaults),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        exclude: /node_modules/,
+        options: {
+          formatter: ESlintFormatter,
+        },
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          extractCSS: config.isProd,
+        },
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 100,
+          name: path.posix.join(config.assetsSubDirectory, './img/[name].[hash:7].[ext]'),
+        },
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: path.posix.join(config.assetsSubDirectory, './media/[name].[hash:7].[ext]'),
+        },
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: path.posix.join(config.assetsSubDirectory, './fonts/[name].[hash:7].[ext]'),
+        },
+      },
+    ],
+  },
+};
+
+module.exports = webpackConfig;

template/build/webpack.development.js

@@ -0,0 +1,38 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
+
+const webpackConfig = {
+  devtool: '#cheap-module-eval-source-map',
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true,
+  },
+  performance: {
+    hints: false,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        loaders: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true,
+    }),
+    new FriendlyErrorsPlugin(),
+  ],
+};
+
+module.exports = webpackConfig;

template/build/webpack.production.js

@@ -0,0 +1,123 @@
+const path = require('path');
+const config = require('../config');
+const webpack = require('webpack');
+
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
+const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
+
+const webpackConfig = {
+  devtool: '#source-map',
+  module: {
+    rules: [
+      {
+        test: /\.scss$/i,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          // resolve-url-loader may be chained before sass-loader if necessary
+          use: ['css-loader', 'sass-loader'],
+        }),
+      },
+      {
+        test: /\.css$/i,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: 'css-loader',
+        }),
+      },
+    ],
+  },
+  plugins: [
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      output: {
+        comments: false,
+      },
+      debug: false,
+      compress: {
+        warnings: false,
+        dead_code: true,
+      },
+    }),
+    new LodashModuleReplacementPlugin(),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: './css/[name].[contenthash].css',
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: {
+        safe: true,
+      },
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true,
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency',
+    }),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks(module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource && /\.js$/.test(module.resource) &&
+          module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0
+        );
+      },
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor'],
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.assetsSubDirectory,
+        ignore: ['.*'],
+      },
+    ]),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true,
+    }),
+  ],
+};
+
+
+if (config.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin');
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(`\\.(${config.productionGzipExtensions.join('|')})$`),
+      threshold: 10240,
+      minRatio: 0.8,
+    }));
+}
+
+if (config.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin());
+}
+
+module.exports = webpackConfig;

template/config/config.app.js

@@ -0,0 +1,3 @@
+module.exports = {
+  appName: 'Some App Specific Mode',
+};

template/config/config.base.js

@@ -0,0 +1,12 @@
+const API_URL = '//app.example.com/api';
+const API_VERSION = '1.0';
+const BASE_URL = `${API_URL}/${API_VERSION}`;
+
+exports.getURL = url => BASE_URL + url;
+
+module.exports = {
+  appName: 'Default App',
+  debug: false,
+  sessionName: 'session_id',
+  credential: 'same-origin',
+};