VUE腳手架具體使用方法
什么是vue腳手架？
他是一個快速構(gòu)建 vue 項目的工具，通過他，我們可以將 vue 所需要的文件安裝完成。
vue-cli這個構(gòu)建工具大大降低了webpack的使用難度，支持熱更新，有webpack-dev-server的支持，
相當(dāng)于啟動了一個請求服務(wù)器，給你搭建了一個測試環(huán)境，只關(guān)注開發(fā)就OK。
安裝 vue-cli 腳手架
安裝腳手架需要用 cnpm( 淘寶鏡像 ) 安裝 , 直接用 pip 安裝 會失敗 , 安裝 cnpm 命令如下 :
npm install cnpm -g --registry=https://registry.npm.taobao.org
安裝成功輸入 :cnpm-V, 查看 cnpm 是否安裝成功 ,
注意 V 一定要是大寫 .
安裝 vue 腳手架命令去下 :
cnpm install -g vue-cli 安裝成功是下面這樣的
然后使用 vue-V 查看是否安裝成功.
如果安裝失敗可能是 cnpm 版本過低 , 更新 cnpm 的版本即可 .
cnpm 更新必須要手動更新,更新命令如下:
npm install -g npm
使用 vue init webpack myitem 這條命令，就可以創(chuàng)建一個 vue
的腳手架。
解釋一下命令 :
vue init 即使用vue-cli初始化一個項目。
webpack 是說使用webpack作為構(gòu)建工具。
firstvue 是項目名稱。 注意： 項目名稱推薦使用小寫字母。
安裝時會暫停一下 , 你點擊 Enter 進(jìn)行下一步就可以了 ,
Install vue-router? 是否安裝 vue 的路由 ? 如果你要做前后端的項目的話 , 就要選擇 yes, 建議選擇 yes.
Pick an unit tester jest 是否單元測試
其他的更具自己的需求進(jìn)行選擇
安裝成功會顯示出這兩個命令 :
這個時候進(jìn)入你新建的 vue 項目的目錄下 , 你會發(fā)現(xiàn)他新建了一個 mytime 的文件夾
在運行項目前 , 需要安裝依賴 , 命令如下:
cnpm install
Vue 需要在黑窗口啟動一下 .
啟動之前進(jìn)入 vue 的項目根目錄下 . 輸入命令 :
cd mytime 進(jìn)入根目錄
npm run dev 啟動項目
啟動成功效果如下 :
復(fù)制路由 : http://localhost:8081 , 在谷歌瀏覽器打開 , 會顯示頁面 :
這個時候 , 一個完整的 vue 腳手架成功搭建成功 .
把你新建的 vue 項目拖拽到你的編程軟件的根目錄下 :
會出現(xiàn)這些文件 , 這個時候 , 你就可以進(jìn)行編輯了
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3 Element-plus el-menu無限級菜單組件封裝過程
對于element中提供給我們的el-menu組件最多可以實現(xiàn)三層嵌套，如果多一層數(shù)據(jù)只能自己通過變量去加一層，如果加了兩層、三層這種往往是行不通的，所以只能進(jìn)行封裝，這篇文章主要介紹了Vue3 Element-plus el-menu無限級菜單組件封裝,需要的朋友可以參考下2023-04-04
SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯誤解
這篇文章主要為大家介紹了SyntaxError:?/xx.vue:?Unexpected?token,?expected?“,“錯誤解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-08-08
vue-cli創(chuàng)建的項目,配置多頁面的實現(xiàn)方法
下面小編就為大家分享一篇vue-cli創(chuàng)建的項目,配置多頁面的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue項目啟動后,js-base64依賴報錯Cannot read properties
這篇文章主要介紹了vue項目啟動后,js-base64依賴報錯Cannot read properties of null(reading ‘replace’)問題,2024-05-05
vue 使用moment獲取當(dāng)前時間及一月前的時間
開發(fā)中會有要獲取當(dāng)前日期的需求,有的是獲取到當(dāng)前月份,本文就介紹了vue獲取當(dāng)前日期時間(moment、new?Date()),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2023-08-08
這篇文章主要介紹了Vue.js組件高級特性,結(jié)合實例形式詳細(xì)分析了vue.js組件遞歸、模板、動態(tài)加載、渲染等相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
vue項目打包之開發(fā)環(huán)境和部署環(huán)境的實現(xiàn)
這篇文章主要介紹了vue項目打包之開發(fā)環(huán)境和部署環(huán)境的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue中使用axios post上傳頭像/圖片并實時顯示到頁面的方法
今天小編就為大家分享一篇vue中使用axios post上傳頭像/圖片并實時顯示到頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue ECharts設(shè)置主題實現(xiàn)方法介紹
這篇文章主要介紹了Vue ECharts設(shè)置主題，本文通過實例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
Vue.js框架是什么，為什么要選擇它？這篇文章為大家介紹目前前端技術(shù)使用的趨勢，以及Vue.js的優(yōu)點和適用場景等，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10