HBuilderX執行vue程式

作為入門文章，筆者推薦過webstorm開發vue以及多種入門教程，但是對於前端五花八門的整合開發工具，筆者時間精力有限，在此只能分享筆者使用過的工具並開發過vue的教程。希望短小精悍的文章能夠幫助到更多有需要的朋友。

Hbuilder

首先百度去官網下載安裝最新的版本的軟體，然後開始鼓搗起來吧。第一步更改配置檔案，話不多說看圖吧，根據個人開發需求配置，工欲善其事必先利其器，與其等到執行除錯的時候再來折騰環境，不如在我們開始程式碼之前配置好環境。

根據自己本機配置環境

接下來我們Ctrl+N選擇新建專案，然後選擇vue專案

新建vue專案

我這裡新建了一個vue專案《first-vue-app》可以看到編輯器已經幫我生產了一個基本的vue工程和一些基礎配置，最關鍵的對於初學者是可直接執行的，能滿足所見即所得初學者心態和學習欲，而不是辛辛苦苦弄了一堆配置之後的挫敗感，這些繁雜的配置我們可以採取慢慢深入的去學習和掌握。

編輯器初始化後的專案結構

然後我們點選上面的執行 -> 執行到終端 ->

npm install

稍等片刻 ，等到必須的包安裝完成之後就可以點選

npm run serve

來執行我們的專案了

執行方式

最後開啟瀏覽器手動輸入

localhost:8081

或者使用編輯器的快捷方式 都可以進入我們專案頁面了。很簡單吧學會了吧！