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

0 votes
242 views
added Jul 19, 2018 in Vue by LC Marshal Captain (25,790 points)
// #1 Installation
//Install vue-2-boilerplate and run : https://github.com/petervmeijgaard/vue-2-boilerplate
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";
</style>
 
// #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 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
 
// Save bootstrap into scss/vendor/bootstrap/bootstrap.min.css
 
// in main.scss
//vendor
@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:
https://github.com/vuejs/vue-devtools   

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...