vue cli 4.0.5 的使用

vue cli 4.0.5 的使用

如今的 vue 腳手架已經升級到4.0的版本了,前兩日vue 剛發佈了3.0版本,我看了一下cli 4 和cli 3 沒什麼區別,既然這樣,就只總結一下vue cli 4 的項目搭建吧,回顧一下。javascript

1. 建立項目

對應的命令:css

npm   create  '項目名 '

2. 手動選擇配置選項

這裏咱們通常選擇手動配置
這裏通常咱們選擇手動配置前端

3.選擇須要的依賴

在這裏插入圖片描述

這裏的話按住空格就是選擇,全選的話就是按住a
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel //轉碼器,能夠將ES6代碼轉爲ES5代碼,從而在現有環境執行。 
( ) TypeScript// TypeScript是一個JavaScript(後綴.js)的超集(後綴.ts)包含並擴展了 JavaScript 的語法,須要被編譯輸出爲 JavaScript在瀏覽器運行
( ) Progressive Web App (PWA) Support// 漸進式Web應用程序
( ) Router // vue-router(vue路由)
( ) Vuex // vuex(vue的狀態管理模式)
( ) CSS Pre-processors // CSS 預處理器(如:less、sass)
( ) Linter / Formatter // 代碼風格檢查和格式化(如:ESlint)
( ) Unit Testing // 單元測試(unit tests)
( ) E2E Testing // e2e(end to end) 測試

  

4. 選擇是否使用history router模式

Vue-Router 利用了瀏覽器自身的hash 模式和 history 模式的特性來實現前端路由(經過調用瀏覽器提供的接口)。 我這裏建議選n。這樣打包出來丟到服務器上能夠直接使用了,後期要用的話,也能夠本身再開起來。 選yes的話須要服務器那邊再進行設置。 Use history mode for router? (Requires proper server setup for index fallback in production) vue

在這裏插入圖片描述

5. 選擇css 預處理器

在這裏插入圖片描述

6. 選擇Eslint 代碼驗證規則

在這裏插入圖片描述

6.2 選擇何時進行檢測

在這裏插入圖片描述

7.選擇單元測試

這個須要根據本身的狀況而定
在這裏插入圖片描述java

8.選擇如何存放配置

這個通常都是獨立放置,這樣後期能夠更方便的更改。在這裏插入圖片描述vue-router

9.選擇是否保存當前的配置

通常我是不保存的,由於根據項目的不一樣,相應的配置也會不一樣
在這裏插入圖片描述vuex

10. 等待建立項目中

在這裏插入圖片描述
在這裏插入圖片描述

11. 成功後就能夠訪問了

在這裏插入圖片描述
在這裏插入圖片描述

相關文章
相關標籤/搜索