vue腳手架3.x完整版


目前自己已知的搭建方式有兩

  首先先下載vue3.x/cli,指令是npm -g @vue/cli,然后用vue -V查看是否安裝好,以及安裝的版本,這里就不截圖了,比較簡單。下面講分別說說是哪兩種方法

 

  • 第一種交互式命令vue create my-perject回車后會出現以下選項

 

 

前面是我創建后保存的兩種狀態 、接着default是自動安裝方式,Manually最后一個選項是手動選着安裝方式。

上下鍵移動選擇最后一種回車。

這是一個多選題,選着你需要安裝的依賴,我的是這樣選的,vuex可以選着需要使用的時候再安裝

空格選擇,然后回車確定。

 

 

 接下來會問你是否選擇使用安裝history路由,一般不推薦這個路由,選擇n就好了,默認安裝hisha模式路由

 

接下來是單選題了,選擇eslint模式,選擇中間那個標准模式

 

 

 接下來會問你什么時候使用eslint校驗、默認選擇第一項

 

 

接着會問你以上的工具選着什么方式創建、第一種選擇單獨的文件、第二種選擇統一放在webpack文件中,推薦選擇第一種單獨放置。

 

 

 最后問你是否把以上全部的選擇保存模板,供后續方便直接選擇使用,選擇yes,后面需要自己自定義名字最后直接回車安靜等待安裝就好了。

 

 安裝好后,有兩個指令,第一個是選擇cd項目中即可啟動。

 

 

 

 第一種方法搭建腳手架就成功了,下面來說說第二種的搭建方式、

 

  • 第二種搭建腳手架方式圖形化使用vue ui

 

 回車后會彈出一個以下網頁,比較新鮮吧!

 

 點擊創建,進入項目的創建面板、如下圖所示,鼠標懸停在綠色icon上面都會有提示的,不改路徑就直接點擊創建新項目

 

 

 

 只需修改填寫兩處、一個是項目名字、一個是git初始化項目信息。然后直接下一步

 

 接下來的選項不用多說了吧,問你創建項目用以前保存的模板,還是手動創建。這里手動示范一下。

 

這里選擇你要安裝的工具、跟上面第一種的一樣、后面的使用配置文件要勾選、把配置單獨放在文件中、勾選后選擇下一步就好了

 

 第一個不用管它、后面詢問你選擇使用selint、還是選擇標准的就好

 

 最后點擊創建項目就好了,然后會有一個彈框、問你是否選擇保存以上選擇配置,看自己願意就保存,建個名字

 

 搭建好腳手架后,左側會有一個類似菜單欄的東西、里面可以查看一些已經安裝好的插件什么的、新增一些插件刪除一些都可以。還有依賴什么的。

 

 最后一個任務框、里面可以進行項目本地啟動。或者打包、項目啟動,點運行右側有個圓的進度圈、

 

 啟動后能看到中間空白處的總資源多大、各占多大空間等、然后點擊右側的就啟動app可以打開你的本地web頁面了。

 

 

 編譯后點擊輸出、會看到它一些輸出的結果

 

 

 

最后、最后有需要完善的補充的請指教,然后還有不明白的可以加我qq問我2224833248

覺得這篇文章總體寫的還算詳細,對自己有幫助的 ,還請賞賜小生一些茶水費什么的。

小生在此感激不盡,后面會更加努力!O(∩_∩)~

 

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM