1. 程式人生 > >vue-cli(vue腳手架)快速搭建前端專案——Vue系列部落格一

vue-cli(vue腳手架)快速搭建前端專案——Vue系列部落格一

最近自己做了一個vue做前端,nodejs做後的完整專案,在此過程遇到的問題和收穫的心得分享出來,希望能和大家交流探討。
專案搭建步驟
1.首先要確保計算機上安裝了nodejs環境,才能進行以下步驟(nodejs環境安裝);
2.使用淘寶映象:npm config set registry http://registry.npm.taobao.org(安裝這個是因為我們用的npm的伺服器是外國的,有的時候我們安裝“依賴”的時候很慢很慢超級慢,所以使用淘寶映象下載安裝速度會快很多,如下圖):
在這裡插入圖片描述
3.分別全域性vue元件、vue-cli元件、webpack元件:安裝命令分別為npm i vue -g、npm i vue-cli -g、npm i webpack -g(-g表示全域性安裝,-S表示安裝到當前專案的模組中),安裝分別如下圖:
在這裡插入圖片描述


4.至此所需要的安裝元件已經全部安裝完畢,我在計算機G盤下新建了一個名為Test的專案,所以命令列先進入該目錄,如下圖:
在這裡插入圖片描述
此時的空專案目錄如下圖(.idea檔案見是我的IDEA編輯器自己的構建檔案,和專案無關):
在這裡插入圖片描述
5.用vue-cli腳手架初始化專案,在命令列輸入vue init webpack,然後 傻瓜式按回車鍵一步一步進行操作,如果你專案名稱裡有大寫那進行到 ? Project name這裡應該輸入小寫的專案名再按回車繼續如圖,在這裡插入圖片描述最後邊三個選擇n(從Use ESLint to lint your code? 開始),最後一項 ? Should we run npm install for you after the project has been created? (recommended)選擇第三項No, I will handle that myself再按回車,如圖在這裡插入圖片描述
具體操作如下圖所示:
在這裡插入圖片描述
至此專案已經自動生成,專案目錄如下圖:
在這裡插入圖片描述
6.啟動本地測試伺服器,在命令列依次輸入npm i(安裝所需要的依賴,執行一次,以後啟動不用再執行,直接npm start就行)和npm start,如下圖:
在這裡插入圖片描述
至此本地伺服器已經啟動,在瀏覽器輸入localhost:8080,如下圖:
在這裡插入圖片描述
注意:現在你的計算機上已經安裝了vue、vuec-cli、webpack,所以以後搭建其他專案只需要從步驟4開始就行。