最近開始接觸新的專案開發模式，有別於以往在設計公司中的流程，決定筆記一下方便日後忘記查找。
安裝 Vue-cli
Vue-cli 是 Vue 開發者基於 webpack 設計的工具，可以快速打造 Vue 的專案開發環境，由於這些套件都是建立在 Node.js 下的，所以在使用前務必先安裝好 Node.js，當安裝好後再輸入以下指令將 Vue-cli 安裝在全域環境。
//指令為舊版本(1.x, 2.x)的安裝法，目前官方已有更新 $ npm install -g vue-cli
建立一個 Vue 專案
安裝好 Vue-cli 後，接著就是使用它來管理專案，首先使用以下指令來將專案初始化。
//初始化專案 $ vue init 樣板名稱 專案名稱
Vue-cli 中提供了多種樣版環境供開發者使用，詳細的樣板內容可以使用指令觀看。
$ vue list
由於我主要使用的是 webpack 來當作開發環境，所以樣板名稱使用 webpack。
$ vue init webpack VueStudy
等待初始化完成後就會在指定位置建立好開發環境，並且建立好一個 sample 頁面，可以就這樣的框架開始下去開發專案。
安裝 pug / pug-loader / pug-filter
pug 是 html 的開發框架，有必要再另外開一篇筆記，透過以下指令來安裝 pug 核心、pug-loader 及 pug-filter。
$ npm install pug pug-loader pug-filters --save
安裝後開發環境就支援 pug 來撰寫 html 了，在寫 pug 時要附註屬性 lang 的值為 pug。
<template lang="pug"> //pug html </templte>
安裝 sass / sass-loader / node-sass
最後再透過以下指令安裝 SASS 的部份，如有必要再開一篇 SASS 筆記。
$ npm install sass sass-loader node-sass --save
安裝後使用 sass 編輯 css 檔案時需要加上屬性標籤 lang 的值為 scss
<style lang="scss"> //scss here </style>
執行 webpace dev-server
由於整個專案使用了許多預處理框架，所以頁面要 demo 是無法單純使用 index.html 就看到結果的，這邊必須要在專案下執行 webpack 中的 dev-server 來跑一個本機的伺服器來預覽頁面。
$ npm run dev