現(xiàn)在的 vue 腳手架已經(jīng)升級(jí)到4.0的版本了刷允,前兩日vue 剛發(fā)布了3.0版本悬襟,我看了一下cli 4 和cli 3 沒什么區(qū)別,既然這樣,就只總結(jié)一下vue cli 4 的項(xiàng)目搭建吧,回顧一下闯冷。
1. 創(chuàng)建項(xiàng)目
對(duì)應(yīng)的命令:vue create 項(xiàng)目名
2. 手動(dòng)選擇配置選項(xiàng)
這里我們一般選擇手動(dòng)配置
這里一般我們選擇手動(dòng)配置
3.選擇需要的依賴
在這里插入圖片描述
這里的話按住空格就是選擇,全選的話就是按住a
? 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代碼版姑,從而在現(xiàn)有環(huán)境執(zhí)行。
( ) TypeScript// TypeScript是一個(gè)JavaScript(后綴.js)的超集(后綴.ts)包含并擴(kuò)展了 JavaScript 的語(yǔ)法迟郎,需要被編譯輸出為 JavaScript在瀏覽器運(yùn)行
( ) 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è)試(unit tests)
( ) E2E Testing // e2e(end to end) 測(cè)試
4. 選擇是否使用history router模式
Vue-Router 利用了瀏覽器自身的hash 模式和 history 模式的特性來實(shí)現(xiàn)前端路由(通過調(diào)用瀏覽器提供的接口)。 我這里建議選n宪肖。這樣打包出來丟到服務(wù)器上可以直接使用了表制,后期要用的話健爬,也可以自己再開起來。 選yes的話需要服務(wù)器那邊再進(jìn)行設(shè)置夫凸。Use history mode for router? (Requires proper server setup for index fallback in production)
選擇是否使用history router模式
5. 選擇css 預(yù)處理器
選擇css 預(yù)處理器
6. 選擇Eslint 代碼驗(yàn)證規(guī)則
選擇Eslint 代碼驗(yàn)證規(guī)則
6.2 選擇什么時(shí)候進(jìn)行檢測(cè)
選擇什么時(shí)候進(jìn)行檢測(cè)
7.選擇單元測(cè)試
這個(gè)需要根據(jù)自己的情況而定
選擇單元測(cè)試
8.選擇如何存放配置
這個(gè)一般都是獨(dú)立放置浑劳,這樣后期可以更方便的更改。選擇如何存放配置
9.選擇是否保存當(dāng)前的配置
一般我是不保存的夭拌,因?yàn)楦鶕?jù)項(xiàng)目的不同魔熏,相應(yīng)的配置也會(huì)不同
選擇是否保存當(dāng)前的配置
10. 等待創(chuàng)建項(xiàng)目中
等待創(chuàng)建項(xiàng)目中
創(chuàng)建成功
11. 成功后就可以訪問了
在這里插入圖片描述
在這里插入圖片描述