webstorm建立vue-cli腳手架的傻瓜式教程
webstorm 文件 -> new -> project
1、盡量不要勾選 Use the default project setup (babel, eslint) 默認(rèn)建立的項(xiàng)目好多的配置不全，后期再裝很麻煩。
2、點(diǎn)擊 create 后出現(xiàn)以下選項(xiàng)，按鍵盤(pán)上下鍵選擇默認(rèn)（default）還是手動(dòng)（Manually），如果選擇default，一路回車(chē)執(zhí)行下去就行了（注：現(xiàn)在vue-cli3.0默認(rèn)使用yarn下載），這里我選擇手動(dòng)
3、選擇配置，這時(shí)你會(huì)看見(jiàn)一些選項(xiàng)，你要集成什么就選就行了，我這里選個(gè)我比較常用的（注：空格鍵是選中與取消，A鍵是全選），這里有些選項(xiàng)可能看不見(jiàn)，移動(dòng)上下鍵也不行，需要將選項(xiàng)邊框網(wǎng)上拉才可以顯示全。
4、選擇合適的 vue.js 版本開(kāi)始這個(gè)項(xiàng)目，這里我選 3.x
5、是否使用babel做轉(zhuǎn)義 yes
6、是否使用class風(fēng)格的組件語(yǔ)法 yes
7、是否使用history模式
8、選擇預(yù)處理的模式 這里我選 dart-sass ，與 node-sass 區(qū)別
- node-sass 是用 node(調(diào)用 cpp 編寫(xiě)的 libsass)來(lái)編譯 sass；
dart-sass 是用 drat VM 來(lái)編譯 sass；node-sass是自動(dòng)編譯實(shí)時(shí)的，dart-sass需要保存后才會(huì)生效 - 推薦 dart-sass 性能更好（也是 sass 官方使用的），而且 node-sass 因?yàn)閲?guó)情問(wèn)題經(jīng)常裝不上
9、Pick a linter / formatter config: (Use arrow keys)：選擇語(yǔ)法檢測(cè)規(guī)范 這里我選擇 ESLint +Prettier
10、保存就檢測(cè) 和 fix和commit時(shí)候檢查 這里我選擇第一個(gè)
11、放獨(dú)立文件夾 與 放 package.json 。這里看自己喜歡哪個(gè)，這里我選的是 放獨(dú)立文件夾
12、是否記錄一下以便下次繼續(xù)使用這套配置 .鍵入N不記錄，如果鍵入Y需要輸入保存名字
13、靜靜等待完成即可，如果時(shí)間比較長(zhǎng)的話你可以去睡一覺(jué)。直到頁(yè)面出現(xiàn) Done 你就可以起來(lái)搬磚了。
到此這篇關(guān)于webstorm建立vue-cli腳手架的傻瓜式教程的文章就介紹到這了,更多相關(guān)webstorm建立vue-cli腳手架內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue2.0開(kāi)發(fā)實(shí)踐總結(jié)之疑難篇
這篇文章主要為大家總結(jié)了vue2.0開(kāi)發(fā)實(shí)踐的疑難,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vite打包優(yōu)化分片打包依賴(lài)包,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue js with語(yǔ)句原理及用法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
這篇文章主要為大家介紹了Vue新增內(nèi)置組件的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
vue 路由視圖 router-view嵌套跳轉(zhuǎn)的實(shí)現(xiàn)
這篇文章主要介紹了vue 路由視圖 router-view嵌套跳轉(zhuǎn)，主要實(shí)現(xiàn)的內(nèi)容有制作一個(gè)登錄頁(yè)面，跳轉(zhuǎn)到首頁(yè)，首頁(yè)包含菜單欄、頂部導(dǎo)航欄、主體，標(biāo)準(zhǔn)的后臺(tái)網(wǎng)頁(yè)格式，菜單點(diǎn)擊顯示不同的頁(yè)面，感興趣的小伙伴請(qǐng)參考下面文章內(nèi)容2021-09-09
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了vue項(xiàng)目Luckysheet的使用,目前Luckysheet不支持使用npm安裝包，所以只能使用CDN引入依賴(lài)，在vue項(xiàng)目的public/index.html文件里引入即可，本文通過(guò)示例代碼給大家詳細(xì)介紹，需要的朋友可以參考下2022-08-08
利用vue-i18n實(shí)現(xiàn)多語(yǔ)言切換效果的方法
這篇文章主要給大家介紹了關(guān)于利用vue-i18n實(shí)現(xiàn)多語(yǔ)言切換效果的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue-i18n具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue.js實(shí)現(xiàn)插入數(shù)值與表達(dá)式的方法分析
這篇文章主要介紹了vue.js實(shí)現(xiàn)插入數(shù)值與表達(dá)式的方法,結(jié)合實(shí)例形式分析了vue.js常見(jiàn)的3種插入數(shù)值實(shí)現(xiàn)方式,并總結(jié)了vue.js插值與表達(dá)式相關(guān)使用技巧,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了Vue2中Element?UI表單的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03