vue-cli3腳手架安裝


參考文章鏈接  https://www.cnblogs.com/Jmosquito/p/11328288.html

 

1.vue腳手架的使用需要node.js支持,所以需要下載安裝node.js ,可以到node.js官網下載node.js https://nodejs.org/zh-cn/ ,可以根據個人需要下載版本,推薦多數用戶使用(LTS)

2.安裝很簡單,一串點點點下一步就完事了,安裝路徑根據自己愛喜好來設置

3.安裝完成后 win+R 輸入cmd 查看安裝版本

 4.npm 安裝第三方包時速度過慢問題     npm config set registry=http://registry.npm.taobao.org/

網上也看也有推薦使用安裝 cnmp           npm install cnpm -g --registry=https://registry.npm.taobao.org   根據個人喜好選擇吧,第二種安裝成功率高,第二種就是把npm 替換成 cnpm使用

 

 

 

5 全局安裝 vue-cli ,在命令提示窗口執行:npm install -g @vue/cli  或者第二種 cnpm install -g @vue/cli

 

 

 

 

 

 到這里就恭喜你安裝成功了

6 vue -V 查看版本  

 

 

 

 

 7 現在開始通過腳手架創建項目,我把項目創建在E盤的test文件夾下,這里可以根據個人喜好存放位置,首先通過dos命令定位到該文件夾下

 

 

 

 

 

8 然后創建項目,vue create myvue 回車創建項目  myvue是項目名稱,可以自定義項目名字,然后開始進入一系列問答環節 ,default是默認配置,下面是手動選擇配置我選擇第二種,向下的箭頭選中(上下箭頭切換)回車

 

 

 

 

 9   babel:轉換es6語法的這個必須要,typescript暫時沒涉及到,router管理路由的也選上,vuex狀態管理就看自己需不需要用,css pre樣式預處理器這個也加上,linter/Formatter統一代碼風格,最后2個分別是單元測試和端對端測試,一般不會用到

 

 

 

 10 接着問答題來了:你的路由使用歷史模式嗎? 路由模式分為Hash模式 History(歷史)模式 Abstract模式 三種  hash模式最明顯的特點就是url上會帶有#號,  History歷史模式的url就跟正常的訪問地址一樣,此處我選擇yes,

    10.1  下一步選擇css預處理器 我選的 sass/scsss

  10.2 選擇哪個自動化代碼格式化檢測 (語法檢測工具)就是可以檢測出你代碼中潛在的問題,保證寫出的代碼語法正確,風格統一。

ESLint with error prevention only(只檢測錯誤)         ESLint + Airbnb config 獨角獸公司的Airbnb,有人評價說“這是一份最合理的javascript的編碼規范”它幾乎涵蓋了js的各個方面

ESLint + Standard config    standardjs是一份強大的js編碼規范,自帶linter和自動代碼糾正,沒有配置,自動格式化代碼,可在編碼早起發現規范問題和低級錯誤

ESLint + Prettier    Prettier 作為代碼格式化工具,能夠統一整個團隊的代碼風格   我選的 ESLint + Standard config

   10.3 選擇語法檢查方式  Lint on save (保存就檢測)   Lint and fex on commit ( 用戶提交文件到git的時候檢測 ) 我選的Lint on save  

   10.4 就是問你babel,postcss,eslint這些配置文件放哪?// in dedicated config files(在專用配置文件中,就是單獨管理) in package.json(放在package.json里)我選的in dedicated config files

   10.5 是否將以上這些保存為未來項目的預配置? //如果你選擇y那么下次搭建項目是就會出現你這一次配置的選項。   我選擇n

 

 11安裝成功

 

 

 

 

 

 項目目錄結構

 


免責聲明!

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



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