From a99e510d8f2d97ce5106d8005d29710b3023fab0 Mon Sep 17 00:00:00 2001 From: Andreas Rasmussen Date: Mon, 12 Dec 2016 14:23:39 +0100 Subject: [PATCH] Initialized Quasi project --- .babelrc | 5 ++ .gitignore | 4 + README.md | 18 +++++ index.html | 13 ++++ package.json | 32 ++++++++ paths.js | 5 ++ src/App.vue | 25 +++++++ src/assets/page-with-curl.png | Bin 0 -> 18236 bytes src/components/GridBlock.vue | 60 +++++++++++++++ src/components/Header.vue | 41 ++++++++++ src/main.js | 19 +++++ src/routes.js | 7 ++ src/routes/read.vue | 8 ++ src/routes/texts.vue | 14 ++++ src/store/store.js | 8 ++ src/styles/animations.scss | 14 ++++ src/styles/breakpoints.scss | 35 +++++++++ src/styles/global.scss | 60 +++++++++++++++ src/styles/helpers.scss | 137 ++++++++++++++++++++++++++++++++++ src/styles/reset.scss | 48 ++++++++++++ src/styles/vars.scss | 121 ++++++++++++++++++++++++++++++ webpack.config.js | 79 ++++++++++++++++++++ 22 files changed, 753 insertions(+) create mode 100644 .babelrc create mode 100644 .gitignore create mode 100644 README.md create mode 100644 index.html create mode 100644 package.json create mode 100644 paths.js create mode 100644 src/App.vue create mode 100644 src/assets/page-with-curl.png create mode 100644 src/components/GridBlock.vue create mode 100644 src/components/Header.vue create mode 100644 src/main.js create mode 100644 src/routes.js create mode 100644 src/routes/read.vue create mode 100644 src/routes/texts.vue create mode 100644 src/store/store.js create mode 100644 src/styles/animations.scss create mode 100644 src/styles/breakpoints.scss create mode 100644 src/styles/global.scss create mode 100644 src/styles/helpers.scss create mode 100644 src/styles/reset.scss create mode 100644 src/styles/vars.scss create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..9897749 --- /dev/null +++ b/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": [ + ["es2015", { "modules": false }] + ] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..060b35b --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.DS_Store +node_modules/ +dist/ +npm-debug.log diff --git a/README.md b/README.md new file mode 100644 index 0000000..cae970c --- /dev/null +++ b/README.md @@ -0,0 +1,18 @@ +# wishes + +> A Vue.js project + +## 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). diff --git a/index.html b/index.html new file mode 100644 index 0000000..ec303cd --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Quasi + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..ac652b5 --- /dev/null +++ b/package.json @@ -0,0 +1,32 @@ +{ + "name": "quasi", + "description": "Thesis project about academic motivation, IT University of Copenhagen", + "version": "1.0.0", + "author": "Andreas Rasmussen ", + "private": true, + "scripts": { + "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot", + "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" + }, + "dependencies": { + "vue": "^2.1.0", + "vue-router": "^2.1.1", + "vuex": "^2.0.0" + }, + "devDependencies": { + "autoprefixer": "^6.5.3", + "babel-core": "^6.0.0", + "babel-loader": "^6.0.0", + "babel-preset-es2015": "^6.0.0", + "cross-env": "^3.0.0", + "css-loader": "^0.25.0", + "file-loader": "^0.9.0", + "node-sass": "^3.13.0", + "sass-loader": "^4.0.2", + "style-loader": "^0.13.1", + "vue-loader": "^10.0.0", + "vue-template-compiler": "^2.1.0", + "webpack": "^2.1.0-beta.27", + "webpack-dev-server": "^2.1.0-beta.0" + } +} diff --git a/paths.js b/paths.js new file mode 100644 index 0000000..8bc8daf --- /dev/null +++ b/paths.js @@ -0,0 +1,5 @@ +const path = require('path'); + +module.exports = { + sourcePath: path.join(__dirname, 'src'), +}; diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..432c1a5 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/src/assets/page-with-curl.png b/src/assets/page-with-curl.png new file mode 100644 index 0000000000000000000000000000000000000000..ac6f9094763f059c0730eb839a0fefcd61a8a8e1 GIT binary patch literal 18236 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 G2K^s}Fh(l? literal 0 HcmV?d00001 diff --git a/src/components/GridBlock.vue b/src/components/GridBlock.vue new file mode 100644 index 0000000..58b22e4 --- /dev/null +++ b/src/components/GridBlock.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/src/components/Header.vue b/src/components/Header.vue new file mode 100644 index 0000000..690465e --- /dev/null +++ b/src/components/Header.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..50f6e25 --- /dev/null +++ b/src/main.js @@ -0,0 +1,19 @@ +import Vue from 'vue' +import App from './App' + +import { store } from 'store/store' + +import VueRouter from 'vue-router' +import { routes } from './routes' +Vue.use(VueRouter) +const router = new VueRouter({ + routes, + mode: 'history' // Remember to set up the server to ALWAYS serve the index.html file when this history-mode is on (to avoid hashes in the url) +}) + +new Vue({ + el: '#app', + store, + router, + render: h => h(App) +}) diff --git a/src/routes.js b/src/routes.js new file mode 100644 index 0000000..59a53d8 --- /dev/null +++ b/src/routes.js @@ -0,0 +1,7 @@ +import Texts from 'routes/texts' +import Read from 'routes/read' + +export const routes = [ + { path: '/', component: Texts, name: 'texts' }, + { path: '/read/:textId', component: Read, name: 'read' } +] diff --git a/src/routes/read.vue b/src/routes/read.vue new file mode 100644 index 0000000..7ed0881 --- /dev/null +++ b/src/routes/read.vue @@ -0,0 +1,8 @@ + + + + + diff --git a/src/routes/texts.vue b/src/routes/texts.vue new file mode 100644 index 0000000..12248c1 --- /dev/null +++ b/src/routes/texts.vue @@ -0,0 +1,14 @@ + + + + + diff --git a/src/store/store.js b/src/store/store.js new file mode 100644 index 0000000..a7de080 --- /dev/null +++ b/src/store/store.js @@ -0,0 +1,8 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; + +Vue.use(Vuex); + +export const store = new Vuex.Store({ + state: {} +}); diff --git a/src/styles/animations.scss b/src/styles/animations.scss new file mode 100644 index 0000000..b49d6d7 --- /dev/null +++ b/src/styles/animations.scss @@ -0,0 +1,14 @@ +@keyframes fadeIn { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@keyframes fadeOut { + 0% { opacity: 1; } + 100% { opacity: 0; } +} + +@keyframes slideIn { + 0% { transform: translateX(-100vw); } + 100% { transform: translateX(0vw); } +} diff --git a/src/styles/breakpoints.scss b/src/styles/breakpoints.scss new file mode 100644 index 0000000..e82981b --- /dev/null +++ b/src/styles/breakpoints.scss @@ -0,0 +1,35 @@ +@mixin breakpoint($class, $value: false, $min: false) { + + @if $class == 'mobileSmall' { + @media (max-width: 320px) { @content; } + } @else if $class == 'mobileMedium' { + @media (max-width: 400px) { @content; } + } @else if $class == 'mobile' { + @media (max-width: 480px) { @content; } + } @else if $class == 'tabletBelow' { + @media (max-width: 767px) { @content; } + } @else if $class == 'tabletOnly' { + @media (min-width: 481px) and (max-width: 768px) { @content; } + } @else if $class == 'tablet' { + @media (max-width: 768px) { @content; } + } @else if $class == 'tabletAbove' { + @media (min-width: 768px) { @content; } + } @else if $class == 'desktop' { + @media (max-width: 1024px) { @content; } + } @else if $class == 'widescreen' { + @media (min-width: 1025px) { @content; } + } @else if $class == 'extraWidescreen' { + @media (min-width: 1200px) { @content; } + } @else if $class == 'extremeWidescreen' { + @media (min-width: 1600px) { @content; } + } @else if $class == 'custom' { + @if $min == true { + @media (min-width: $value) { @content; } + } @else { + @media (max-width: $value) { @content; } + } + } @else { + @error 'That breakpoint isn\'t available...'; + } + +} diff --git a/src/styles/global.scss b/src/styles/global.scss new file mode 100644 index 0000000..dd98e47 --- /dev/null +++ b/src/styles/global.scss @@ -0,0 +1,60 @@ +@import '~styles/vars'; +@import '~styles/breakpoints'; +@import '~styles/helpers'; + +h1, h2, h3, h4, h5, h6 { + font-family: $fontFamily-headline; + color: $color-brandDark; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +h1, +h2, +h3, +h4 { + font-family: $fontFamily-logo; + letter-spacing: 1px; + line-height: 1.4; } + +h5, +h6 { + font-family: $fontFamily-system; + font-weight: 600; } + +h1 { + font-size: $fontSize-title; + letter-spacing: 2px; + line-height: 1.2; + + @include breakpoint( 'tablet' ) { font-size: $fontSize-xxlarge; } + @include breakpoint( 'mobileMedium' ) { font-size: $fontSize-xlarge; }} + +h2 { + font-size: $fontSize-xxlarge; + @include breakpoint( 'mobile' ) { font-size: $fontSize-xlarge; }} +h3 { font-size: $fontSize-xlarge; } +h4 { font-size: $fontSize-large; } +h5 { font-size: $fontSize-base; } +h6 { font-size: $fontSize-small; } + +p { + font-family: $fontFamily-body; + font-size: $fontSize-base; + line-height: 1.4; + letter-spacing: 0.2px; } + +input { + padding: $scale-1-2; + border: none; + + &::-webkit-input-placeholder { color: $color-brandLight; } /* Chrome/Opera/Safari */ + &::-moz-placeholder { color: $color-brandLight; } /* Firefox 19+ */ + &:-ms-input-placeholder { color: $color-brandLight; } /* IE 10+ */ + &:-moz-placeholder { color: $color-brandLight; } /* Firefox 18- */ +} + +input:focus, +input:active { + outline: none; +} diff --git a/src/styles/helpers.scss b/src/styles/helpers.scss new file mode 100644 index 0000000..152a010 --- /dev/null +++ b/src/styles/helpers.scss @@ -0,0 +1,137 @@ +@import '~styles/vars'; +@import '~styles/animations'; +@import '~styles/breakpoints'; + +$positions: '-top' '-right' '-bottom' '-left' ''; // One left blank for the clean .padding/.margin (all sides) option + +@each $position in $positions { + .padding#{$position}-8-1 { padding#{$position}: $scale-8-1; } + .padding#{$position}-7-1 { padding#{$position}: $scale-7-1; } + .padding#{$position}-6-1 { padding#{$position}: $scale-6-1; } + .padding#{$position}-5-1 { padding#{$position}: $scale-5-1; } + .padding#{$position}-4-1 { padding#{$position}: $scale-4-1; } + .padding#{$position}-3-1 { padding#{$position}: $scale-3-1; } + .padding#{$position}-2-1 { padding#{$position}: $scale-2-1; } + .padding#{$position} { padding#{$position}: $scale; } + .padding#{$position}-1-2 { padding#{$position}: $scale-1-2; } + .padding#{$position}-1-3 { padding#{$position}: $scale-1-3; } + .padding#{$position}-1-4 { padding#{$position}: $scale-1-4; } + .padding#{$position}-1-5 { padding#{$position}: $scale-1-5; } + .padding#{$position}-1-6 { padding#{$position}: $scale-1-6; } + .padding#{$position}-1-7 { padding#{$position}: $scale-1-7; } + .padding#{$position}-1-8 { padding#{$position}: $scale-1-8; }} +.padding-none { padding: 0 !important; } + +@each $position in $positions { + .margin#{$position}-8-1 { margin#{$position}: $scale-8-1; } + .margin#{$position}-7-1 { margin#{$position}: $scale-7-1; } + .margin#{$position}-6-1 { margin#{$position}: $scale-6-1; } + .margin#{$position}-5-1 { margin#{$position}: $scale-5-1; } + .margin#{$position}-4-1 { margin#{$position}: $scale-4-1; } + .margin#{$position}-3-1 { margin#{$position}: $scale-3-1; } + .margin#{$position}-2-1 { margin#{$position}: $scale-2-1; } + .margin#{$position} { margin#{$position}: $scale; } + .margin#{$position}-1-2 { margin#{$position}: $scale-1-2; } + .margin#{$position}-1-3 { margin#{$position}: $scale-1-3; } + .margin#{$position}-1-4 { margin#{$position}: $scale-1-4; } + .margin#{$position}-1-5 { margin#{$position}: $scale-1-5; } + .margin#{$position}-1-6 { margin#{$position}: $scale-1-6; } + .margin#{$position}-1-7 { margin#{$position}: $scale-1-7; } + .margin#{$position}-1-8 { margin#{$position}: $scale-1-8; }} +.margin-none { margin: 0 !important; } + +.font { + &Size { + &-display { font-size: $fontSize-display; + @include breakpoint( 'tablet' ) { font-size: $fontSize-title; } + @include breakpoint( 'mobileMedium' ) { font-size: $fontSize-xxlarge; }} + &-title { font-size: $fontSize-title; + @include breakpoint( 'mobileMedium' ) { font-size: $fontSize-xxlarge; } } + &-xxlarge { font-size: $fontSize-xxlarge; } + &-xlarge { font-size: $fontSize-xlarge; } + &-large { font-size: $fontSize-large; } + &-base { font-size: $fontSize-base; } + &-small { font-size: $fontSize-small; } + &-xsmall { font-size: $fontSize-xsmall; }} + &Weight { + &-thin { font-weight: 100; } + &-normal { font-weight: 400; } + &-bold { font-weight: 600; }} + &Family { + &-logo { font-family: $fontFamily-logo !important; } + &-display { font-family: $fontFamily-display !important; } + &-headline{ font-family: $fontFamily-headline !important; } + &-body { font-family: $fontFamily-body !important; } + &-system { font-family: $fontFamily-system !important; }} +} + +.text { + &Transform { + &-uppercase { text-transform: uppercase; }} + &Align { + &-center { text-align: center; }} +} + +.color { + &-brandFirst { color: $color-brandFirst; } + &-brandSecond { color: $color-brandSecond; } + &-brandDark { color: $color-brandDark; } + &-brandLight { color: $color-brandLight; } +} + +.backgroundColor { + &-brandDark { background-color: $color-brandDark; } + &-brandLight { background-color: $color-brandLight; } + &-white { background-color: #fff; } +} + +.height { + &-full { height: 100vh; }} + +.minHeight { + &-full { min-height: 100vh; }} + +.position { + &-absolute { position: absolute; } + &-relative { position: relative; }} + +.hidden { opacity: 0 !important; } +.shown { opacity: 1 !important; } +.hide { display: none !important; + &-mobile { @include breakpoint( 'mobile' ) { display: none !important; } } } +.show { display: block !important; } + +.float { + &-right { float: right; } + &-left { float: left; }} + +.display { + &-flex { display: flex; }} + +// Flex +.justifyContent { + &-center { justify-content: center; } + &-flexStart { justify-content: flex-start; } + &-flexEnd { justify-content: flex-end; }} + +.alignItems { + &-center { align-items: center; } + &-flexStart { align-items: flex-start; } + &-flexEnd { align-items: flex-end; }} + +.flexDirection { + &-row { flex-direction: row; } + &-column { flex-direction: column; + &-mobile { @include breakpoint( 'mobile' ) { flex-direction: column; } } + } +} + +.flipHorizontal { transform: scaleX(-1); } +.flipVertical { transform: scaleY(-1); } + +// Animation +.fadeIn { animation: fadeIn 1.2s $animationBezier forwards; } +.fadeOut { animation: fadeOut 1.2s $animationBezier forwards; } +.slideIn { animation: slideIn 1.2s $animationBezier forwards; } +.transition { transition: all 0.6s $animationBezier !important; } +.rotateUpsideDown { transform: rotate( 360deg ) !important; } diff --git a/src/styles/reset.scss b/src/styles/reset.scss new file mode 100644 index 0000000..6d87391 --- /dev/null +++ b/src/styles/reset.scss @@ -0,0 +1,48 @@ +// Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video, +input, textarea, select { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; + border-radius: 0; +} + +/* HTML5 display-role reset for older browsers */ + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +html, body { + width: 100%; + height: 100%; +} + +// http://www.paulirish.com/2012/box-sizing-border-box-ftw/ + +html { + box-sizing: border-box; + -webkit-tap-highlight-color: transparent; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} diff --git a/src/styles/vars.scss b/src/styles/vars.scss new file mode 100644 index 0000000..db70aee --- /dev/null +++ b/src/styles/vars.scss @@ -0,0 +1,121 @@ +/* ----- Scale ----- */ + +$scale: 16px; + +$scale-8-1: $scale * 8; +$scale-7-1: $scale * 7; +$scale-6-1: $scale * 6; +$scale-5-1: $scale * 5; +$scale-4-1: $scale * 4; +$scale-3-1: $scale * 3; +$scale-2-1: $scale * 2; + +$scale-1-2: $scale / 2; +$scale-1-3: $scale / 3; +$scale-1-4: $scale / 4; +$scale-1-5: $scale / 5; +$scale-1-6: $scale / 6; +$scale-1-7: $scale / 7; +$scale-1-8: $scale / 8; + +/* ----- Colors ----- */ + +// ----- First +$color-brandFirst: #00A7E1; + +// Main darker +$color-brandFirst-darker-3: darken( $color-brandFirst, 30% ); +$color-brandFirst-darker-2: darken( $color-brandFirst, 20% ); +$color-brandFirst-darker-1: darken( $color-brandFirst, 10% ); + +// Main lighter +$color-brandFirst-lighter-1: lighten( $color-brandFirst, 10% ); +$color-brandFirst-lighter-2: lighten( $color-brandFirst, 20% ); +$color-brandFirst-lighter-3: lighten( $color-brandFirst, 30% ); + +// ----- Second +$color-brandSecond: #FF9E96; + +// Complementary darker +$color-brandSecond-darker-3: darken( $color-brandSecond, 30% ); +$color-brandSecond-darker-2: darken( $color-brandSecond, 20% ); +$color-brandSecond-darker-1: darken( $color-brandSecond, 10% ); + +// Complementary lighter +$color-brandSecond-lighter-1: lighten( $color-brandSecond, 10% ); +$color-brandSecond-lighter-2: lighten( $color-brandSecond, 20% ); +$color-brandSecond-lighter-3: lighten( $color-brandSecond, 30% ); + +// ----- Dark +$color-brandDark: #111; + +// Main darker +$color-brandDark-darker-3: darken( $color-brandDark, 30% ); +$color-brandDark-darker-2: darken( $color-brandDark, 20% ); +$color-brandDark-darker-1: darken( $color-brandDark, 10% ); + +// Main lighter +$color-brandDark-lighter-1: lighten( $color-brandDark, 10% ); +$color-brandDark-lighter-2: lighten( $color-brandDark, 20% ); +$color-brandDark-lighter-3: lighten( $color-brandDark, 30% ); + +// ----- Light +$color-brandLight: #eee; + +// Complementary darker +$color-brandLight-darker-3: darken( $color-brandLight, 30% ); +$color-brandLight-darker-2: darken( $color-brandLight, 20% ); +$color-brandLight-darker-1: darken( $color-brandLight, 10% ); + +// Complementary lighter +$color-brandLight-lighter-1: lighten( $color-brandLight, 10% ); +$color-brandLight-lighter-2: lighten( $color-brandLight, 20% ); +$color-brandLight-lighter-3: lighten( $color-brandLight, 30% ); + +/* ----- Font-family ----- */ + +$fontFamily-logo: 'Avenir', Helvetica, Arial, Verdana, sans-serif; +$fontFamily-display: 'Avenir', Helvetica, Arial, Verdana, sans-serif; +$fontFamily-headline: 'Avenir', Helvetica, Arial, Verdana, sans-serif; +$fontFamily-system: 'Avenir', Helvetica, Arial, Verdana, sans-serif; +$fontFamily-body: Georgia, serif; + +/* ----- Font-size ----- */ + +$fontSize-display: 140px; +$fontSize-display-tablet: 80px; +$fontSize-display-mobile: 60px; + +$fontSize-title: 48px; +$fontSize-subtitle: 28px; +$fontSize-body-copy: 18px; + +$fontSize-xxxlarge: 60px; +$fontSize-xxlarge: 32px; +$fontSize-xlarge: 26px; +$fontSize-large: 20px; +$fontSize-base: 14px; +$fontSize-small: 12px; +$fontSize-xsmall: 11px; +$fontSize-xxsmall: 10px; + +/* ----- Line-height ----- */ + +$lineHeight: 1.3; + +/* ----- Layout ----- */ + +$contentWidth-tablet: 100%; +$contentWidth-desktop: 720px; // 48px up to 768px +$contentWidth-widescreen: 976px; // 48px up to 1024px +$contentWidth-extraWidescreen: 1152px; // 48px up tp 1200px + +/* ----- Border-radius ----- */ + +$borderRadius: 2px; + +/* ----- Animation ----- */ + +$animationBezier: cubic-bezier(0.1, 0.95, 0.65, 1); +$animationBezier-easeOut-extreme: cubic-bezier(0, 0.8, 0.05, 0.95); +$animationSpeed: 250ms; diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..275f6a4 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,79 @@ +var path = require('path') +var webpack = require('webpack') + +module.exports = { + entry: './src/main.js', + output: { + path: path.resolve(__dirname, './dist'), + publicPath: '/dist/', + filename: 'build.js' + }, + module: { + rules: [ + { + test: /\.vue$/, + loader: 'vue-loader', + options: { + loaders: { + sass: 'style-loader!css-loader!sass-loader?indentedSyntax', + scss: 'style-loader!css-loader!sass-loader' + }, + postcss: [require('autoprefixer')()] + } + }, + { + test: /\.js$/, + loader: 'babel-loader', + exclude: /node_modules/ + }, + { + test: /\.(png|jpg|gif|svg)$/, + loader: 'file-loader', + options: { + name: '[name].[ext]?[hash]' + } + }, + { + test: /\.s[a|c]ss$/, + loader: 'style-loader!css-loader!sass-loader' + } + ] + }, + resolve: { + alias: { + 'vue$': 'vue/dist/vue.common.js', + assets: path.resolve(__dirname, 'src/assets'), + components: path.resolve(__dirname, 'src/components'), + routes: path.resolve(__dirname, 'src/routes'), + store: path.resolve(__dirname, 'src/store'), + styles: path.resolve(__dirname, 'src/styles') + }, + extensions: ['.js', '.vue', '.scss'] + }, + devServer: { + historyApiFallback: true, + noInfo: true + }, + 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 + }) + ]) +}