使用vue-cli3(vue腳手架)搭建項目的步驟 上篇


平時經常會用到,記錄一下!

准備工作 : 環境要求vue cli要求node版本8或者更高(8.10.0+推薦) vue cli3 需要node版本>=8.9, (官方推薦:8.11.0+ )

有node的情況下就可以使用npm進行安裝了

1.打開項目文件夾進入cmd 輸入 npm install -g @vue/cli 或者 yarn global add @vue/cli

2.下載好之后輸入vue create '你的項目名'   回車創建

3.接着就會進入問答環節(選擇一些配置)

    3.1 如果你是第一次使用3.0版本的話,下面的第一個選項是沒有的可以忽略,只會有后面2個選項 (default 是默認配置 , Manually select features 是自己手動選擇)如果選擇default,一直回車執行下去就行了,我選的手動

  

   3.2    需要什么自己選擇(上下箭頭切換 空格選中 )babel:轉換es6語法的這個必須要,typescript暫時沒涉及到,router管理路由的也選上,vuex狀態管理就看自己需不需要用,css pre樣式預處理器這個也加上,linter/Formatter統一代碼風格,最后2個分別是單元測試和端對端測試,一般不會用到。  我隨便選擇了幾個常用的 然后回車確認

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

我不想用歷史模式,所以選的n

  

  3.4 下一步選擇css預處理器 我選的less

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

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

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

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

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

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

 

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

 4.等全部下載完畢輸入cd ‘你的項目名’ 進入你的項目,然后npm run serve就可以啟動項目了

 

5. 可以看下目錄和啟動項目的畫面

                                  

 


免責聲明!

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



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