├── .babelrc ├── .eslintrc.json ├── .gitignore ├── LICENSE ├── README.md ├── gulpfile.js ├── index.html ├── index.js ├── package.json ├── src ├── components │ └── app-component │ │ ├── app-component-template.html │ │ ├── app-component.js │ │ └── logo.png └── main.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"] 3 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "commonjs": true, 5 | "es6": true 6 | }, 7 | "extends": "eslint:recommended", 8 | "parserOptions": { 9 | "sourceType": "module" 10 | }, 11 | "rules": { 12 | /*"indent": [ 13 | "error", 14 | "tab" 15 | ],*/ 16 | "linebreak-style": [ 17 | "error", 18 | "unix" 19 | ], 20 | /*"quotes": [ 21 | "error", 22 | "double" 23 | ],*/ 24 | "semi": [ 25 | "error", 26 | "always" 27 | ], 28 | "no-undef": 1, 29 | "no-unused-vars": 1, 30 | "no-console": 1 31 | } 32 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | selenium-debug.log 6 | .idea -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Yamil Llanos 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Prevue # 2 | VueJS app boilerplate for large scale component-based development. Supporting Webpack+Bootstrap+EcmaScript 6 3 | 4 | ## Prerequisites ## 5 | I strongly recommend to globally install eslint, gulp-cli and webpack before cloning this: 6 | 7 | `npm install -g eslint gulp-cli webpack` 8 | 9 | ## Clone this project ## 10 | `git clone https://github.com/yllanos/prevue.git` 11 | 12 | ## Usage ## 13 | 14 | ``` bash 15 | $ cd prevue 16 | $ npm install 17 | $ npm run dev 18 | ``` 19 | 20 | ### Run development server ### 21 | `npm run dev` 22 | 23 | ### Production build ### 24 | `npm run build` 25 | 26 | ## Project structure ## 27 | ``` bash 28 | ├── LICENSE 29 | ├── README.md 30 | ├── gulpfile.js 31 | ├── index.html #Base HTML file 32 | ├── index.js #This is the bundled JS file 33 | ├── package.json #Project, scripts and dependencies config 34 | ├── src #Code goes here 35 | │   ├── components #Components directory 36 | │   │   └── app-component #Sample component dir 37 | │   │   ├── app-component-template.html #Sample component template 38 | │   │   ├── app-component.js #Sample component JavaScript 39 | │   │   └── logo.png #Sample component JavaScript 40 | │   └── main.js #Container JS file 41 | └── webpack.config.js #webpack config file 42 | ``` 43 | 44 | ### `./index.js` 45 | A bundled index.js file will be created on root. This file will be transpiled from EcmaScript 6 components referenced from /src/main.js into EcmaScript 5.1 46 | 47 | 48 | # Have fun! # 49 | Go ahead and create your own components 50 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const babel = require('gulp-babel'); 3 | 4 | gulp.task('default', ['watch']); 5 | 6 | gulp.task('babel', function(){ 7 | return gulp.src('src/*.js') 8 | .pipe(babel({ 9 | presets: ['es2015'], 10 | })) 11 | .pipe(gulp.dest('js/')); 12 | }); 13 | 14 | gulp.task('watch', function(){ 15 | gulp.watch('src/*.js', ['babel']); 16 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Prevue SPA Boilerplate 5 | 6 | 7 | 8 | 9 |
10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "prevue", 3 | "version": "0.1.1", 4 | "description": "A boilerplate for Vue.js component-based SPA development", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --inline --hot", 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/yllanos/prevue.git" 14 | }, 15 | "keywords": [ 16 | "Vue.js", 17 | "SPA", 18 | "boilerplate", 19 | "webpack", 20 | "gulp" 21 | ], 22 | "author": "Yamil Llanos (https://github.com/yllanos)", 23 | "license": "MIT", 24 | "bugs": { 25 | "url": "https://github.com/yllanos/prevue/issues" 26 | }, 27 | "homepage": "https://github.com/yllanos/prevue#readme", 28 | "dependencies": { 29 | "vue": "^1.0.26" 30 | }, 31 | "devDependencies": { 32 | "babel-cli": "^6.11.4", 33 | "babel-core": "^6.13.2", 34 | "babel-loader": "^6.2.4", 35 | "babel-preset-es2015": "^6.13.2", 36 | "gulp": "^3.9.1", 37 | "gulp-babel": "^6.1.2", 38 | "live-server": "^1.0.0", 39 | "raw-loader": "^0.5.1", 40 | "webpack": "^1.13.1", 41 | "webpack-dev-server": "^1.14.1" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/components/app-component/app-component-template.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

4 | Welcome to your Prevue app! 5 |

6 |
7 | 8 | -------------------------------------------------------------------------------- /src/components/app-component/app-component.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import template from './app-component-template.html'; 3 | 4 | const AppComponent = Vue.extend({ 5 | template, 6 | }); 7 | 8 | export default AppComponent; -------------------------------------------------------------------------------- /src/components/app-component/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yllanos/prevue/0ad3bdee139cce16442de579fa8411bcbd421801/src/components/app-component/logo.png -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import AppComponent from './components/app-component/app-component'; 3 | 4 | new Vue({ 5 | el: '#app', 6 | components: { 7 | 'vue-app': AppComponent 8 | } 9 | }); -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './src/main', 3 | output: { 4 | filename: 'index.js' 5 | }, 6 | module: { 7 | loaders: [{ 8 | test: /\.js$/, 9 | exclude: /node_modules/, 10 | loader: 'babel', 11 | query: { 12 | presets: ['es2015'] 13 | } 14 | }, { 15 | test: /\.html$/, 16 | loader: 'raw' 17 | }] 18 | } 19 | } --------------------------------------------------------------------------------