最新版Vue-cli4.x建立項目

本文章針對新手的小夥伴們 , 怎麼用最新版腳手架建立項目以及掌握項目結構和配置等等.

關於舊版本

Vue CLI 的包名稱由 vue-cli 改爲了 @vue/cli。 若是你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你須要先經過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

Node 版本要求

Vue CLI 4.x 須要 Node.js v8.9 或更高版本 (推薦 v10 以上)。你可使用 n，nvm 或 nvm-windows 在同一臺電腦中管理多個 Node 版本。

安裝

npm install -g @vue/cli
# 或者
yarn global add @vue/cli
複製代碼

使用 vue --version 查看vue腳手架版本並確認是否安裝成功。

vue --version
複製代碼

配置

運行如下命令來建立一個新項目

vue create 項目名稱
複製代碼

輸入項目名字,進行項目配置

? Please pick a preset: (Use arrow keys)
  20190907 ([Vue 2] router, less, babel, eslint) // 之前保存的自定義配置項
  Default ([Vue 2] babel, eslint)  // 默認建立Vue2項目
  Default (Vue 3) ([Vue 3] babel, eslint) // 默認建立Vue3項目
❯ Manually select features // 自意義配置項
複製代碼

若是選擇default則會直接建立項目，建立項目包括babel\eslin這些工具，好比Router/Vuex等其餘依賴須要本身手動安裝。

若是選擇Manually select features(手動安裝)則會進入下一步選項：（這裏推薦你們進行手動配置）

? Check the features needed for your project: 
 ◉ Choose Vue version 	// 選擇Vue版本
 ◉ Babel 	// vue項目中廣泛使用es6語法，但有時咱們的項目須要兼容低版本瀏覽器，這時就須要引入babel插件，將es6轉成es5
 ◉ TypeScript 	// typeScript經過添加類型來擴展JavaScript。
 ◯ Progressive Web App (PWA) Support 	// 漸進式Web應用程序（PWA）支持
 ◯ Router 	// 是否使用路由
 ◯ Vuex 	// 是否使用Vuex
 ◯ CSS Pre-processors 	// 是否使用CSS預處理器,好比:less、sass等
❯◉ Linter / Formatter 	// 格式化程序
 ◯ Unit Testing 	// 單元測試
 ◯ E2E Testing	// 端到端
複製代碼

如今項目開發若是用到TypeScript須要選擇以上4個

選擇版本:

? Choose a version of Vue.js that you want to start the project with 
  2.x 
❯ 3.x 
複製代碼

是否使用class風格的組件語法，若是在項目中想要保持使用TypeScript的Class風格的話，能夠選擇y。

Use class-style component syntax? (y/N) 複製代碼

使用Babel與TypeScript一塊兒用於自動檢測的填充:

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpili
ng JSX)? (Y/n) 
複製代碼

ESlint的配置:

Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only     // 只進行報錯提醒
  ESLint + Airbnb config                // 不嚴謹模式
❯ ESLint + Standard config              // 正常模式
  ESLint + Prettier                     // 嚴格模式
  TSLint (deprecated)                   // TypeScript格式驗證工具
複製代碼

校驗時機:

​ 通常都會選擇保存時校驗，好及時作出調整，若是代碼風格和ESLint校驗風格差很少的話，或者比較自信比較帥的狀況下，能夠考慮選擇提交時校驗。惟惟諾諾的我，選擇了第一項。

Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert se
lection)
❯◉ Lint on save // 保存時檢測
 ◯ Lint and fix on commit // 修復和提交時檢測
複製代碼

額外選項:

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files // 存放在專用配置文件中
  In package.json // 存放在package.json中
複製代碼

是否保存當前配置項:

Save this as a preset for future projects? (y/N) 
複製代碼

目錄

|-- node_modules	// 項目須要的依賴包
|-- public              // 靜態資源存儲目錄
|   |-- index.html	// 項目主容器文件
|   |-- favicon.ico	// 項目默認索引圖片
|-- src
|   |-- assets		// 放置一些靜態資源文件，例如圖片、圖標、字體 
|   |-- components	// 公共組件目錄
|   |-- views	// 業務組件目錄
|   |-- App.vue		// 頂層根基路由組件
|   |-- main.js		// 主入口文件
|   |-- router.js	// 路由配置文件
|-- .editorconfig	// 代碼規範配置文件
|-- .eslintrc.js	// eslint代碼規範檢查配置文件
|-- .gitignore		// git上傳須要忽略的文件格式
|-- babel.config.js	// babel配置文件
|-- package-lock.json	// 依賴包版本鎖定文件
|-- package.json	// 項目基本信息配置文件
|-- postcss.config.js	// css預處理器配置文件
|-- vue.config.js	// webpack 配置文件(與webpack.config.js做用一致)
複製代碼

打包相關參數

在package.json中直接配置便可

實時打包運行

npm run serve
複製代碼

物理打包

npm run build
複製代碼

打包同時生成分析報告

./node_modules/.bin/vue-cli-service build --report
複製代碼

瀏覽器相關參數

在vue.config.js中直接配置，例如

module.exports = {
  lintOnSave: true,	// 在保存代碼的時候開啓eslint代碼檢查機制
  devServer: {		// 實時保存、編譯的配置段
    open:true,		// 自動開啓瀏覽器
    port: 12306		// 服務運行端口 
  }
}
複製代碼