使用vue cli4.x搭建vue項(xiàng)目的過程詳解

更新時(shí)間：2020年05月08日 15:10:17 作者：MissRen

這篇文章主要介紹了使用vue cli4.x搭建vue項(xiàng)目的過程，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

cli-4.x已經(jīng)發(fā)布好久了，斟酌了好久，還是決定將原來的cli-2.x升級(jí)到4.x,詳細(xì)的升級(jí)過程可以戳這里

1、創(chuàng)建項(xiàng)目 vue create vuetest

2、選擇配置方式

? Please pick a preset: (Use arrow keys) ☜(使用箭頭鍵)
> default (babel, eslint)   ☜(使用默認(rèn)的配置，會(huì)安裝babel和eslint)
 Manually select features  ☜(手動(dòng)配置)

這里我選擇的是手動(dòng)配置（使用↑ ↓箭頭切換，Enter確認(rèn)，箭頭切換失效可以戳這里），當(dāng)然如果你之前有保存過配置模板的話，在這里還會(huì)有第三個(gè)選項(xiàng)就是你之前保存過的（下面會(huì)說到），因?yàn)橄胂肱渲玫牟皇呛芏?，所以?xí)慣了每次都是手動(dòng)配置

3、手動(dòng)配置項(xiàng)選擇

通過↑ ↓ 箭頭選擇你要配置的項(xiàng)，按空格是選中，按 a 是全選，按 i 是反選 (以下是每一個(gè)選項(xiàng)的詳細(xì)解釋)

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel     ☜(轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼)
 ( ) TypeScript    ☜( js的超集，強(qiáng)類型語言)
 ( ) Progressive Web App (PWA) Support ☜(漸進(jìn)式Web應(yīng)用程序)
 ( ) Router    ☜(vue-router（vue路由）)
 ( ) Vuex     ☜(vuex（vue的狀態(tài)管理模式）)
 ( ) CSS Pre-processors   ☜(CSS 預(yù)處理器（如：less、sass）)
 (*) Linter / Formatter   ☜(代碼風(fēng)格檢查和格式化（如：ESlint）)
 ( ) Unit Testing    ☜(單元測(cè)試)
 ( ) E2E Testing    ☜(集成測(cè)試)

根據(jù)自己項(xiàng)目的實(shí)際需求選擇合適的配置

我這里是全選了這里是后面會(huì)出現(xiàn)的配置詳細(xì)信息

?Use class-style component syntax? (Y/n)： ☜(是否使用babel做轉(zhuǎn)義)

---------------------------------------------------------------------------------------
?Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? ☜(使用Babel與TypeScript一起用于自動(dòng)檢測(cè)的填充)

---------------------------------------------------------------------------------------
?Use history mode for router? (Requires proper server setup for index fallback in production) ☜(路由模式)

--------------------------------------------------------------------------------------
?Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ☜(CSS編譯器)
> Sass/SCSS (with dart-sass) ☜(保存后編譯)
 Sass/SCSS (with node-sass) ☜(實(shí)時(shí)編譯)
 Less
 Stylus
----------------------------------------------------------------------------------------
?Pick a linter / formatter config: (Use arrow keys) ☜(選擇語法檢查規(guī)范)
> ESLint with error prevention only   ☜(只進(jìn)行報(bào)錯(cuò)提醒)
 ESLint + Airbnb config    ☜(不嚴(yán)謹(jǐn)模式)
 ESLint + Standard config    ☜(正常模式)
 ESLint + Prettier     ☜(嚴(yán)格模式)
 TSLint (deprecated)    ☜(typescript格式驗(yàn)證工具)
----------------------------------------------------------------------------------------
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) ☜(選擇什么時(shí)候進(jìn)行代碼規(guī)則檢測(cè))
>(*) Lint on save     ☜(保存就檢測(cè))
( ) Lint and fix on commit    ☜(fix和commit時(shí)候檢測(cè))
-----------------------------------------------------------------------------------------
? Pick a unit testing solution
>(*) Mocha + Chai  ☜(mocha靈活,只提供簡(jiǎn)單的測(cè)試結(jié)構(gòu)，如果需要其他功能需要添加其他庫(kù)/插件完成。必須在全局環(huán)境中安裝)
( ) Jest   ☜(安裝配置簡(jiǎn)單，容易上手。內(nèi)置Istanbul，可以查看到測(cè)試覆蓋率，相較于Mocha:配置簡(jiǎn)潔、測(cè)試代碼簡(jiǎn)潔、易于和babel集成、內(nèi)置豐富的expect)
------------------------------------------------------------------------------------------
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) ☜(選擇如何存放配置測(cè)) 
> In dedicated config files ☜(獨(dú)立文件放置) 
 In package.json  ☜(放package.json里) 
 -----------------------------------------------------------------------------------------
 ? Save this as a preset for future projects? (y/N) ☜(保存上述配置，保存后下一次可直接根據(jù)上述配置生成項(xiàng)目，就是上面提到的第三種情況)

到這里配置就基本完成了，等待項(xiàng)目加載各種包...

加載完成后，進(jìn)入項(xiàng)目， npm run serve 啟動(dòng)就可以了...

ps：下面看下vue-cli2.9.6升級(jí)vue-cli4.x相關(guān)問題

最近公司想要進(jìn)行技術(shù)升級(jí)，因?yàn)橐咔榈脑颍以诩谊P(guān)了兩個(gè)多月（嗚嗚~），來公司他們都已經(jīng)工作有一段時(shí)間，于是我只能自己搞了，先看一下我的環(huán)境