一、前言
“腳手架”是一種元程式設計的方法，用于建構基于資料庫的應用。許多MVC架構都有運用這種思想。
是不是感覺很高大上的樣子，好吧，其實說直白點就是：别人共享出來的，可以快速幫你搭建一個項目的基礎架子，你可以在上面添磚加瓦，以滿足你的需求。這篇博文要介紹的為vue-cli2.x版本的。
二、準備工作
node安裝
在node官網，下載下傳安裝包，然後一路點選next，即可進行傻瓜式安裝。安裝完成後可以，可以指令行工具中輸入 node -v 和 npm -v，如果能顯示出版本号，就說明安裝成功：如下
當然也可以參考我之前的文章windows系統下如何安裝多版本node，進行多版本的安裝
webpack的安裝
安裝完成node之後，我們就可以使用node自帶的包管理工具，全局安裝webpack了，指令行為：npm install webpack -g，此時預設安裝最新版本。
注意：webpack 4.X 開始，需要安裝 webpack-cli 依賴 ,是以使用這條指令： npm install webpack webpack-cli -g
vue-cli安裝
全局安裝vue-cli，在cmd中輸入指令:
npm install -g vue-cli
安裝完成後，輸入 vue -V 記住 大寫V ! 大寫V ! 大寫V !
vue -V
結果如下：
至此，環境準備工作已經結束了， 如果在上述操作中，遇到了問題，請自行去找百度哦
三、用vue-cli建構項目
-
生成項目
通過指令行，切換到項目的存放目錄下，然後執行指令：
過程如下圖vue init webpack vue-webpack-demo Vue-cli腳手架快速搭建項目 - 初始化，安裝依賴
到這一步，通vue-cli建構項目基本就完成了，當然這隻是一個很基礎的項目架構。cd vue-webpack-demo npm install
四、項目的運作
項目建立完成後，在根目錄有一個package.json的檔案中，有這樣一個字段
1"scripts": {
2 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
3 "start": "npm run dev",
4 "lint": "eslint --ext .js,.vue src",
5 "build": "node build/build.js"
6 },
以上就是預設的幾個項目相關的指令。
本地開發：npm run dev
執行指令npm run dev
然後在浏覽器打開http://localhost:8080 ，會看到歡迎頁：
到此，我們的demo就跑起來了，當然這隻是在開發環境跑起來的。
打包上線：npm run build
執行指令npm run build，打包後會生成dist檔案夾
打開dist檔案夾下新生成的index.html檔案，會發現頁面空白，打開控制台會發現頁面中引用的css和js檔案都找不到。
說明引用路徑錯了，需要手動修改：
進入config/index.js
此時，再重新執行指令，即可運作成功了。
将來項目上線時，隻需要将 dist 檔案夾放到伺服器就行了。
以上是基于vue-cli腳手架建立vue項目的基本過程，希望對你有所幫助。歡迎關注同步微信公衆号：前端小菜的進階之路