由於公司近期有新的H5項目開發，而前端的同事也離職了，所以就臨時頂缸，研究學習一下Vue框架開發。
本人也是初學，在學習過程中，把一些學習所得分享出來，可能會有很多問題和疏漏，希望大家能夠多多指正，共同進步。
一、環境准備：
1. Node.js：在nodejs官網下載最新的安裝包，選擇安裝目錄，傻瓜式安裝。安裝完成后，打開dos命令，輸入node -v命令，會顯示安裝的nodejs版本，表明安裝成功。因為默認安裝nodejs時，會自動安裝npm，在dos命令窗口輸入npm -v命令，會顯示安裝的npm版本。
2. VScode：直接選擇目錄，一鍵安裝即可；需要漢化的，在擴展中，搜索Chinese，找到中文簡體的插件安裝，然后重啟即可。
二、環境安裝及配置：
1. 更改配置和緩存目錄
為方便管理，且減輕系統盤壓力（默認會把配置和緩存放到個人文檔AppData下），將nodejs的node_global和node_cache轉移至nodejs安裝目錄下。在nodejs安裝目錄下，創建node_global和node_cache兩個文件夾，分別執行如下語句（XXXX指nodejs安裝目錄）
npm config set prefix "XXXX\node_global" npm config set cache "XXXX\node_cache"
2. 安裝cmpn
npm的很多包在國外服務器，為方便使用，所以優先使用淘寶的鏡像服務器對依賴包module進行安裝，因此首先安裝cnpm（國內鏡像包可能會有收錄延時，找不到最新的包，不過基本沒什么影響），安裝命令如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org
注意：cnpm安裝之后，不會自動添加環境變量配置，此時執行cnpm命令會提示“'cnpm' 不是內部或外部命令，也不是可運行的程序或批處理文件”；需要將nodejs的配置添加到環境變量PATH中（nodejs配置目錄就是第一步中的“XXXX\node_global”）；
3. 安裝vue-cli
vue-cli是一套用來搭建vue項目的腳手架，能極大程度的方便我們創建一個全新的vue項目，只需要輸入幾個命令就可以了
我們可以用npm命令很便捷的安裝vue-cli，當然前面我們已經創建好了使用國內鏡像的cnpm，我們也可以使用cnpm來創建，命令如下：
npm install -g vue-cli 或 cnpm install -g vue-cli
安裝完成之后，可以輸入命令：vue -V，檢查是否安裝成功
至此，我們的前期工作已經全部完成了，接下來就可以使用這些工具，幫我們快速的完成vue創建及開發工作。
三、Vue項目搭建
1. 使用vue命令，快速創建vue項目
使用cd命令，定位到准備新建項目的目錄中，然后使用如下命令創建項目(XXX是項目文件夾名稱，會自動生成)
vue init webpack XXX
說明： Project name：項目名稱，默認是上面命令創建的文件夾名稱，可修改（注意項目名稱必須全部小寫，不能有特殊符號，否則會提示error）
Project description（項目說明）、Author（作者）、Vue build（Vue項目構建方式）：默認即可，直接回車下一步
Install vue-router：是否安裝路由配置（默認Yes，可選否后續自己配置路由，我不會配置，所以就是默認Y）
Use ESLint to lint your code：是否使用ESLint規范來進行編碼（建議No，ESLint編碼很嚴格，一個空格都可能報錯）
Set up unit tests：是否設置單元測試（默認Yes，我不太懂，所以就默認了）
Pick a test runner：選擇測試運行程序（默認jest，不懂，直接默認）
Setup e2e tests with Nightwatch：是否我用e2e測試（默認Yes，不懂，直接默認）
Should we run `npm install` for you after the project has been created? (recommended)：項目創建后是否直接運行npm install命令（雖然提示說是推薦，但是不建議，因為比較慢，后續我們可以直接使用 cnpm install 命令）
按照上述，項目就被創建好了，可以在目錄下看到新創建的項目my_frist_vue
2.安裝項目依賴項，並運行項目
使用cnpm install 命令，直接安裝依賴項，安裝完成后，在項目目錄下，會出現一個node_modules依賴包文件夾
執行“cnpm run dev”命令，就會自動打包，生成項目，在瀏覽器中輸入“http://localhost:8080”查看
四、VSCode集成開發Vue項目
1. 打開VSCode管理工具，選擇左上角“文件”-“打開文件夾”，彈框選擇剛剛創建的Vue項目文件夾，就會將項目加載到工作區，可以很方便的查看和修改項目文件
2. 打開Vue文件時，會發現沒有任何顏色格式進行區分標注，需要安裝vetur插件，也是在擴展中直接搜索“vetur”進行安裝。
3. VSCode集成了終端命令工具，可以直接在VSCode中進行依賴項注入、打包發布等等操作，而不需要在dos命令中執行了。
VSCode左上角“查看”-“終端”，即可打開命令工具，自動定位到當前項目目錄中，所以無需再cd跳轉目錄。
五、總結：
暫時先寫到這里，不是很擅長歸納總結，寫的比較亂，等后續學有所成了，在來潤色潤色(*￣︶￣)
在此希望各位大佬多多指教、指正，不勝感激！