Vue - Complete guide for Vue 2 Boilertplate kickoff (webpack template)

0 votes
added Jul 19, 2018 in Vue by LC Marshal Captain (25,790 points)
// #1 Installation
//Install vue-2-boilerplate and run :
npm i && npm run dev 
//To run development
npm run dev
// To build files after editing (dist)
npm run build
//If you use gulp to build, you may tweak the package.json, npm run build to combined gulp
 "scripts": {
    "dev": "node build/dev-server.js",
    "start": "npm run dev",
    "build": "gulp css && node build/build.js",
// #2 Import SCSS 
To import scss from app.vue; Add the following code into bottom part of app.vue 
<style lang="scss">
  @import "./css/main.scss";
// #3 Using Bootstrap
//Do not use all bootstrap materials i.e .js since were using virtual DOM of vue. 
//Method 1: Manual
//Download bootstrap CDN at
// Save bootstrap into scss/vendor/bootstrap/bootstrap.min.css
// in main.scss
@import "../../node_modules/fotorama/fotorama";
@import "../../node_modules/vue-nav-tabs/dist/vue-tabs.min";
@import "vendor/bootstrap/bootstrap.min.css";
//Method 2: NPM package
//npm i bootstrap@3
//import bootstrap from node_modules into main.js (global registration area)
import 'bootstrap/dist/css/bootstrap.min.css'; 
// # Devtools
//Download the Vue Devtools extension for a better development experience: - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.