diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a9df4a5 --- /dev/null +++ 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 \ No newline at end of file diff --git a/dist/assets/css/.gitkeep b/dist/assets/css/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/dist/assets/fonts/.gitkeep b/dist/assets/fonts/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/dist/assets/js/.gitkeep b/dist/assets/js/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..767ba30 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,35 @@ + + + + + Title + + + +
+ +
+

H1 title

+ +

+ FA icon:
+ +

+ +
+ Alert test +
+ +
+ Example component: +
+ + + +
+ + +
+ + + \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..eb03ea9 --- /dev/null +++ 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 new file mode 100644 index 0000000..e69de29 diff --git a/src/fonts/.gitkeep b/src/fonts/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/images/.gitkeep b/src/images/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/src/js/app.js b/src/js/app.js new file mode 100644 index 0000000..4d9bf6d --- /dev/null +++ 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 new file mode 100644 index 0000000..65fe919 --- /dev/null +++ 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 new file mode 100644 index 0000000..31fdf87 --- /dev/null +++ b/src/js/components/ExampleComponent.vue @@ -0,0 +1,35 @@ + + + diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss new file mode 100644 index 0000000..06c753e --- /dev/null +++ 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; \ No newline at end of file diff --git a/src/scss/app.scss b/src/scss/app.scss new file mode 100644 index 0000000..07baba1 --- /dev/null +++ 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 new file mode 100644 index 0000000..993fcd5 --- /dev/null +++ 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 +// });