VUE腳手架具體使用方法
什么是vue腳手架?
他是一個(gè)快速構(gòu)建 vue 項(xiàng)目的工具,通過(guò)他,我們可以將 vue 所需要的文件安裝完成。
vue-cli這個(gè)構(gòu)建工具大大降低了webpack的使用難度,支持熱更新,有webpack-dev-server的支持,
相當(dāng)于啟動(dòng)了一個(gè)請(qǐng)求服務(wù)器,給你搭建了一個(gè)測(cè)試環(huán)境,只關(guān)注開(kāi)發(fā)就OK。
安裝 vue-cli 腳手架
安裝腳手架需要用 cnpm( 淘寶鏡像 ) 安裝 , 直接用 pip 安裝 會(huì)失敗 , 安裝 cnpm 命令如下 :
npm install cnpm -g --registry=https://registry.npm.taobao.org
安裝成功輸入 :cnpm-V, 查看 cnpm 是否安裝成功 ,
注意 V 一定要是大寫 .
安裝 vue 腳手架命令去下 :
cnpm install -g vue-cli
安裝成功是下面這樣的
然后使用 vue-V 查看是否安裝成功.
如果安裝失敗可能是 cnpm 版本過(guò)低 , 更新 cnpm 的版本即可 .
cnpm 更新必須要手動(dòng)更新,更新命令如下:
npm install -g npm
使用 vue init webpack myitem 這條命令,就可以創(chuàng)建一個(gè) vue
的腳手架。
解釋一下命令 :
vue init 即使用vue-cli初始化一個(gè)項(xiàng)目。
webpack 是說(shuō)使用webpack作為構(gòu)建工具。
firstvue 是項(xiàng)目名稱。 注意: 項(xiàng)目名稱推薦使用小寫字母。
安裝時(shí)會(huì)暫停一下 , 你點(diǎn)擊 Enter 進(jìn)行下一步就可以了 ,
Install vue-router? 是否安裝 vue 的路由 ? 如果你要做前后端的項(xiàng)目的話 , 就要選擇 yes, 建議選擇 yes.
Pick an unit tester jest 是否單元測(cè)試
其他的更具自己的需求進(jìn)行選擇
安裝成功會(huì)顯示出這兩個(gè)命令 :
這個(gè)時(shí)候進(jìn)入你新建的 vue 項(xiàng)目的目錄下 , 你會(huì)發(fā)現(xiàn)他新建了一個(gè) mytime 的文件夾
在運(yùn)行項(xiàng)目前 , 需要安裝依賴 , 命令如下:
cnpm install
Vue 需要在黑窗口啟動(dòng)一下 .
啟動(dòng)之前進(jìn)入 vue 的項(xiàng)目根目錄下 . 輸入命令 :
cd mytime 進(jìn)入根目錄
npm run dev 啟動(dòng)項(xiàng)目
啟動(dòng)成功效果如下 :
復(fù)制路由 : http://localhost:8081 , 在谷歌瀏覽器打開(kāi) , 會(huì)顯示頁(yè)面 :
這個(gè)時(shí)候 , 一個(gè)完整的 vue 腳手架成功搭建成功 .
把你新建的 vue 項(xiàng)目拖拽到你的編程軟件的根目錄下 :
會(huì)出現(xiàn)這些文件 , 這個(gè)時(shí)候 , 你就可以進(jìn)行編輯了
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式
這篇文章主要介紹了antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue中使用$emit傳遞多個(gè)參數(shù)的2種方法
這篇文章主要給大家介紹了關(guān)于vue中如何使用$emit傳遞多個(gè)參數(shù)的2種方法,在Vue中可以使用$emit方法向父組件傳遞數(shù)據(jù),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的方法實(shí)例
輪播圖是前端很常用的一個(gè)網(wǎng)頁(yè)特效,幾乎所有的網(wǎng)站或多或少都會(huì)用到這個(gè)特效。下面這篇文章主要給大家介紹了關(guān)于利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。2017-08-08Vue 如何使用props、emit實(shí)現(xiàn)自定義雙向綁定的實(shí)現(xiàn)
這篇文章主要介紹了Vue 如何使用props、emit實(shí)現(xiàn)自定義雙向綁定的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06Vue 解決通過(guò)this.$refs來(lái)獲取DOM或者組件報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了Vue 解決通過(guò)this.$refs來(lái)獲取DOM或者組件報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖
這篇文章主要為大家詳細(xì)介紹了Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue中實(shí)現(xiàn)子組件接收父組件方法并獲取返回值
這篇文章主要介紹了vue中實(shí)現(xiàn)子組件接收父組件方法并獲取返回值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue?parseHTML函數(shù)源碼解析start鉤子函數(shù)
這篇文章主要為大家介紹了vue?parseHTML函數(shù)源碼解析start鉤子函數(shù),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07