最近心血來潮想把公司的專案框架改寫成vue，現用angular.js也就是第一版本的angular框架

我習慣將步驟分為一下幾種

準備工作：配置環境  搭建腳手架  檔案專案分類

開發：倒包 配置路由 登陸頁面開發  專案開發

今天先配置環境

主要用到的環境和工具有：

node 開發環境

下載node 一般會自動下載npm npm主要用來下載依賴 cnpm是用國內的淘寶映象下載依賴 下載速度較快

webpack 主要用來打包分類js cs等資料夾

git 用來程式碼的分支開發和遠端管理 由於我是自己嘗試寫著玩，今天暫時先不下載了 

gulp是同來壓縮合並程式碼 一般會在上線的時候使用 或者直接使用webpack

專案開始

一.環境搭建

在網上下載node安裝包 根據提示完成安裝

1.在桌面新建一個專案資料夾，不可用中文

2.開啟資料夾 在專案位址列中拼寫'cmd'按回車鍵 自動開啟黑色命令視窗

3.使用 'node -v'檢測node是否安裝成功 如果顯示一串版本號表示安裝成功

4.使用'npm -v'檢測npm是否安裝成功 如果顯示一串版本號表示安裝成功

5.輸入'npm config set registry https://registry.npm.taobao.org'

回車鍵即可使用cnpm

6.輸入 'cnpm i webpack -g' 回車 安裝全域性webpack

7.輸入 'npm install vue-cli -g' 回車 安裝腳手架 安裝完成輸入'vue -V'（注意這裡是大寫的“V”）檢測是否安裝成功

二. 專案構建

1.輸入‘ vue init webpack 專案名‘專案名不可用中文 回車

一般都可選y 在下載依賴工具選擇的時候選自第三項 自定義選擇

然後輸入’ cnpm i‘ 下載依賴

預設埠號是8080 確保埠號不被佔用

所有下載完成 輸入 npm run dev

開啟瀏覽器 輸入 localhost:8080 或者配置熱載入

如果報錯 可自行檢視報錯原因 一般原因有：

中文檔名 有一些配置版本較低 或者常見的依賴包有問題可刪除node moudles檔案包 再使用cnpm i重新下載

最後正確的頁面為：