vue-cli3腳手架安裝方法
1.vue腳手架的使用需要node.js支持,所以需要下載安裝node.js ,可以到node.js官網(wǎng)下載node.js https://nodejs.org/zh-cn/,可以根據(jù)個(gè)人需要下載版本,推薦多數(shù)用戶使用(LTS)
2.安裝很簡(jiǎn)單,一串點(diǎn)點(diǎn)點(diǎn)下一步就完事了,安裝路徑根據(jù)自己愛喜好來(lái)設(shè)置
3.安裝完成后 win+R 輸入cmd 查看安裝版本

4.npm 安裝第三方包時(shí)速度過(guò)慢問(wèn)題 npm config set registry=http://registry.npm.taobao.org/
網(wǎng)上也看也有推薦使用安裝 cnmp npm install cnpm-g--registry=https://registry.npm.taobao.org 根據(jù)個(gè)人喜好選擇吧,第二種安裝成功率高,第二種就是把npm 替換成 cnpm使用

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


到這里就恭喜你安裝成功了
6 vue -V 查看版本

7 現(xiàn)在開始通過(guò)腳手架創(chuàng)建項(xiàng)目,我把項(xiàng)目創(chuàng)建在E盤的test文件夾下,這里可以根據(jù)個(gè)人喜好存放位置,首先通過(guò)dos命令定位到該文件夾下

8 然后創(chuàng)建項(xiàng)目,vue create myvue 回車創(chuàng)建項(xiàng)目 myvue是項(xiàng)目名稱,可以自定義項(xiàng)目名字,然后開始進(jìn)入一系列問(wèn)答環(huán)節(jié) ,default是默認(rèn)配置,下面是手動(dòng)選擇配置我選擇第二種,向下的箭頭選中(上下箭頭切換)回車

9 babel:轉(zhuǎn)換es6語(yǔ)法的這個(gè)必須要,typescript暫時(shí)沒涉及到,router管理路由的也選上,vuex狀態(tài)管理就看自己需不需要用,css pre樣式預(yù)處理器這個(gè)也加上,linter/Formatter統(tǒng)一代碼風(fēng)格,最后2個(gè)分別是單元測(cè)試和端對(duì)端測(cè)試,一般不會(huì)用到

10接著問(wèn)答題來(lái)了:你的路由使用歷史模式嗎? 路由模式分為Hash模式 History(歷史)模式 Abstract模式 三種 hash模式最明顯的特點(diǎn)就是url上會(huì)帶有#號(hào), History歷史模式的url就跟正常的訪問(wèn)地址一樣,此處我選擇yes,
10.1下一步選擇css預(yù)處理器 我選的 sass/scsss
10.2選擇哪個(gè)自動(dòng)化代碼格式化檢測(cè) (語(yǔ)法檢測(cè)工具)就是可以檢測(cè)出你代碼中潛在的問(wèn)題,保證寫出的代碼語(yǔ)法正確,風(fēng)格統(tǒng)一。
ESLint with error prevention only(只檢測(cè)錯(cuò)誤) ESLint + Airbnb config 獨(dú)角獸公司的Airbnb,有人評(píng)價(jià)說(shuō)“這是一份最合理的javascript的編碼規(guī)范”它幾乎涵蓋了js的各個(gè)方面
ESLint + Standard config standardjs是一份強(qiáng)大的js編碼規(guī)范,自帶linter和自動(dòng)代碼糾正,沒有配置,自動(dòng)格式化代碼,可在編碼早起發(fā)現(xiàn)規(guī)范問(wèn)題和低級(jí)錯(cuò)誤
ESLint + Prettier Prettier 作為代碼格式化工具,能夠統(tǒng)一整個(gè)團(tuán)隊(duì)的代碼風(fēng)格 我選的ESLint + Standard config
10.3選擇語(yǔ)法檢查方式 Lint on save (保存就檢測(cè)) Lint and fex on commit ( 用戶提交文件到git的時(shí)候檢測(cè) )我選的Lint on save
10.4就是問(wèn)你babel,postcss,eslint這些配置文件放哪?// in dedicated config files(在專用配置文件中,就是單獨(dú)管理) in package.json(放在package.json里)我選的in dedicated config files
10.5是否將以上這些保存為未來(lái)項(xiàng)目的預(yù)配置? //如果你選擇y那么下次搭建項(xiàng)目是就會(huì)出現(xiàn)你這一次配置的選項(xiàng)。 我選擇n

11安裝成功



項(xiàng)目目錄結(jié)構(gòu)

到此這篇關(guān)于vue-cli3腳手架安裝的文章就介紹到這了,更多相關(guān)vue-cli3腳手架安裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ElementUI?el-table?樹形數(shù)據(jù)的懶加載的實(shí)現(xiàn)
當(dāng)面對(duì)大量數(shù)據(jù)時(shí),一次性加載所有數(shù)據(jù)可能會(huì)導(dǎo)致性能問(wèn)題,我們可以實(shí)現(xiàn)樹形數(shù)據(jù)的懶加載,本文主要介紹了ElementUI?el-table?樹形數(shù)據(jù)的懶加載,感興趣的可以了解一下2024-06-06
vue項(xiàng)目代碼格式規(guī)范設(shè)置參考指南
這篇文章主要給大家介紹了關(guān)于vue3簡(jiǎn)單封裝input組件和統(tǒng)一表單數(shù)據(jù)的相關(guān)資料,不管你學(xué)習(xí)哪一門編程語(yǔ)言,相信大家都會(huì)略化這一部分,需要的朋友可以參考下2022-05-05
vue實(shí)現(xiàn)無(wú)限消息無(wú)縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)無(wú)限消息無(wú)縫滾動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Vue自定義省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue自定義省市區(qū)三級(jí)聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
關(guān)于vue.js發(fā)布后路徑引用的問(wèn)題解決
最近在vue.js項(xiàng)目發(fā)布后發(fā)現(xiàn)了一個(gè)關(guān)于路徑的問(wèn)題,發(fā)現(xiàn)網(wǎng)上關(guān)于這個(gè)的資料較少,所以給大家總結(jié)下,下面這篇文章主要給大家介紹了如何解決關(guān)于vue.js發(fā)布后路徑引用的問(wèn)題,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-08-08
vue?this.$router.go(-1);返回時(shí)如何帶參數(shù)
這篇文章主要介紹了vue?this.$router.go(-1);返回時(shí)如何帶參數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
Element的Pagination分頁(yè)sync問(wèn)題小結(jié)
本文主要介紹了Element的Pagination分頁(yè)sync問(wèn)題小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07

