1. 程式人生 > >vue-cli腳手架安裝教程

vue-cli腳手架安裝教程

    最近在看vue.js教程,看到有vue-cli這個專案腳手架,很好,而且內部帶有webpack和熱更新,省去自己建立專案目錄結構的很多時間,這樣可以專注開發了!!
    首先,要確保電腦中已經全域性安裝了vue。我在這裡只說安裝過程,不說其他了,如果各位想要了解的可以自行百度哦!

安裝vue-cli

1、使用npm(前提是電腦上已經安裝node環境才能使用npm哦)全域性安裝webpack,在命令列中輸入:npm install webpack -g,等待一會就能安裝上了,安裝完成之後可以輸入webpack-v 進行檢視是否安裝上,一般都能上。

2、全域性安裝vue-cli,命令列中輸入:npm install --g vue-cli安裝過程如下圖所示:
剛輸入命令後

可以看到我輸入命令之後有幾個不能識別的字元,這是因為在輸入專案名稱的時候我輸入了大寫字母,會提示專案名稱不能包含大寫字母的,所以要用小寫字母的哦!所有關於初始選項的命令輸入完之後開始建立專案。等待一會就ok了,如果嫌棄時間太長,可以使用淘寶映象下載,這裡不再贅述,可以搜尋一下,自行安裝。

3、安裝依賴:npm install
進入專案
在這裡插入圖片描述
安裝完成之後cd到自己剛才新建的專案,我進入的是:cd myvuedemo
進入之後輸入命令:npm install ,這個命令會自動下載專案中所有用到的依賴(ps:這以後做專案時也不上傳自己的node_modules資料夾)
安裝完成之後專案中會多一個node_modules資料夾,檔案中夾中就是專案執行時所用的全部依賴。
專案資料夾如圖所示:
資料夾


到這裡就安裝完成了,可以執行一下專案,執行方式是在專案資料夾中開啟命令列工具,輸入:npm run dev 開啟瀏覽器輸入預設埠地址,就可以看到vue-cli預設的一個頁面 如下圖:
執行
執行介面

恭喜你完成了你的第一個專案,並執行成功!!
第一次寫自己的分享,寫的不太好,希望大家能看懂,不懂的可以留言哦,有意見的也可以留言,我會改正並繼續努力的。