initial

enterprise-it-ru · Apr 17, 2019 · 1f11eba · 1f11eba
commit 1f11eba
Show file tree

Hide file tree

Showing 15 changed files with 261 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,10 @@
+.gitignore
+.idea/
+dist/assets/css/*
+!dist/assets/css/.gitkeep
+dist/assets/fonts/*
+!dist/assets/fonts/.gitkeep
+dist/assets/js/*
+!dist/assets/js/.gitkeep
+node_modules/
+package-lock.json
diff --git a/dist/assets/css/.gitkeep b/dist/assets/css/.gitkeep
diff --git a/dist/assets/fonts/.gitkeep b/dist/assets/fonts/.gitkeep
diff --git a/dist/assets/js/.gitkeep b/dist/assets/js/.gitkeep
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <link rel="stylesheet" href="assets/css/app.css">
+</head>
+<body>
+<div class="wrapper" id="app">
+
+    <div class="container">
+        <h1>H1 title</h1>
+
+        <p>
+            FA icon: <br>
+            <i class="fas fa-location-arrow mr-2"></i>
+        </p>
+
+        <div class="alert alert-success">
+            Alert test
+        </div>
+
+        <div>
+            Example component:
+        </div>
+
+        <example-component></example-component>
+
+    </div>
+
+
+</div>
+<script src="assets/js/app.js"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "webpack_project",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "npm run development",
+    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "prod": "npm run production",
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.8.1",
+    "browser-sync": "^2.26.3",
+    "browser-sync-webpack-plugin": "^2.0.1",
+    "cross-env": "^5.2.0",
+    "laravel-mix": "^4.0.15",
+    "resolve-url-loader": "^2.3.1",
+    "sass": "^1.18.0",
+    "sass-loader": "^7.1.0",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "bootstrap": "^4.3.1",
+    "jquery": "^3.4.0",
+    "lodash": "^4.17.11",
+    "popper.js": "^1.15.0",
+    "vue": "^2.6.10",
+    "vue-spinkit": "^1.4.1"
+  }
+}
diff --git a/src/css/.gitkeep b/src/css/.gitkeep
diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep
diff --git a/src/images/.gitkeep b/src/images/.gitkeep
diff --git a/src/js/app.js b/src/js/app.js
@@ -0,0 +1,20 @@
+require('./bootstrap');
+
+window.Vue = require('vue');
+
+// Набор прелоадеров
+import Spinner from 'vue-spinkit'
+Vue.component('Spinner', Spinner);
+
+// Пример компонента
+Vue.component('example-component', require('./components/ExampleComponent').default);
+
+/**
+ * Next, we will create a fresh Vue application instance and attach it to
+ * the page. Then, you may begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */
+
+const app = new Vue({
+    el: '#app',
+});
diff --git a/src/js/bootstrap.js b/src/js/bootstrap.js
@@ -0,0 +1,25 @@
+window._ = require('lodash');
+
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.Popper = require('popper.js').default;
+    window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap');
+} catch (e) {}
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
diff --git a/src/js/components/ExampleComponent.vue b/src/js/components/ExampleComponent.vue
@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <div class="row">
+            <div class="col">
+                <Spinner :noFadeIn="true" :className="'m-auto'" :height="'100'" :width="'100'" name="pacman" color="#000000"/>
+            </div>
+        </div>
+
+        <form action="">
+            <div class="form-group">
+                <label for="name">Ваше имя:</label>
+                <input type="text" id="name" name="name" class="form-control" v-model="name">
+            </div>
+        </form>
+
+        <div v-if="name.length > 0">
+            Здравствуй, {{ name }}
+        </div>
+
+    </div>
+</template>
+
+<script>
+    export default {
+
+        data() {
+            return {
+                name: ''
+            }
+        },
+        watch: {
+        },
+
+    }
+</script>
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -0,0 +1,22 @@
+// Body
+$body-bg: #f8fafc;
+
+// Typography
+$font-family-sans-serif: "Roboto", sans-serif;
+$font-size-base: 0.9rem;
+$line-height-base: 1.6;
+
+
+$fa-font-path: '/assets/fonts';
+
+// Colors
+$blue: #3490dc;
+$indigo: #6574cd;
+$purple: #9561e2;
+$pink: #f66D9b;
+$red: #e3342f;
+$orange: #f6993f;
+$yellow: #ffed4a;
+$green: #38c172;
+$teal: #4dc0b5;
+$cyan: #6cb2eb;
diff --git a/src/scss/app.scss b/src/scss/app.scss
@@ -0,0 +1,12 @@
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Roboto');
+
+// Variables
+@import 'variables';
+
+// Bootstrap
+@import '~bootstrap/scss/bootstrap';
+
+@import "~@fortawesome/fontawesome-free/scss/regular";
+@import "~@fortawesome/fontawesome-free/scss/solid";
+@import "~@fortawesome/fontawesome-free/scss/fontawesome";
diff --git a/webpack.mix.js b/webpack.mix.js
@@ -0,0 +1,64 @@
+let mix = require('laravel-mix');
+
+/*
+ |--------------------------------------------------------------------------
+ | Mix Asset Management
+ |--------------------------------------------------------------------------
+ |
+ | Mix provides a clean, fluent API for defining some Webpack build steps
+ | for your Laravel application. By default, we are compiling the Sass
+ | file for your application, as well as bundling up your JS files.
+ |
+ */
+
+mix.js('src/js/app.js', 'dist/assets/js')
+    .sass('src/scss/app.scss', 'dist/assets/css')
+    .then(() => {
+        mix.copy('node_modules/@fortawesome/fontawesome-free/webfonts/*', 'dist/assets/fonts/');
+    });
+
+
+// Если не нужен сервер статики, закомментировать...
+var browserSync = require("browser-sync").create();
+browserSync.init({
+    watch: true,
+    server: "./dist"
+});
+
+
+// Full API
+// mix.js(src, output);
+// mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation.
+// mix.preact(src, output); <-- Identical to mix.js(), but registers Preact compilation.
+// mix.coffee(src, output); <-- Identical to mix.js(), but registers CoffeeScript compilation.
+// mix.ts(src, output); <-- TypeScript support. Requires tsconfig.json to exist in the same folder as webpack.mix.js
+// mix.extract(vendorLibs);
+// mix.sass(src, output);
+// mix.less(src, output);
+// mix.stylus(src, output);
+// mix.postCss(src, output, [require('postcss-some-plugin')()]);
+// mix.browserSync('localhost');
+// mix.combine(files, destination);
+// mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation.
+// mix.copy(from, to);
+// mix.copyDirectory(fromDir, toDir);
+// mix.minify(file);
+// mix.sourceMaps(); // Enable sourcemaps
+// mix.version(); // Enable versioning.
+// mix.disableNotifications();
+// mix.setPublicPath('dist');
+// mix.setResourceRoot('dist');
+// mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin.
+// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
+// mix.babelConfig({}); <-- Merge extra Babel configuration (plugins, etc.) with Mix's default.
+// mix.then(function () {}) <-- Will be triggered each time Webpack finishes building.
+// mix.dump(); <-- Dump the generated webpack config object t the console.
+// mix.extend(name, handler) <-- Extend Mix's API with your own components.
+// mix.options({
+//   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
+//   globalVueStyles: file, // Variables file to be imported in every component.
+//   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
+//   purifyCss: false, // Remove unused CSS selectors.
+//   terser: {}, // Terser-specific options. https://github.com/webpack-contrib/terser-webpack-plugin#options
+//   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
+// });