template_setup.md

Goal

A build template for static sites that is:

1. Extensible as requirements upgrade
2. Buildable to optimize deployments
3. Repeatable (reuse as many common elements as possible/only customize when necessary)
4. SEO friendly

Tools to meet goals

1. Encapsulate everything in Vue components
2. Use webpack & co (e.g. purgeecss)
3. Use bootstrap as base styling and wrap custom CSS inside Vue components
4. TBD

Steps to build (shortcut: clone this repo)

Goal 1: Prepare Vue

Create a new Vue project

vue create <name>

Cleanup

1. Remove About router link in src/App.vue
2. Remove About path from src/router.js
3. Remove About view form src/views/About.vue
4. Delete src/components/HelloWorld.vue
5. Remove HelloWorld component from src/views/Home.vue

Goal 2: Webpack & co

Add purifycss

npm i --save-dev glob-all purgecss-webpack-plugin path

Configure via vue.config.js

create vue.config.js and add the following config:

const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob-all');
const path = require('path');

module.exports = {
  configureWebpack: {
    // Merged into the final Webpack config
    plugins: [
      new PurgecssPlugin({
        paths: glob.sync([
          path.join(__dirname, './src/index.html'),
          path.join(__dirname, './**/*.vue'),
          path.join(__dirname, './src/**/*.js')
        ])
      })
    ]
  }
}

Goal 3: Use Bootstrap

Pull in Bootstrap via NPM

npm install --save-dev bootstrap

Create a master scss file

Create app SCSS file and bring in all the Bootstrap CSS

src/assets/scss/app.scss

// Import required parts of Bootstrap
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Import optional Bootstrap
// All are included by default
@import "~bootstrap/scss/root";
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";
@import "node_modules/bootstrap/scss/tables";
@import "node_modules/bootstrap/scss/forms";
@import "node_modules/bootstrap/scss/buttons";
@import "node_modules/bootstrap/scss/transitions";
@import "node_modules/bootstrap/scss/dropdown";
@import "node_modules/bootstrap/scss/button-group";
@import "node_modules/bootstrap/scss/input-group";
@import "node_modules/bootstrap/scss/custom-forms";
@import "node_modules/bootstrap/scss/nav";
@import "node_modules/bootstrap/scss/navbar";
@import "node_modules/bootstrap/scss/card";
@import "node_modules/bootstrap/scss/breadcrumb";
@import "node_modules/bootstrap/scss/pagination";
@import "node_modules/bootstrap/scss/badge";
@import "node_modules/bootstrap/scss/jumbotron";
@import "node_modules/bootstrap/scss/alert";
@import "node_modules/bootstrap/scss/progress";
@import "node_modules/bootstrap/scss/media";
@import "node_modules/bootstrap/scss/list-group";
@import "node_modules/bootstrap/scss/close";
@import "node_modules/bootstrap/scss/modal";
@import "node_modules/bootstrap/scss/tooltip";
@import "node_modules/bootstrap/scss/popover";
@import "node_modules/bootstrap/scss/carousel";
@import "node_modules/bootstrap/scss/utilities";
@import "node_modules/bootstrap/scss/print";

Import SCSS into project

src/App.vue

...
<style lang="scss">
  @import 'src/assets/scss/app.scss'
</style>

Goal 4: TBD (prerender?)