Vue-cli3.x 使用教程

官方文檔

安裝與使用

安裝腳手架

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

建立項目

命令行安裝

# 直接建立，項目名稱不能有大寫字母
vue create my-project 
複製代碼

選擇配置方式(默認(一)、自定義(二))，默認方式會直接建立項目，自定義會執行下一步選擇對應配置

配置方法還多是自定義的預設配置

選擇擴展插件，其中幾乎Babel是必須的，其餘的按需添加

使用space空格鍵,選中選項

確認是否使用class-style component syntax(Class風格裝飾器)，history 路由，支持JSX寫法，ESLint標準、什麼時候執行檢測等

選擇eslint、Babel、PostCSS的配置方式

如eslint：選擇是在.eslint.js 仍是package.json的eslintConfig中配置eslint規範

使用舊版方法安裝

3.x 保留了2.x的安裝方式，可使用cli-init以2.x的方式安裝項目

# 使用舊版（2.X）建立
npm install -g @vue/cli-init
# 'vue init'的運行效果與‘vue-cli@2.x’相同
vue init webpack projectname 
複製代碼

圖形界面建立

vue ui # 啓動圖形化界面
複製代碼

建立項目名稱、管理工具等

選擇是默認、自定義設置、從遠程倉庫拉取

第1、第三種選擇後直接建立項目，第二種執行下一步，且功能與配置頁的信息與以前命令行安裝的相同

項目運行

項目目錄結構

項目運行（vue-cli-service命令）

CLI3.x項目默認安裝了@vue/cli-service插件，它安裝了一個名爲 vue-cli-service 的命令，能夠運行、編譯cli3.x項目

{
  "scripts": { // 默認命令
    "serve": "vue-cli-service serve", // 啓動項目
    "build": "vue-cli-service build" // 編譯項目
  }
}
npm run serve
yarn serve
npx vue-cli-service serve
複製代碼

vue-cli-service serve運行項目

該命令會啓動一個基於webpack-dev-server的附帶模塊熱重載的開發服務器 在vue.config.js的 devServer 配置服務器端口等信息

用法：vue-cli-service serve [options] [entry]
options選項：
--open    在服務器啓動時打開瀏覽器
--copy    在服務器啓動時將 URL 複製到剪切版
--mode    指定環境模式 (默認值：development)
--host    指定 host (默認值：0.0.0.0)
--port    指定 port (默認值：8080)
--https   使用 https (默認值：false)

emtry入口：
  [entry] 將被指定爲惟一入口，而非額外的追加入口
  不可覆蓋覆蓋 config.pages 中的 entry
複製代碼

vue-cli-service build編譯項目

該命令會在 outputDir 目錄產生一個可用於生產環境的項目包。包的壓縮方式有webpack的配置決定

用法：vue-cli-service build [options] [entry|pattern]
選項：
--mode        指定環境模式 (默認值：production)
--dest        指定輸出目錄 (默認值：dist)
--modern      使用現代模式構建應用，爲現代瀏覽器交付原生支持的 ES2015 代碼，並生成一個兼容老瀏覽器的包用來自動回退。
--target      app | lib | wc | wc-async(默認值：app)容許你將項目中的任何組件以一個庫或 Web Components 組件的方式進行構建。更多細節請查閱構建目標。
--name        庫或 Web Components 模式下的名字 (默認值：package.json 中的 "name" 字段或入口文件名)
--no-clean    在構建項目以前不清除目標目錄
--report      會根據構建統計生成報告,生成 report.html 以幫助分析包內容模塊的大小
--report-json 會根據構建統計生成報告生成 report.json 以幫助分析包內容模塊的大小
--watch       監聽文件變化
複製代碼

vue-cli-service inspect

用來審查Vue CLI項目的webpack config

用法：vue-cli-service inspect [options] [...paths]
選項：
  --mode    指定環境模式 (默認值：development)
複製代碼

查看命令幫助信息

npx vue-cli-service help [command]
複製代碼

環境變量設置[參數配置]

模式

cli3新增模式概念，每一個模式在項目中都有對應的配置文件，項目啓動時，對應的文件就會加載，與環境變量不一樣，一個模式能夠包括多個環境變量

• Vue CLI 項目默認有三個模式：
  • development 模式用於 vue-cli-service serve
  • production 模式用於 vue-cli-service build 和 vue-cli-service test:e2e
  • test 模式用於 vue-cli-service test:unit
• 模式須要在啓動項目時使用--mode指定

NODE_ENV=development npm run serve --mode mymode # 模式包含多個環境變量
複製代碼

• 每一個模式有多個環境變量，cli3.x爲模式與環境變量指定了一個.env配置文件

.env # 全部環境
.env.mode # mode模式加載的配置文件[優先級高於.env]
.env.mode.development # mode模式下，development環境所加載的配置文件[優先級最高]
複製代碼

• .env文件詳細信息
  • 這些文件是用來代替config目錄的
  • 以VUE_APP_開頭的變量能夠再代碼中經過process.env訪問，其餘的變量不可訪問
  • process.env始終含有兩個特殊變量NODE_ENV和BASE_URL

3.x版本的config目錄雖然刪除，可是若是不習慣.env的方式，能夠不設置任何模式，只指定NODE_ENV，按2.x的config方法配置參數

模式與環境變量混合使用

[cli3.6]webpack的build代碼壓縮默認不開啓，須要設置環境變量爲production纔會開啓

• 若是須要在線上測試環境啓用代碼壓縮，可使用模式(mode)管理代碼中的環境

在每一個mode的.env文件中設置特殊變量標識代碼環境，以便在代碼中判斷當前環境

• 每一個mode設置local和production兩種環境，local本地運行開發，production用來build代碼線上運行

production環境啓用了不少編譯相關的優化，同時這些優化會致使開發時代碼運行變慢，驗證影響開發效率，因此須要在開發時設置不一樣的環境