├── .babelrc
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── README.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── logo.png
    ├── utils.js
    ├── vue-loader.conf.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── config
    ├── dev.env.js
    ├── index.js
    └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── App.vue
    ├── assets
    │   ├── account1.png
    │   ├── account2.png
    │   ├── background-img.jpg
    │   ├── c2c1.png
    │   ├── c2c2.png
    │   ├── carousel-img-1.png
    │   ├── carousel-img-2.jpg
    │   ├── carousel-img-3.png
    │   ├── carousel-img-4.jpg
    │   ├── carousel-img-5.jpg
    │   ├── favicon.png
    │   ├── home_page1.png
    │   ├── home_page2.png
    │   ├── icons8-lock.gif
    │   ├── il_1140xN.1843166742_4mb8.jpg
    │   ├── il_1140xN.1848418604_1z6y.jpg
    │   ├── il_1140xN.1874177413_e9fj.jpg
    │   ├── information1.png
    │   ├── information2.png
    │   ├── logo.png
    │   ├── transaction1.png
    │   └── transaction2.png
    ├── components
    │   ├── Blog.vue
    │   ├── BlogCreate.vue
    │   ├── Contact.vue
    │   ├── Footer.vue
    │   ├── Header.vue
    │   ├── HelloWorld.vue
    │   ├── Login.vue
    │   ├── Posts.vue
    │   └── Signup.vue
    └── main.js
└── static
    └── .gitkeep


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-webpack-demo
 2 | 
 3 | > webpack-babel
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | npm install
10 | 
11 | # serve with hot reload at localhost:8080
12 | npm run dev
13 | 
14 | # build for production with minification
15 | npm run build
16 | 
17 | # build for production and view the bundle analyzer report
18 | npm run build --report
19 | ```
20 | 
21 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
22 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | require('./check-versions')()
 3 | 
 4 | process.env.NODE_ENV = 'production'
 5 | 
 6 | const ora = require('ora')
 7 | const rm = require('rimraf')
 8 | const path = require('path')
 9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 | 
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 | 
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 |   if (err) throw err
19 |   webpack(webpackConfig, (err, stats) => {
20 |     spinner.stop()
21 |     if (err) throw err
22 |     process.stdout.write(stats.toString({
23 |       colors: true,
24 |       modules: false,
25 |       children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26 |       chunks: false,
27 |       chunkModules: false
28 |     }) + '\n\n')
29 | 
30 |     if (stats.hasErrors()) {
31 |       console.log(chalk.red('  Build failed with errors.\n'))
32 |       process.exit(1)
33 |     }
34 | 
35 |     console.log(chalk.cyan('  Build complete.\n'))
36 |     console.log(chalk.yellow(
37 |       '  Tip: built files are meant to be served over an HTTP server.\n' +
38 |       '  Opening index.html over file:// won\'t work.\n'
39 |     ))
40 |   })
41 | })
42 | 


--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const chalk = require('chalk')
 3 | const semver = require('semver')
 4 | const packageConfig = require('../package.json')
 5 | const shell = require('shelljs')
 6 | 
 7 | function exec (cmd) {
 8 |   return require('child_process').execSync(cmd).toString().trim()
 9 | }
10 | 
11 | const versionRequirements = [
12 |   {
13 |     name: 'node',
14 |     currentVersion: semver.clean(process.version),
15 |     versionRequirement: packageConfig.engines.node
16 |   }
17 | ]
18 | 
19 | if (shell.which('npm')) {
20 |   versionRequirements.push({
21 |     name: 'npm',
22 |     currentVersion: exec('npm --version'),
23 |     versionRequirement: packageConfig.engines.npm
24 |   })
25 | }
26 | 
27 | module.exports = function () {
28 |   const warnings = []
29 | 
30 |   for (let i = 0; i < versionRequirements.length; i++) {
31 |     const mod = versionRequirements[i]
32 | 
33 |     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 |       warnings.push(mod.name + ': ' +
35 |         chalk.red(mod.currentVersion) + ' should be ' +
36 |         chalk.green(mod.versionRequirement)
37 |       )
38 |     }
39 |   }
40 | 
41 |   if (warnings.length) {
42 |     console.log('')
43 |     console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 |     console.log()
45 | 
46 |     for (let i = 0; i < warnings.length; i++) {
47 |       const warning = warnings[i]
48 |       console.log('  ' + warning)
49 |     }
50 | 
51 |     console.log()
52 |     process.exit(1)
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/build/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/build/logo.png


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const config = require('../config')
  4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5 | const packageConfig = require('../package.json')
  6 | 
  7 | exports.assetsPath = function (_path) {
  8 |   const assetsSubDirectory = process.env.NODE_ENV === 'production'
  9 |     ? config.build.assetsSubDirectory
 10 |     : config.dev.assetsSubDirectory
 11 | 
 12 |   return path.posix.join(assetsSubDirectory, _path)
 13 | }
 14 | 
 15 | exports.cssLoaders = function (options) {
 16 |   options = options || {}
 17 | 
 18 |   const cssLoader = {
 19 |     loader: 'css-loader',
 20 |     options: {
 21 |       sourceMap: options.sourceMap
 22 |     }
 23 |   }
 24 | 
 25 |   const postcssLoader = {
 26 |     loader: 'postcss-loader',
 27 |     options: {
 28 |       sourceMap: options.sourceMap
 29 |     }
 30 |   }
 31 | 
 32 |   // generate loader string to be used with extract text plugin
 33 |   function generateLoaders (loader, loaderOptions) {
 34 |     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
 35 | 
 36 |     if (loader) {
 37 |       loaders.push({
 38 |         loader: loader + '-loader',
 39 |         options: Object.assign({}, loaderOptions, {
 40 |           sourceMap: options.sourceMap
 41 |         })
 42 |       })
 43 |     }
 44 | 
 45 |     // Extract CSS when that option is specified
 46 |     // (which is the case during production build)
 47 |     if (options.extract) {
 48 |       return ExtractTextPlugin.extract({
 49 |         use: loaders,
 50 |         fallback: 'vue-style-loader'
 51 |       })
 52 |     } else {
 53 |       return ['vue-style-loader'].concat(loaders)
 54 |     }
 55 |   }
 56 | 
 57 |   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 58 |   return {
 59 |     css: generateLoaders(),
 60 |     postcss: generateLoaders(),
 61 |     less: generateLoaders('less'),
 62 |     sass: generateLoaders('sass', { indentedSyntax: true }),
 63 |     scss: generateLoaders('sass'),
 64 |     stylus: generateLoaders('stylus'),
 65 |     styl: generateLoaders('stylus')
 66 |   }
 67 | }
 68 | 
 69 | // Generate loaders for standalone style files (outside of .vue)
 70 | exports.styleLoaders = function (options) {
 71 |   const output = []
 72 |   const loaders = exports.cssLoaders(options)
 73 | 
 74 |   for (const extension in loaders) {
 75 |     const loader = loaders[extension]
 76 |     output.push({
 77 |       test: new RegExp('\\.' + extension + '$'),
 78 |       use: loader
 79 |     })
 80 |   }
 81 | 
 82 |   return output
 83 | }
 84 | 
 85 | exports.createNotifierCallback = () => {
 86 |   const notifier = require('node-notifier')
 87 | 
 88 |   return (severity, errors) => {
 89 |     if (severity !== 'error') return
 90 | 
 91 |     const error = errors[0]
 92 |     const filename = error.file && error.file.split('!').pop()
 93 | 
 94 |     notifier.notify({
 95 |       title: packageConfig.name,
 96 |       message: severity + ': ' + error.name,
 97 |       subtitle: filename || '',
 98 |       icon: path.join(__dirname, 'logo.png')
 99 |     })
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const config = require('../config')
 4 | const isProduction = process.env.NODE_ENV === 'production'
 5 | const sourceMapEnabled = isProduction
 6 |   ? config.build.productionSourceMap
 7 |   : config.dev.cssSourceMap
 8 | 
 9 | module.exports = {
10 |   loaders: utils.cssLoaders({
11 |     sourceMap: sourceMapEnabled,
12 |     extract: isProduction
13 |   }),
14 |   cssSourceMap: sourceMapEnabled,
15 |   cacheBusting: config.dev.cacheBusting,
16 |   transformToRequire: {
17 |     video: ['src', 'poster'],
18 |     source: 'src',
19 |     img: 'src',
20 |     image: 'xlink:href'
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const path = require('path')
 3 | const utils = require('./utils')
 4 | const config = require('../config')
 5 | const vueLoaderConfig = require('./vue-loader.conf')
 6 | 
 7 | function resolve (dir) {
 8 |   return path.join(__dirname, '..', dir)
 9 | }
10 | 
11 | 
12 | 
13 | module.exports = {
14 |   context: path.resolve(__dirname, '../'),
15 |   entry: {
16 |     app: './src/main.js'
17 |   },
18 |   output: {
19 |     path: config.build.assetsRoot,
20 |     filename: '[name].js',
21 |     publicPath: process.env.NODE_ENV === 'production'
22 |       ? config.build.assetsPublicPath
23 |       : config.dev.assetsPublicPath
24 |   },
25 |   resolve: {
26 |     extensions: ['.js', '.vue', '.json'],
27 |     alias: {
28 |       'vue$': 'vue/dist/vue.esm.js',
29 |       '@': resolve('src'),
30 |     }
31 |   },
32 |   module: {
33 |     rules: [
34 |       {
35 |         test: /\.vue$/,
36 |         loader: 'vue-loader',
37 |         options: vueLoaderConfig
38 |       },
39 |       {
40 |         test: /\.js$/,
41 |         loader: 'babel-loader',
42 |         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
43 |       },
44 |       {
45 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
46 |         loader: 'url-loader',
47 |         options: {
48 |           limit: 10000,
49 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
50 |         }
51 |       },
52 |       {
53 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
54 |         loader: 'url-loader',
55 |         options: {
56 |           limit: 10000,
57 |           name: utils.assetsPath('media/[name].[hash:7].[ext]')
58 |         }
59 |       },
60 |       {
61 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
62 |         loader: 'url-loader',
63 |         options: {
64 |           limit: 10000,
65 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
66 |         }
67 |       }
68 |     ]
69 |   },
70 |   node: {
71 |     // prevent webpack from injecting useless setImmediate polyfill because Vue
72 |     // source contains it (although only uses it if it's native).
73 |     setImmediate: false,
74 |     // prevent webpack from injecting mocks to Node native modules
75 |     // that does not make sense for the client
76 |     dgram: 'empty',
77 |     fs: 'empty',
78 |     net: 'empty',
79 |     tls: 'empty',
80 |     child_process: 'empty'
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const webpack = require('webpack')
 4 | const config = require('../config')
 5 | const merge = require('webpack-merge')
 6 | const path = require('path')
 7 | const baseWebpackConfig = require('./webpack.base.conf')
 8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 | const portfinder = require('portfinder')
12 | 
13 | const HOST = process.env.HOST
14 | const PORT = process.env.PORT && Number(process.env.PORT)
15 | 
16 | const devWebpackConfig = merge(baseWebpackConfig, {
17 |   module: {
18 |     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
19 |   },
20 |   // cheap-module-eval-source-map is faster for development
21 |   devtool: config.dev.devtool,
22 | 
23 |   // these devServer options should be customized in /config/index.js
24 |   devServer: {
25 |     clientLogLevel: 'warning',
26 |     historyApiFallback: {
27 |       rewrites: [
28 |         { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
29 |       ],
30 |     },
31 |     hot: true,
32 |     contentBase: false, // since we use CopyWebpackPlugin.
33 |     compress: true,
34 |     host: HOST || config.dev.host,
35 |     port: PORT || config.dev.port,
36 |     open: config.dev.autoOpenBrowser,
37 |     overlay: config.dev.errorOverlay
38 |       ? { warnings: false, errors: true }
39 |       : false,
40 |     publicPath: config.dev.assetsPublicPath,
41 |     proxy: config.dev.proxyTable,
42 |     quiet: true, // necessary for FriendlyErrorsPlugin
43 |     watchOptions: {
44 |       poll: config.dev.poll,
45 |     }
46 |   },
47 |   plugins: [
48 |     new webpack.DefinePlugin({
49 |       'process.env': require('../config/dev.env')
50 |     }),
51 |     new webpack.HotModuleReplacementPlugin(),
52 |     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53 |     new webpack.NoEmitOnErrorsPlugin(),
54 |     // https://github.com/ampedandwired/html-webpack-plugin
55 |     new HtmlWebpackPlugin({
56 |       filename: 'index.html',
57 |       template: 'index.html',
58 |       inject: true
59 |     }),
60 |     // copy custom static assets
61 |     new CopyWebpackPlugin([
62 |       {
63 |         from: path.resolve(__dirname, '../static'),
64 |         to: config.dev.assetsSubDirectory,
65 |         ignore: ['.*']
66 |       }
67 |     ])
68 |   ]
69 | })
70 | 
71 | module.exports = new Promise((resolve, reject) => {
72 |   portfinder.basePort = process.env.PORT || config.dev.port
73 |   portfinder.getPort((err, port) => {
74 |     if (err) {
75 |       reject(err)
76 |     } else {
77 |       // publish the new Port, necessary for e2e tests
78 |       process.env.PORT = port
79 |       // add port to devServer config
80 |       devWebpackConfig.devServer.port = port
81 | 
82 |       // Add FriendlyErrorsPlugin
83 |       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 |         compilationSuccessInfo: {
85 |           messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86 |         },
87 |         onErrors: config.dev.notifyOnErrors
88 |         ? utils.createNotifierCallback()
89 |         : undefined
90 |       }))
91 | 
92 |       resolve(devWebpackConfig)
93 |     }
94 |   })
95 | })
96 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const utils = require('./utils')
  4 | const webpack = require('webpack')
  5 | const config = require('../config')
  6 | const merge = require('webpack-merge')
  7 | const baseWebpackConfig = require('./webpack.base.conf')
  8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 13 | 
 14 | const env = require('../config/prod.env')
 15 | 
 16 | const webpackConfig = merge(baseWebpackConfig, {
 17 |   module: {
 18 |     rules: utils.styleLoaders({
 19 |       sourceMap: config.build.productionSourceMap,
 20 |       extract: true,
 21 |       usePostCSS: true
 22 |     })
 23 |   },
 24 |   devtool: config.build.productionSourceMap ? config.build.devtool : false,
 25 |   output: {
 26 |     path: config.build.assetsRoot,
 27 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 28 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 29 |   },
 30 |   plugins: [
 31 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 32 |     new webpack.DefinePlugin({
 33 |       'process.env': env
 34 |     }),
 35 |     new UglifyJsPlugin({
 36 |       uglifyOptions: {
 37 |         compress: {
 38 |           warnings: false
 39 |         }
 40 |       },
 41 |       sourceMap: config.build.productionSourceMap,
 42 |       parallel: true
 43 |     }),
 44 |     // extract css into its own file
 45 |     new ExtractTextPlugin({
 46 |       filename: utils.assetsPath('css/[name].[contenthash].css'),
 47 |       // Setting the following option to `false` will not extract CSS from codesplit chunks.
 48 |       // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
 49 |       // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
 50 |       // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
 51 |       allChunks: true,
 52 |     }),
 53 |     // Compress extracted CSS. We are using this plugin so that possible
 54 |     // duplicated CSS from different components can be deduped.
 55 |     new OptimizeCSSPlugin({
 56 |       cssProcessorOptions: config.build.productionSourceMap
 57 |         ? { safe: true, map: { inline: false } }
 58 |         : { safe: true }
 59 |     }),
 60 |     // generate dist index.html with correct asset hash for caching.
 61 |     // you can customize output by editing /index.html
 62 |     // see https://github.com/ampedandwired/html-webpack-plugin
 63 |     new HtmlWebpackPlugin({
 64 |       filename: config.build.index,
 65 |       template: 'index.html',
 66 |       inject: true,
 67 |       minify: {
 68 |         removeComments: true,
 69 |         collapseWhitespace: true,
 70 |         removeAttributeQuotes: true
 71 |         // more options:
 72 |         // https://github.com/kangax/html-minifier#options-quick-reference
 73 |       },
 74 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 75 |       chunksSortMode: 'dependency'
 76 |     }),
 77 |     // keep module.id stable when vendor modules does not change
 78 |     new webpack.HashedModuleIdsPlugin(),
 79 |     // enable scope hoisting
 80 |     new webpack.optimize.ModuleConcatenationPlugin(),
 81 |     // split vendor js into its own file
 82 |     new webpack.optimize.CommonsChunkPlugin({
 83 |       name: 'vendor',
 84 |       minChunks (module) {
 85 |         // any required modules inside node_modules are extracted to vendor
 86 |         return (
 87 |           module.resource &&
 88 |           /\.js$/.test(module.resource) &&
 89 |           module.resource.indexOf(
 90 |             path.join(__dirname, '../node_modules')
 91 |           ) === 0
 92 |         )
 93 |       }
 94 |     }),
 95 |     // extract webpack runtime and module manifest to its own file in order to
 96 |     // prevent vendor hash from being updated whenever app bundle is updated
 97 |     new webpack.optimize.CommonsChunkPlugin({
 98 |       name: 'manifest',
 99 |       minChunks: Infinity
100 |     }),
101 |     // This instance extracts shared chunks from code splitted chunks and bundles them
102 |     // in a separate chunk, similar to the vendor chunk
103 |     // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
104 |     new webpack.optimize.CommonsChunkPlugin({
105 |       name: 'app',
106 |       async: 'vendor-async',
107 |       children: true,
108 |       minChunks: 3
109 |     }),
110 | 
111 |     // copy custom static assets
112 |     new CopyWebpackPlugin([
113 |       {
114 |         from: path.resolve(__dirname, '../static'),
115 |         to: config.build.assetsSubDirectory,
116 |         ignore: ['.*']
117 |       }
118 |     ])
119 |   ]
120 | })
121 | 
122 | if (config.build.productionGzip) {
123 |   const CompressionWebpackPlugin = require('compression-webpack-plugin')
124 | 
125 |   webpackConfig.plugins.push(
126 |     new CompressionWebpackPlugin({
127 |       asset: '[path].gz[query]',
128 |       algorithm: 'gzip',
129 |       test: new RegExp(
130 |         '\\.(' +
131 |         config.build.productionGzipExtensions.join('|') +
132 |         ')$'
133 |       ),
134 |       threshold: 10240,
135 |       minRatio: 0.8
136 |     })
137 |   )
138 | }
139 | 
140 | if (config.build.bundleAnalyzerReport) {
141 |   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
142 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
143 | }
144 | 
145 | module.exports = webpackConfig
146 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 |     
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: '/',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>vue-webpack-demo</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-webpack-demo",
 3 |   "version": "1.0.0",
 4 |   "description": "webpack-babel",
 5 |   "author": "wg-d <wonderdream.dev@outlook.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "axios": "^0.21.1",
14 |     "bootstrap": "^5.0.2",
15 |     "fake-git-history": "^1.7.0",
16 |     "vue": "^2.5.2",
17 |     "vue-carousel": "^0.18.0",
18 |     "vue-router": "^3.5.2"
19 |   },
20 |   "devDependencies": {
21 |     "autoprefixer": "^7.1.2",
22 |     "babel-core": "^6.22.1",
23 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
24 |     "babel-loader": "^7.1.1",
25 |     "babel-plugin-syntax-jsx": "^6.18.0",
26 |     "babel-plugin-transform-runtime": "^6.22.0",
27 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
28 |     "babel-preset-env": "^1.3.2",
29 |     "babel-preset-stage-2": "^6.22.0",
30 |     "chalk": "^2.0.1",
31 |     "copy-webpack-plugin": "^4.0.1",
32 |     "css-loader": "^0.28.0",
33 |     "extract-text-webpack-plugin": "^3.0.0",
34 |     "file-loader": "^1.1.4",
35 |     "friendly-errors-webpack-plugin": "^1.6.1",
36 |     "html-webpack-plugin": "^2.30.1",
37 |     "node-notifier": "^5.1.2",
38 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
39 |     "ora": "^1.2.0",
40 |     "portfinder": "^1.0.13",
41 |     "postcss-import": "^11.0.0",
42 |     "postcss-loader": "^2.0.8",
43 |     "postcss-url": "^7.2.1",
44 |     "rimraf": "^2.6.0",
45 |     "semver": "^5.3.0",
46 |     "shelljs": "^0.7.6",
47 |     "uglifyjs-webpack-plugin": "^1.1.1",
48 |     "url-loader": "^0.5.8",
49 |     "vue-loader": "^13.3.0",
50 |     "vue-style-loader": "^3.0.1",
51 |     "vue-template-compiler": "^2.5.2",
52 |     "webpack": "^3.6.0",
53 |     "webpack-bundle-analyzer": "^2.9.0",
54 |     "webpack-dev-server": "^2.9.1",
55 |     "webpack-merge": "^4.1.0"
56 |   },
57 |   "engines": {
58 |     "node": ">= 6.0.0",
59 |     "npm": ">= 3.0.0"
60 |   },
61 |   "browserslist": [
62 |     "> 1%",
63 |     "last 2 versions",
64 |     "not ie <= 8"
65 |   ]
66 | }
67 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <Header></Header>
 4 |     <router-view></router-view>
 5 |     <Footer></Footer>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import HelloWorld from './components/HelloWorld'
11 | import PostsExample from './components/Posts.vue'
12 | import Contact from './components/Contact.vue'
13 | import Footer from './components/Footer.vue'
14 | import Header from './components/Header.vue'
15 | import Login from './components/Login.vue'
16 | import Signup from './components/Signup.vue'
17 | import Blog from './components/Blog.vue'
18 | 
19 | export default {
20 |   name: 'App',
21 |   components: {
22 |     HelloWorld,
23 |     PostsExample,
24 |     Contact,
25 |     Header,
26 |     Footer,
27 |     Login,
28 |     Signup,
29 |     Blog
30 |   }
31 | }
32 | </script>
33 | 
34 | <style>
35 | @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
36 | 
37 | #app {
38 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
39 |   -webkit-font-smoothing: antialiased;
40 |   -moz-osx-font-smoothing: grayscale;
41 |   text-align: center;
42 |   color: #2c3e50;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/src/assets/account1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/account1.png


--------------------------------------------------------------------------------
/src/assets/account2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/account2.png


--------------------------------------------------------------------------------
/src/assets/background-img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/background-img.jpg


--------------------------------------------------------------------------------
/src/assets/c2c1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/c2c1.png


--------------------------------------------------------------------------------
/src/assets/c2c2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/c2c2.png


--------------------------------------------------------------------------------
/src/assets/carousel-img-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/carousel-img-1.png


--------------------------------------------------------------------------------
/src/assets/carousel-img-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/carousel-img-2.jpg


--------------------------------------------------------------------------------
/src/assets/carousel-img-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/carousel-img-3.png


--------------------------------------------------------------------------------
/src/assets/carousel-img-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/carousel-img-4.jpg


--------------------------------------------------------------------------------
/src/assets/carousel-img-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/carousel-img-5.jpg


--------------------------------------------------------------------------------
/src/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/favicon.png


--------------------------------------------------------------------------------
/src/assets/home_page1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/home_page1.png


--------------------------------------------------------------------------------
/src/assets/home_page2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/home_page2.png


--------------------------------------------------------------------------------
/src/assets/icons8-lock.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/icons8-lock.gif


--------------------------------------------------------------------------------
/src/assets/il_1140xN.1843166742_4mb8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/il_1140xN.1843166742_4mb8.jpg


--------------------------------------------------------------------------------
/src/assets/il_1140xN.1848418604_1z6y.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/il_1140xN.1848418604_1z6y.jpg


--------------------------------------------------------------------------------
/src/assets/il_1140xN.1874177413_e9fj.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/il_1140xN.1874177413_e9fj.jpg


--------------------------------------------------------------------------------
/src/assets/information1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/information1.png


--------------------------------------------------------------------------------
/src/assets/information2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/information2.png


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/transaction1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/transaction1.png


--------------------------------------------------------------------------------
/src/assets/transaction2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/src/assets/transaction2.png


--------------------------------------------------------------------------------
/src/components/Blog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div style="text-align:center">
  4 |         <h2>Welcome to my blog!</h2>
  5 |         <p>Take a loot at around, it's new everyday!</p>
  6 |         </div>
  7 | 
  8 |         <!-- The App Section -->
  9 |         <div class="container">
 10 |         <div class="row">
 11 |             <div class="column-66">
 12 |                 <h1 class="xlarge-font"><b>Coding!</b></h1>
 13 |                 <h1 class="large-font" style="color:MediumSeaGreen;"><b>Why do it?</b></h1>
 14 |                 <p><span style="font-size:36px">It means life of computer-generation.</span> You should buy this app because lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 15 |                 <button class="button">Read More</button>
 16 |             </div>
 17 |             <div class="column-33">
 18 |                 <img src="../assets/carousel-img-1.png" width="335" height="471"/>
 19 |             </div>
 20 |         </div>
 21 |         </div>
 22 | 
 23 |         <!-- Clarity Section -->
 24 |         <div class="container" style="background-color:#f1f1f1">
 25 |         <div class="row">
 26 |             <div class="column-33">
 27 |                 <img src="../assets/carousel-img-2.jpg" width="335" height="471"/>
 28 |             </div>
 29 |             <div class="column-66">
 30 |                 <h1 class="xlarge-font"><b>Reading books</b></h1>
 31 |                 <h1 class="large-font" style="color:red;"><b>Books to read?</b></h1>
 32 |                 <p><span style="font-size:24px">Find books most relevant to you, your life and occupation!</span> Sharp and clear photos with the world's best photo engine, incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquipex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
 33 |                 <button class="button" style="background-color:red">Read More</button>
 34 |             </div>
 35 |         </div>
 36 |         </div>
 37 | 
 38 |         <!-- The App Section -->
 39 |         <div class="container">
 40 |         <div class="row">
 41 |             <div class="column-66">
 42 |                 <h1 class="xlarge-font"><b>Build Career!</b></h1>
 43 |                 <h1 class="large-font" style="color:MediumSeaGreen;"><b>Practice constantly!</b></h1>
 44 |                 <p><span style="font-size:36px">Enjoy looking improved code.</span> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
 45 |                 <button class="button">Read More</button>
 46 |             </div>
 47 |             <div class="column-33">
 48 |                 <img src="../assets/carousel-img-3.png" width="335" height="471"/>
 49 |             </div>
 50 |         </div>
 51 |         </div>
 52 |     </div>
 53 | </template>
 54 | 
 55 | <style scoped>
 56 |     * {
 57 |         box-sizing:border-box;
 58 |     }
 59 | 
 60 |     body {
 61 |         margin: 0;
 62 |         font-family: Arial, Helvetica, sans-serif;
 63 |     }
 64 | 
 65 |     .container {
 66 |         padding: 64px;
 67 |     }
 68 | 
 69 |     .row:after {
 70 |         content: "";
 71 |         display: table;
 72 |         clear: both
 73 |     }
 74 | 
 75 |     .column-66 {
 76 |         float: left;
 77 |         width: 66.66666%;
 78 |         padding: 20px;
 79 |     }
 80 | 
 81 |     .column-33 {
 82 |         float: left;
 83 |         width: 33.33333%;
 84 |         padding: 20px;
 85 |     }
 86 | 
 87 |     .large-font {
 88 |         font-size: 48px;
 89 |     }
 90 | 
 91 |     .xlarge-font {
 92 |         font-size: 64px
 93 |     }
 94 | 
 95 |     .button {
 96 |         border: none;
 97 |         color: white;
 98 |         padding: 14px 28px;
 99 |         font-size: 16px;
100 |         cursor: pointer;
101 |         background-color: #04AA6D;
102 |     }
103 | 
104 |     img {
105 |         display: block;
106 |         height: auto;
107 |         max-width: 100%;
108 |     }
109 | 
110 |     @media screen and (max-width: 1000px) {
111 |         .column-66,
112 |         .column-33 {
113 |             width: 100%;
114 |             text-align: center;
115 |         }
116 |         img {
117 |             margin: auto;
118 |         }
119 |     }
120 | </style>


--------------------------------------------------------------------------------
/src/components/BlogCreate.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="createImage d-flex align-center ">
 3 |         <v-container>
 4 |                 <v-form >
 5 |                   <v-sheet color="rgb(248 246 245 / 5%)" outlined>
 6 |                     <h2 class="text-center text-h2 yellow--text my-5">Blog Create</h2>
 7 |                     <v-row class="pa-5">
 8 |                         <v-col 
 9 |                         cols="12"
10 |                         lg="6"
11 |                         md="6">
12 |                             <v-content >
13 |                                 <v-container fluid>
14 |                                     <v-flex xs12 class="text-xs-center text-sm-center text-md-center text-lg-center">
15 |                                     <img :src="imageUrl" height="200" v-if="imageUrl"/>
16 |                                     <v-text-field label="Select Image" @click='pickFile' v-model='imageName' prepend-icon="mdi-camera" dark></v-text-field>
17 |                                     <input
18 |                                         type="file"
19 |                                         style="display: none"
20 |                                         ref="image"
21 |                                         accept="image/*"
22 |                                         dark
23 |                                         @change="onFilePicked"
24 |                                     >
25 |                                     </v-flex>
26 |                                 </v-container>
27 |                             </v-content>
28 |                         </v-col>
29 |                         <v-col 
30 |                         cols="12" 
31 |                         lg="5" 
32 |                         md="5">
33 |                             <v-text-field
34 |                             dark
35 |                             outlined
36 |                             filled
37 |                             label="Blog title"
38 |                             v-model="blog.title"
39 |                             ></v-text-field>
40 |                             <v-textarea
41 |                             dark
42 |                             outlined
43 |                             rounded-xl
44 |                             label="Blog text"
45 |                             color="white"
46 |                             v-model="blog.text"
47 |                             ></v-textarea>
48 |                             <v-btn 
49 |                             @click.prevent="createBlog"
50 |                             >Save</v-btn>
51 |                         </v-col>
52 |                     </v-row>
53 |                     </v-sheet>
54 |                 </v-form>
55 |         </v-container>
56 |     </div>
57 | </template>


--------------------------------------------------------------------------------
/src/components/Contact.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <div>
3 |         <p>Contact works.</p>
4 |         <hello-world></hello-world>
5 |     </div>
6 | </template>


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <footer class="text-center text-lg-start bg-light text-muted">
  3 |     <!-- Section: Social media -->
  4 |     <section
  5 |         class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom"
  6 |     >
  7 |         <!-- Left -->
  8 |         <div class="me-5 d-none d-lg-block">
  9 |         <span>Get connected with us on social networks:</span>
 10 |         </div>
 11 |         <!-- Left -->
 12 | 
 13 |         <!-- Right -->
 14 |         <div>
 15 |         <a href="" class="me-4 text-reset">
 16 |             <i class="fab fa-facebook-f"></i>
 17 |         </a>
 18 |         <a href="" class="me-4 text-reset">
 19 |             <i class="fab fa-twitter"></i>
 20 |         </a>
 21 |         <a href="" class="me-4 text-reset">
 22 |             <i class="fab fa-google"></i>
 23 |         </a>
 24 |         <a href="" class="me-4 text-reset">
 25 |             <i class="fab fa-instagram"></i>
 26 |         </a>
 27 |         <a href="" class="me-4 text-reset">
 28 |             <i class="fab fa-linkedin"></i>
 29 |         </a>
 30 |         <a href="" class="me-4 text-reset">
 31 |             <i class="fab fa-github"></i>
 32 |         </a>
 33 |         </div>
 34 |         <!-- Right -->
 35 |     </section>
 36 |     <!-- Section: Social media -->
 37 | 
 38 |     <!-- Section: Links  -->
 39 |     <section class="">
 40 |         <div class="container text-center text-md-start mt-5">
 41 |         <!-- Grid row -->
 42 |         <div class="row mt-3">
 43 |             <!-- Grid column -->
 44 |             <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
 45 |             <!-- Content -->
 46 |             <h6 class="text-uppercase fw-bold mb-4">
 47 |                 <i class="fas fa-gem me-3"></i>Company name
 48 |             </h6>
 49 |             <p>
 50 |                 Here you can use rows and columns to organize your footer content. Lorem ipsum
 51 |                 dolor sit amet, consectetur adipisicing elit.
 52 |             </p>
 53 |             </div>
 54 |             <!-- Grid column -->
 55 | 
 56 |             <!-- Grid column -->
 57 |             <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
 58 |             <!-- Links -->
 59 |             <h6 class="text-uppercase fw-bold mb-4">
 60 |                 Products
 61 |             </h6>
 62 |             <p>
 63 |                 <a href="#!" class="text-reset">Angular</a>
 64 |             </p>
 65 |             <p>
 66 |                 <a href="#!" class="text-reset">React</a>
 67 |             </p>
 68 |             <p>
 69 |                 <a href="#!" class="text-reset">Vue</a>
 70 |             </p>
 71 |             <p>
 72 |                 <a href="#!" class="text-reset">Laravel</a>
 73 |             </p>
 74 |             </div>
 75 |             <!-- Grid column -->
 76 | 
 77 |             <!-- Grid column -->
 78 |             <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
 79 |             <!-- Links -->
 80 |             <h6 class="text-uppercase fw-bold mb-4">
 81 |                 Useful links
 82 |             </h6>
 83 |             <p>
 84 |                 <a href="#!" class="text-reset">Pricing</a>
 85 |             </p>
 86 |             <p>
 87 |                 <a href="#!" class="text-reset">Settings</a>
 88 |             </p>
 89 |             <p>
 90 |                 <a href="#!" class="text-reset">Orders</a>
 91 |             </p>
 92 |             <p>
 93 |                 <a href="#!" class="text-reset">Help</a>
 94 |             </p>
 95 |             </div>
 96 |             <!-- Grid column -->
 97 | 
 98 |             <!-- Grid column -->
 99 |             <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
100 |             <!-- Links -->
101 |             <h6 class="text-uppercase fw-bold mb-4">
102 |                 Contact
103 |             </h6>
104 |             <p><i class="fas fa-home me-3"></i> New York, NY 10012, US</p>
105 |             <p>
106 |                 <i class="fas fa-envelope me-3"></i>
107 |                 info@example.com
108 |             </p>
109 |             <p><i class="fas fa-phone me-3"></i> + 01 234 567 88</p>
110 |             <p><i class="fas fa-print me-3"></i> + 01 234 567 89</p>
111 |             </div>
112 |             <!-- Grid column -->
113 |         </div>
114 |         <!-- Grid row -->
115 |         </div>
116 |     </section>
117 |     <!-- Section: Links  -->
118 | 
119 |     <!-- Copyright -->
120 |     <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
121 |         © 2021 Copyright:
122 |         <a class="text-reset fw-bold" href="#">myblog@info.com</a>
123 |     </div>
124 |     <!-- Copyright -->
125 |     </footer>
126 | </template>
127 | 
128 | <script>
129 | export default {
130 |     setup() {
131 |         
132 |     },
133 |     name: 'Footer'
134 | 
135 | }
136 | </script>
137 | <style scoped>
138 | 
139 | </style>


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <nav class="navbar navbar-expand-lg text-white bg-primary d-flex justify-content-between px-4">
 3 |         <router-link class="nav-link text-white" :to='"/"'><a class="navbar-brand text-white">Blog Site</a></router-link>
 4 |         <div class="" id="navbarSupportedContent">
 5 |             <ul class="navbar-nav mr-auto">
 6 |                 <li class="nav-item">
 7 |                     <router-link class="nav-link text-white" :to='"/"'>Home</router-link>
 8 |                 </li>
 9 |                 <li class="nav-item">
10 |                     <router-link class="nav-link text-white" :to='"/blog"'>Blog</router-link>
11 |                 </li>
12 |                 <li class="nav-item">
13 |                     <router-link class="nav-link text-white" :to='"/contact"'>Post</router-link>
14 |                 </li>
15 |                 <li class="nav-item">
16 |                     <router-link class="nav-link text-white" :to='"/contact"'>My Account</router-link>
17 |                 </li>
18 |                 <li class="nav-item">
19 |                     <router-link class="nav-link text-white" :to='"/login"'>Login</router-link>
20 |                 </li>
21 |             </ul>
22 |         </div>
23 |     </nav>
24 | </template>
25 | <script>
26 | export default {
27 |     setup() {
28 |         
29 |     },
30 |     name: 'Header'
31 | 
32 | }
33 | </script>


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <h1>{{ msg }}</h1>
  4 |     <h2>Essential Links</h2>
  5 |     <ul>
  6 |       <li>
  7 |         <a
  8 |           href="https://vuejs.org"
  9 |           target="_blank"
 10 |         >
 11 |           Core Docs
 12 |         </a>
 13 |       </li>
 14 |       <li>
 15 |         <a
 16 |           href="https://forum.vuejs.org"
 17 |           target="_blank"
 18 |         >
 19 |           Forum
 20 |         </a>
 21 |       </li>
 22 |       <li>
 23 |         <a
 24 |           href="https://chat.vuejs.org"
 25 |           target="_blank"
 26 |         >
 27 |           Community Chat
 28 |         </a>
 29 |       </li>
 30 |       <li>
 31 |         <a
 32 |           href="https://twitter.com/vuejs"
 33 |           target="_blank"
 34 |         >
 35 |           Twitter
 36 |         </a>
 37 |       </li>
 38 |       <br>
 39 |       <li>
 40 |         <a
 41 |           href="http://vuejs-templates.github.io/webpack/"
 42 |           target="_blank"
 43 |         >
 44 |           Docs for This Template
 45 |         </a>
 46 |       </li>
 47 |     </ul>
 48 |     <h2>Ecosystem</h2>
 49 |     <ul>
 50 |       <li>
 51 |         <a
 52 |           href="http://router.vuejs.org/"
 53 |           target="_blank"
 54 |         >
 55 |           vue-router
 56 |         </a>
 57 |       </li>
 58 |       <li>
 59 |         <a
 60 |           href="http://vuex.vuejs.org/"
 61 |           target="_blank"
 62 |         >
 63 |           vuex
 64 |         </a>
 65 |       </li>
 66 |       <li>
 67 |         <a
 68 |           href="http://vue-loader.vuejs.org/"
 69 |           target="_blank"
 70 |         >
 71 |           vue-loader
 72 |         </a>
 73 |       </li>
 74 |       <li>
 75 |         <a
 76 |           href="https://github.com/vuejs/awesome-vue"
 77 |           target="_blank"
 78 |         >
 79 |           awesome-vue
 80 |         </a>
 81 |       </li>
 82 |     </ul>
 83 |   </div>
 84 | </template>
 85 | 
 86 | <script>
 87 | export default {
 88 |   name: 'HelloWorld',
 89 |   data () {
 90 |     return {
 91 |       msg: 'Welcome to Your Vue.js App'
 92 |     }
 93 |   }
 94 | }
 95 | </script>
 96 | 
 97 | <!-- Add "scoped" attribute to limit CSS to this component only -->
 98 | <style scoped>
 99 | h1, h2 {
100 |   font-weight: normal;
101 | }
102 | ul {
103 |   list-style-type: none;
104 |   padding: 0;
105 | }
106 | li {
107 |   display: inline-block;
108 |   margin: 0 10px;
109 | }
110 | a {
111 |   color: #42b983;
112 | }
113 | </style>
114 | 


--------------------------------------------------------------------------------
/src/components/Login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <form action="" method="post">
 3 |     <div class="imgcontainer">
 4 |          <img src="../assets/carousel-img-3.png" width="100" height="80"/>
 5 |     </div>
 6 |     <div class="container">
 7 |         <label for="uname"><b>Username</b></label>
 8 |         <input type="text" placeholder="Enter Username" name="uname" required>
 9 |         <label for="psw"><b>Password</b></label>
10 |         <input type="password" placeholder="Enter Password" name="psw" required>
11 |         <button type="submit">Login</button>
12 |         <label>
13 |         <input type="checkbox" checked="checked" name="remember"> Remember me
14 |         </label>
15 |         <router-link class="nav-link text-white" :to='"/signup"'>
16 |             <button>Register</button>
17 |         </router-link>
18 |     </div>
19 |     <div class="container" style="background-color:#f1f1f1">
20 |         <button type="button" class="cancelbtn">Cancel</button>
21 |         <span class="psw">Forgot <a href="#">password?</a></span>
22 |     </div>
23 |     </form>
24 | </template>
25 | <style scoped>
26 |     /* Bordered form */
27 |     form {
28 |     border: 3px solid #f1f1f1;
29 |     }
30 | 
31 |     /* Full-width inputs */
32 |     input[type=text], input[type=password] {
33 |         width: 100%;
34 |         padding: 12px 20px;
35 |         margin: 8px 0;
36 |         display: inline-block;
37 |         border: 1px solid #ccc;
38 |         box-sizing: border-box;
39 |     }
40 | 
41 |     /* Set a style for all buttons */
42 |     button {
43 |         background-color: #04AA6D;
44 |         color: white;
45 |         padding: 14px 20px;
46 |         margin: 8px 0;
47 |         border: none;
48 |         cursor: pointer;
49 |         width: 100%;
50 |     }
51 | 
52 |     /* Add a hover effect for buttons */
53 |     button:hover {
54 |         opacity: 0.8;
55 |     }
56 | 
57 |     /* Extra style for the cancel button (red) */
58 |     .cancelbtn {
59 |         width: auto;
60 |         padding: 10px 18px;
61 |         background-color: #f44336;
62 |     }
63 | 
64 |     /* Center the avatar image inside this container */
65 |     .imgcontainer {
66 |         text-align: center;
67 |         margin: 24px 0 12px 0;
68 |     }
69 | 
70 |     /* Avatar image */
71 |     img.avatar {
72 |         width: 40%;
73 |         border-radius: 50%;
74 |     }
75 | 
76 |     /* Add padding to containers */
77 |     .container {
78 |         padding: 16px;
79 |     }
80 | 
81 |     /* The "Forgot password" text */
82 |     span.psw {
83 |         float: right;
84 |         padding-top: 16px;
85 |     }
86 | 
87 |     /* Change styles for span and cancel button on extra small screens */
88 |     @media screen and (max-width: 300px) {
89 |         span.psw {
90 |             display: block;
91 |             float: none;
92 |         }
93 |         .cancelbtn {
94 |             width: 100%;
95 |         }
96 |     }
97 | </style>


--------------------------------------------------------------------------------
/src/components/Posts.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="d-flex justify-content-center">
 3 |         <carousel class="w-100">
 4 |             <slide class="carousel__item">
 5 |                 <h1>Slider1</h1>
 6 |                 <img src="../assets/carousel-img-1.png" />
 7 |                 <i>I do love coding.</i>
 8 |             </slide>
 9 |             <slide class="carousel__item">
10 |                 <h1>Slider2</h1>
11 |                 <img src="../assets/carousel-img-2.jpg" />
12 |                 <i>I do love coding.</i>
13 |             </slide>
14 |             <slide class="carousel__item">
15 |                 <h1>Slider3</h1>
16 |                 <img src="../assets/carousel-img-3.png" />
17 |                 <i>I do love coding.</i>
18 |             </slide>
19 |             <slide class="carousel__item">
20 |                 <h1>Slider4</h1>
21 |                 <img src="../assets/carousel-img-4.jpg" />
22 |                 <i>I do love coding.</i>
23 |             </slide>
24 |             <slide class="carousel__item">
25 |                 <h1>Slider5</h1>
26 |                 <img src="../assets/carousel-img-5.jpg" />
27 |                 <i>I do love coding.</i>
28 |             </slide>
29 |         </carousel>
30 |     </div>
31 | </template>
32 | 
33 | <script>
34 | 
35 |     import axios from 'axios'
36 |     import { Carousel, Slide } from 'vue-carousel'
37 | 
38 |     export default({
39 |     name: 'PostsExample',
40 |     data() {
41 |         return {
42 |             posts: [],
43 |         }
44 |         },
45 |         created() {
46 |             axios.get('https://jsonplaceholder.typicode.com/posts').then( posts => {
47 |                 this.posts = posts.data;
48 |             })
49 |         },
50 |         components:{
51 |         Carousel,
52 |         Slide
53 |     }
54 |     })
55 | </script>
56 | <style scoped>
57 |     .carousel__item {
58 |         width: 200px !important;
59 |         padding:20px;
60 |         margin: 20px;
61 |         box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
62 |         display: flex;
63 |         flex-direction: column;
64 |         justify-content: space-between;
65 |     }
66 |     .carousel__item>img{
67 |         width: 100%;
68 |     }
69 |     .carousel__item>i{
70 |         vertical-align: bottom;
71 |     }
72 | </style>


--------------------------------------------------------------------------------
/src/components/Signup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <form action="" style="border:1px solid #ccc">
 3 |         <div class="container">
 4 |             <h1>Sign Up</h1>
 5 |             <p>Please fill in this form to create an account.</p>
 6 |             <hr>
 7 | 
 8 |             <label for="email"><b>Email</b></label>
 9 |             <input type="text" placeholder="Enter Email" name="email" required>
10 | 
11 |             <label for="psw"><b>Password</b></label>
12 |             <input type="password" placeholder="Enter Password" name="psw" required>
13 | 
14 |             <label for="psw-repeat"><b>Repeat Password</b></label>
15 |             <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
16 | 
17 |             <label>
18 |             <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
19 |             </label>
20 | 
21 |             <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>
22 | 
23 |             <div class="clearfix">
24 |             <button type="button" class="cancelbtn">Cancel</button>
25 |             <button type="submit" class="signupbtn">Sign Up</button>
26 |             </div>
27 |         </div>
28 |     </form>
29 | </template>
30 | <style scoped>
31 |     * {box-sizing: border-box}
32 | 
33 |     /* Full-width input fields */
34 |     input[type=text], input[type=password] {
35 |         width: 100%;
36 |         padding: 15px;
37 |         margin: 5px 0 22px 0;
38 |         display: inline-block;
39 |         border: none;
40 |         background: #f1f1f1;
41 |     }
42 | 
43 |     input[type=text]:focus, input[type=password]:focus {
44 |         background-color: #ddd;
45 |         outline: none;
46 |     }
47 | 
48 |     hr {
49 |         border: 1px solid #f1f1f1;
50 |         margin-bottom: 25px;
51 |     }
52 | 
53 |     /* Set a style for all buttons */
54 |     button {
55 |         background-color: #04AA6D;
56 |         color: white;
57 |         padding: 14px 20px;
58 |         margin: 8px 0;
59 |         border: none;
60 |         cursor: pointer;
61 |         width: 100%;
62 |         opacity: 0.9;
63 |     }
64 | 
65 |     button:hover {
66 |         opacity:1;
67 |     }
68 | 
69 |     /* Extra styles for the cancel button */
70 |     .cancelbtn {
71 |         padding: 14px 20px;
72 |         background-color: #f44336;
73 |     }
74 | 
75 |     /* Float cancel and signup buttons and add an equal width */
76 |     .cancelbtn, .signupbtn {
77 |         float: left;
78 |         width: 50%;
79 |     }
80 | 
81 |     /* Add padding to container elements */
82 |     .container {
83 |         padding: 16px;
84 |     }
85 | 
86 |     /* Clear floats */
87 |     .clearfix::after {
88 |         content: "";
89 |         clear: both;
90 |         display: table;
91 |     }
92 | 
93 |     /* Change styles for cancel button and signup button on extra small screens */
94 |     @media screen and (max-width: 300px) {
95 |         .cancelbtn, .signupbtn {
96 |             width: 100%;
97 |         }
98 |     }
99 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import VueRouter from 'vue-router'
 6 | import Posts from './components/Posts.vue'
 7 | import Contact from './components/Contact.vue'
 8 | import HelloWorld from './components/HelloWorld.vue'
 9 | import VueCarousel from 'vue-carousel';
10 | import Login from './components/Login.vue';
11 | import Signup from './components/Signup.vue';
12 | import Blog from './components/Blog.vue';
13 | 
14 | Vue.config.productionTip = false;
15 | Vue.use(VueCarousel);
16 | Vue.use(VueRouter);
17 | 
18 | const routes = [
19 |   {
20 |     path:'/', component: Posts,
21 |   },
22 |   {
23 |     path:'/contact', component: Contact,
24 |   },
25 |   {
26 |     path:'/dashboard', component: HelloWorld,
27 |   },
28 |   {
29 |     path:'/login', component: Login,
30 |   },
31 |   {
32 |     path:'/signup', component: Signup,
33 |   },
34 |   {
35 |     path:'/blog', component: Blog,
36 |   }
37 | ]
38 | /* eslint-disable no-new */
39 | const router = new VueRouter({ routes: routes })
40 | 
41 | 
42 | new Vue({
43 |   el: '#app',
44 |   router: router, 
45 |   components: { App },
46 |   template: '<App/>'
47 | })
48 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wg-d/vue-webpack-demo/a0da68d01d8197ec5637acf3f995fc9cce26e070/static/.gitkeep


--------------------------------------------------------------------------------