Vue-cli腳手架快速搭建項目圖文教程

​ 前言：比較基礎的教程，大神自行忽略

腳手架是什麼？

“腳手架”是一種元程式設計的方法，用于建構基于資料庫的應用。許多MVC架構都有運用這種思想。

程式員編寫一份specification（規格說明書），來描述怎樣去使用資料庫；而由（腳手架的）編譯器來根據這份specification生成相應的代碼，進行增、删、改、查資料庫的操作。我們把這種模式稱為"腳手架"，在腳手架上面去更高效的建造出強大的應用！

好吧，其實說白點就是可以快速幫你搭建一個項目的基礎架子，你直接拿過來用然後添加新項目需要的東西。

準備工作

安裝node

首先我們需要安裝node環境，官網

https://nodejs.org

下載下傳安裝包。

安裝完成後可以，可以指令行工具中輸入

node -v

和

npm -v

，如果能顯示出版本号，就說明安裝成功。

安裝 Vue-cli

首先全局安裝 vue-cli

npm install -g vue-cli           

安裝完成後 同樣适用指令行工具 輸入

vue -V

記住 大寫V ! 大寫V ! 大寫V !

生成項目

首先需要在指令行中進入到項目目錄，然後輸入：

vue init webpack Vue-Project           

Vue-Project 是自定義的項目名稱，指令執行之後，會在目前目錄生成一個以該名稱命名的項目檔案夾,如下圖

初始化，安裝依賴

如果跟我一樣沒有立即執行npm裝包，那麼咱們可以手動 執行去安裝依賴

npm install           

安裝依賴完成

run

npm run dev           

浏覽器打開

http://localhost:8080/#/

，會看到歡迎頁：

build

npm run build           

打包後會生成dist檔案夾

打開dist檔案夾下新生成的index.html檔案，會發現頁面空白，打開控制台會發現頁面中引用的css和js檔案都找不到：

說明引用路徑錯了，需要手動修改：

進入config/index.js

如果本地的8080端口被占用，可以修改端口号。

打包上線

打包完成後，會生成 dist 檔案夾，如果已經修改了檔案路徑，可以直接打開本地檔案檢視

項目上線時，隻需要将 dist 檔案夾放到伺服器就行了。