Skip to content

Commit

Permalink
start
Browse files Browse the repository at this point in the history
  • Loading branch information
TehZarathustra committed Jan 22, 2018
0 parents commit 81d264f
Show file tree
Hide file tree
Showing 12 changed files with 262 additions and 0 deletions.
21 changes: 21 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# editorconfig.org

root = true

[*]
charset = utf-8
indent_size = 4
indent_style = tab
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.sass]
indent_size = 2
indent_style = space

[*.json]
indent_size = 2
indent_style = space
6 changes: 6 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
node_modules
.sass-cache
.DS_Store
dist
yarn.lock
npm-debug.log
18 changes: 18 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Clean project-stub

- Boilerplate HTML sctructure
- Components
- Dev server
- Hot Module Replacement
- Sass
- Postcss
- ES2015

Requires Yarn

# Quick start
```
git clone https://github.com/TehZarathustra/boilerplate-webpack.git && cd boilerplate-webpack
yarn install
npm run start
```
38 changes: 38 additions & 0 deletions app/components/home/home.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<template>
<div class="home">
<img v-bind:src='logoImg'>
<h1>{{greeting}}</h1>
<button v-on:click='start'>does it work?</button>
</div>
</template>

<script>
import logo from '../../outdated-browser.png'
export default {
data () {
return {
user: this.$store.getters.user || 'someone',
logoImg: logo
}
},
computed: {
greeting () {
return `Hello, ${this.user}!`;
}
},
methods: {
start () {
alert('it does');
}
}
}
</script>

<style scoped lang="sass">
.home
padding: 30px
background: lightblue
width: 800px
margin: 20px auto
text-align: center
</style>
Binary file added app/favicon.ico
Binary file not shown.
22 changes: 22 additions & 0 deletions app/index.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--[if lt IE 8]>
<div class="browserupgrade">
<p><strong>YOUR BROWSER IS FROM ANOTHER ERA</strong></p>
<p>he's witnessed asteroid that wiped out dinosaurs<br/>he's so ancient that he can barely render your page</p>
<p>Please,<a href="http://browsehappy.com/">update it</a></p>
</div>
<![endif]-->
<div id="app">
<router-view></router-view>
</div>
</body>
</html>
10 changes: 10 additions & 0 deletions app/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import 'normalize.css';
import Vue from 'vue';
import router from './routes';
import {store} from './store';

new Vue({
el: '#app',
router,
store
});
Binary file added app/outdated-browser.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions app/routes/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../components/home/home.vue';

const routes = [
{path: '/', component: Home}
];

Vue.use(VueRouter);

export default new VueRouter({routes});
16 changes: 16 additions & 0 deletions app/store/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
state: {
user: 'Rex'
},
getters: {
user (state) {
return state.user;
}
}
});

37 changes: 37 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{
"name": "boilerplate-gulp-sass",
"version": "1.0.0",
"repository": "[email protected]:TehZarathustra/boilerplate-gulp-sass.git",
"author": "v-prusakov <[email protected]>",
"license": "MIT",
"scripts": {
"build": "webpack --config webpack.config.js",
"start": "webpack-dev-server"
},
"devDependencies": {
"autoprefixer": "^7.1.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.5.2",
"css-loader": "^0.28.4",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"node-sass": "^4.5.3",
"postcss-cssnext": "^2.11.0",
"postcss-import": "^10.0.0",
"postcss-loader": "^2.0.6",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"vue-loader": "^12.2.2",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
},
"dependencies": {
"lodash": "^4.17.4",
"normalize.css": "^7.0.0",
"vue": "^2.4.1",
"vue-template-compiler": "^2.4.1",
"vue-router": "^2.7.0",
"vuex": "^3.0.1"
}
}
83 changes: 83 additions & 0 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');

module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
},
plugins: [
new HtmlWebpackPlugin({
title: 'title',
template: './app/index.ejs'
}),

new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),

new webpack.HotModuleReplacementPlugin()
],
devServer: {
hot: true,
contentBase: path.resolve(__dirname, './dist'),
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: 'babel-loader',
scss: 'css!sass'
},
postcss: [require('postcss-cssnext')()],
}
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.(css|sass)$/,
use: [
'style-loader',
{loader: 'css-loader', options: { importLoaders: 1 }},
{loader: 'postcss-loader', options: {
plugins: function (loader) {
return [
require('postcss-import')({ root: loader.resourcePath }),
require('postcss-cssnext')()
]
}
}},
'sass-loader'
]
},
{
test: /\.(png|svg|jpg|gif|ico|mp4)$/,
use: ['file-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}
]
}
};

0 comments on commit 81d264f

Please sign in to comment.