這幾天利用業余時間做了一個個人項目，后端部分已經搭建好了還差一個前端，經過考慮前端利用Vue來搭建開發，因對Vue不是很熟悉，所以利用網絡查找了相關的資料，成功的跑出了第一個Vue頁面，寫在此作為一個記錄。
1.Vue.js是什么
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
2.搭建Vue開發環境
）到Node.js官方下載安裝包
我當前使用的node版本是v12.16.1，它自帶npm，安裝Node.js時會一起安裝，npm的作用就是對Node.js依賴的包進行管理。至于Node的安裝過程，網上已經有詳細的安裝過程，這里就不再贅述。安裝成功后，到環境變量里配置node。
然后可以到命令行窗口測試node命令是否可用，如下圖
由于國內訪問速度較慢，建議將 NPM 源設置為國內的鏡像，可以大幅提升安裝速度。
2）安裝webpack
如下圖，在命令行窗口執行命令“cnpm install webpack -g”,進行webpack安裝
3）安裝vue-cli
在命令行窗口執行命令“npm install vue-cli -g”
3.創建vue項目
打開命令行窗口，使用cd命令定位到你要創建vue項目的路徑，執行”vue init webpack 項目名稱”，注意項目名稱不能包含大寫，然后就會出現下圖的選項
①、Project name (sanfeng1)；項目名稱（sanfeng1）。（確定按enter，否按N）
②、 Project description (A Vue.js project)；項目描述。（隨意輸入一段簡短介紹，用英文）
③、Author；作者（確定按enter）
④、Vue build (Use arrow keys)；（按enter，默認選擇即可）
⑤、Install vue-router? (Y/n)；安裝的路由？（可安可不安，以后也可以再安，根據需求選擇）
⑥、Use ESLint to lint your code? (Y/n)；使用ESlint語法？（Y/ N）。（使用ESLint語法，就要做好心理準備，除非你非常懂ESLint語法，要不就會處處報錯，建議N）
⑦、Setup unit tests with Karma + Mocha? (Y/n)；設置單元測試？（Y / N）。（選N）
⑧、Setup e2e tests with Nightwatch? (Y/n)；Nightwatch建立端到端的測試？（Y / N）。（選N）
上面的選項選完之后，它會安裝這個項目的依賴包，最后會顯示下圖的內容，則說明Vue項目創建成功了。
4.運行Vue項目
開發Vue項目的編輯器有很多，例如Vue官網上推薦的HBuilder X,由于我之前進行Weex開發，使用的是idea,所以我還是使用idea來開發Vue項目。使用idea打開上面創建的項目。如下圖
根據項目里的README.md文檔，只需要先執行“npm install”安裝項目的依賴，然后執行“npm run dev”運行項目，如下圖
執行了“npm run dev”命令之后，最后在Terminal顯示該項目的訪問地址，則證明該項目啟動成功。
可以到瀏覽器輸入“localhost:8080”,則會顯示如下界面。
