Init

iutbay · Dec 1, 2017 · 54737ad · 54737ad
commit 54737ad
Show file tree

Hide file tree

Showing 9 changed files with 249 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-3"
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+.DS_Store
+dist/*
+nbproject/
+node_modules/
+npm-debug.log
+yarn-error.log
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="/dist/style.css">
+</head>
+
+<body>
+
+    <div class="container">
+        <h1>VueJS Basic Template</h1>
+        <div id="app"></div>
+    </div>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
+        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+    <script src="/dist/app.js"></script>
+
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "vuejs-basic",
+  "description": "VueJS Template",
+  "version": "0.0.1",
+  "author": "Kevin LEVRON <[email protected]>",
+  "private": false,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --host 0.0.0.0 --port 8080",
+    "build-dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+  },
+  "dependencies": {
+    "vue": "^2.4.4",
+    "vuex": "^3.0.1",
+    "vue-router": "^3.0.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-stage-3": "^6.24.1",
+    "cross-env": "^5.0.5",
+    "css-loader": "^0.28.7",
+    "es6-promise": "^4.1.1",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^1.1.4",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.6",
+    "vue-loader": "^13.0.5",
+    "vue-template-compiler": "^2.4.4",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.9.1"
+  }
+}
diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
diff --git a/src/components/App.vue b/src/components/App.vue
@@ -0,0 +1,15 @@
+<template>
+
+    <div>
+        <router-view></router-view>
+    </div>
+
+</template>
+
+<script>
+export default {
+};
+</script>        
+
+<style src="../assets/css/style.scss" lang="scss">
+</style>
diff --git a/src/components/Default.vue b/src/components/Default.vue
@@ -0,0 +1,15 @@
+<template>
+
+    <div>
+        VueJS Basic App
+    </div>
+
+</template>
+
+<script>
+export default {
+};
+</script>        
+
+<style lang="scss">
+</style>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,36 @@
+import 'es6-promise/auto';
+import Vue from 'vue';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import App from './components/App.vue';
+import Default from './components/Default.vue';
+
+/*
+ * Init Vuex
+ */
+Vue.use(Vuex);
+const store = new Vuex.Store({
+    state: {
+    }
+});
+
+/*
+ * Init VueRouter
+ */
+Vue.use(VueRouter);
+const router = new VueRouter({
+    mode: 'history',
+    routes: [
+        { path: '/', component: Default }
+    ]
+});
+
+/*
+ * Init Vue
+ */
+new Vue({
+    el: '#app',
+    store,
+    router,
+    render: h => h(App)
+});
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,108 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: './src/main.js',
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/dist/',
+    filename: 'app.js'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          'vue-style-loader',
+          'css-loader'
+        ],
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'sass-loader'
+        ],
+      },
+      {
+        test: /\.sass$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'sass-loader?indentedSyntax'
+        ],
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
+            // the "scss" and "sass" values for the lang attribute to the right configs here.
+            // other preprocessors should work out of the box, no loader config like this necessary.
+            'scss': [
+              'vue-style-loader',
+              'css-loader',
+              'sass-loader'
+            ],
+            'sass': [
+              'vue-style-loader',
+              'css-loader',
+              'sass-loader?indentedSyntax'
+            ]
+          }
+          // other vue-loader options go here
+        }
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]'
+        }
+      }
+    ]
+  },
+  resolve: {
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js'
+    },
+    extensions: ['*', '.js', '.vue', '.json']
+  },
+  devServer: {
+    historyApiFallback: true,
+    noInfo: true,
+    overlay: true
+  },
+  performance: {
+    hints: false
+  },
+  devtool: '#eval-source-map'
+}
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports.devtool = '#source-map'
+  // http://vue-loader.vuejs.org/en/workflow/production.html
+  module.exports.plugins = (module.exports.plugins || []).concat([
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.LoaderOptionsPlugin({
+      minimize: true
+    })
+  ])
+}