vue-cli腳手架的安裝教程圖解
vue-cli腳手架模板是基于node下的npm來完成安裝,下面給大家介紹vue-cli腳手架的安裝,具體內(nèi)容如下所述:
https://github.com/vuejs/vue-cli 官網(wǎng) 使用官方推薦的webpack
條件:
node在4.以上,npm在3以上,查看版本號打開cmd輸入,node -v npm -v;

安裝步驟:
1、cmd打開命令行窗口
2、輸入npm install vue-cli -g,然后回車等待

3、安裝結(jié)束后輸入vue 查看是否安裝成功

4、運行vueinitwebpack demo(注:項目名稱)回車,(想在哪個目錄建立vue項目就要在進入到對應目錄再輸入命令)

5、顯示Project nanme 項目名 回車(項目名不允許使用大寫)

6、project description 后面可以寫上描述,或者直接回車

7、Author 后面可以寫作者也可以回車 (如果配置過git會自動獲取git的name)

8、Install vue-router? 選擇Y(官方推薦的路由插件,幾乎每個項目都用得到)

9、User ESLint to lint your code? 選Y(是否啟用eslint檢測規(guī)則,如果不是公司的大型項目或者多人共同開發(fā)博主感覺沒有必要安裝)

10、Set up unit tests? 問的是否要測試 選n

11、Setup e2e tests with Nightwatch? 選n( 用Nightwatch設(shè)置E2E測試?)

12、Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) 選擇使用npm、還是yarn安裝,一般都是直接回車就好

13、這個時候在你創(chuàng)建的目錄下就有你的目錄了

14、cd 你的目錄名然后輸入npm run dev啟動應用,啟動成功它會自動打開一個vue頁面


到此為止你已經(jīng)學會了怎么安裝 vue-cli腳手架工具了,下面我簡單的說明下各個目錄都是干嘛的:

main.js的介紹
el是掛載點,router是路由
App.vue 是整個文件的入口,有三部分,template模板 script 邏輯 style樣式
總結(jié)
以上所述是小編給大家介紹的vue-cli腳手架的安裝教程圖解,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
相關(guān)文章
vue3 elementPlus 表格實現(xiàn)行列拖拽及列檢索功能(完整代碼)
本文通過實例代碼給大家介紹vue3 elementPlus 表格實現(xiàn)行列拖拽及列檢索功能,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10
基于Vue3+WebSocket實現(xiàn)實時文件傳輸監(jiān)控系統(tǒng)
WebSocket是一種在客戶端和服務(wù)器之間進行雙向通信的網(wǎng)絡(luò)協(xié)議,它通過建立持久性的、全雙工的連接,允許服務(wù)器主動向客戶端發(fā)送數(shù)據(jù),本文小編給大家介紹了基于Vue3+WebSocket實現(xiàn)實時文件傳輸監(jiān)控系統(tǒng),需要的朋友可以參考下2025-03-03
詳解vue3.0 的 Composition API 的一種使用方法
這篇文章主要介紹了vue3.0 的 Composition API 的一種使用方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-10-10
antd?vue中,如何在form表單中的自定義組件使用v-decorator
antd?vue中,在form表單中的自定義組件使用v-decorator問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04
解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題
今天小編就為大家分享一篇解決Vue2.0 watch對象屬性變化監(jiān)聽不到的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue+Openlayer中使用select選擇要素的實現(xiàn)代碼
本文通過實例代碼給大家介紹Vue+Openlayer中使用select選擇要素,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2021-08-08

