Vue腳手架安裝及項(xiàng)目搭建(mac版)
前提:電腦上已經(jīng)安裝好了npm
vue腳手架全局安裝終端命令
$ sudo npm install -g vue-cli
安裝完成之后檢測(cè)
$ vue -V
如果終端輸出vue的版本號(hào)缸榄,那么腳手架就安裝成功了,
項(xiàng)目搭建
1. 在項(xiàng)目的父級(jí)目錄下進(jìn)入終端雷恃,此目錄任意 cd /usr/
2. 安裝項(xiàng)目(在當(dāng)前的目錄下)
終端命令
$ vue init webpack vueproject
這里的vueproject是vue的項(xiàng)目名稱不恭,該名稱不限制帘不,可以任意诱鞠。至于vue項(xiàng)目的其他依賴模塊镣丑,我們根據(jù)項(xiàng)目需求單獨(dú)安裝
項(xiàng)目設(shè)置01
項(xiàng)目設(shè)置02
項(xiàng)目設(shè)置03
如果終端顯示如下宣谈,則vue項(xiàng)目搭建成功
搭建成功
打開項(xiàng)目的父級(jí)目錄枝哄,就可以看到當(dāng)前vue項(xiàng)目的根目錄肄梨,這里示例是vueproject,vueproject文件夾及其所有的子文件夾都是通過(guò)終端命令操作安裝的挠锥。
vue項(xiàng)目目錄(自動(dòng)生成)
3. 運(yùn)行vue項(xiàng)目
終端命令(在當(dāng)前的vue項(xiàng)目目錄下的終端众羡,在次示例中為vueproject)
$ npm run dev
運(yùn)行vue項(xiàng)目
如果項(xiàng)目運(yùn)行成功,會(huì)在終端顯示項(xiàng)目的路徑蓖租,如下圖粱侣,路徑為
http://localhost:8081,在瀏覽器中輸入此路徑蓖宦,就是vue項(xiàng)目的運(yùn)行頁(yè)面
運(yùn)行成功
為了方便我們開發(fā)齐婴,還要安裝一些其他的依賴模塊,所以還要安裝一次稠茂。
終端命令(當(dāng)前的vue項(xiàng)目目錄下)
$ npm install
安裝模塊
到現(xiàn)在位置柠偶,一個(gè)基于vue的系統(tǒng)項(xiàng)目就搭建成功了。這只是搭建睬关,如果想要開發(fā)的話诱担,還需要系統(tǒng)的學(xué)習(xí)。