現在流行的前端架構很多，vue相對于來說較為簡單，更容易上手。
現在将自己一步步學習過程進行記錄，便于以後查閱，也作為積累，同大家分享。
一、安裝node.js
1、在官網中安裝nodejs最新版本。位址：https://nodejs.org/en/download/，根據自己環境，進行下載下傳安裝。
2、安裝完成後，進行nodejs版本及npm版本檢視。
打開cmd指令行，輸入 node -v 和 npm -v，node安裝後将會自動安裝上npm，但不一定是最新的，可用指令 npm install -g npm，進行最新版本安裝。
安裝好之後，就可以使用vue-cli進行初始化一個vue項目。
二、vue項目初始化
1、全局安裝vue-cli
打開cmd指令行，輸入npm install --global vue-cli ，進行全局安裝vue-cli腳手架工具。如果安裝不成功，請檢查npm是否最新版本，或cmd是否以管理者身份運作。
2、建立vue項目
在指令行中，進入指定路徑，運作 vue init webpack 項目名稱，例如： vue init webpack my-vue。
按照提示資訊，進行建立項目，一般預設直接選擇yes就
等待建立完成，過程需要幾分鐘。
3、vue目錄結構
利用vue-cil初始化建構vue項目完成後，打開項目目錄，會看到vue的一個初始化結構，如下圖：
其中：
build——項目建構(webpack)相關代碼。
config——基本配置資訊，如端口等，此處初學我們可以預設。
node_modules——npm加載的項目依賴子產品。
src——最重要的開發目錄，包含：assets(放置一些圖檔，如logo等)、 components( 元件檔案夾)、App.vue( 項目入口檔案)、main.js:(項目的核心檔案)
static——靜态資源目錄。在打包釋出後将用于存放靜态資源。
test——初始測試目錄，可以删除。
index.html ——首頁入口檔案。
package.json ——項目配置檔案，此處初學我們可以預設。
.xxxx檔案 ——一些配置檔案，包括文法配置，git配置等，此處初學我們可以預設。
README.md ——項目的說明文檔，為markdown 格式 。
三、啟動運作
1、進入項目根目錄，運作指令 npm run dev，如下：
将看到項目進行啟動。啟動成功後，将看到運作位址。
2、在浏覽器中輸入以上位址，将輸出結果，如下圖：
注意：Vue.js 不支援 IE8 及其以下 IE 版本，最好使用Chrome。
如此簡單，開啟第一步！三個重要指令：npm install --global vue-cli
vue init webpack 項目名稱
npm run dev