vue-cli3學習整理----基礎

核心

CLI（@vue/cli）：是一個全局安裝的npm包

提供命令：vue vue create //快速建立新項目的腳手架 vue serve //構建新想法的原型 vue ui //圖形化界面

 

CLI服務（@vue/cli-service）：是一個局部安裝的npm包，是一個開發環境依賴包

//構建於 webpack 和 webpack-dev-server 之上，包含：
1、加載其它CLI插件的核心服務 2、優化過的內部的webpack配置 三、提供命令：serve、build、inspect

 

CLI插件（@vue-cli-plugin-[內建插件] 或 vue-cli-plugin-[社區插件]）：提供可選功能的npm包

//在項目內部運行 vue-cli-service 命令時，自動解析並加載 package.json 中的全部CLI插件
vue add [插件名稱]

 

CLI（@vue/cli）

須要額外安裝全局擴展 @vue/cli-serivce-global

//vue命令能夠對 單個*.vue文件進行快速原型開發
 vue serve [options] [entry] 會在當前目錄自動推導入口文件（入口文件能夠是：main.js、index.js、App.vue、app.vue中的一個），也能夠自定義入口文件 vue build [options] [entry] 生成一個用於部署的生產環境的包

 若是要使用舊版本（vue-cli2）：全局安裝一個橋接工具

npm install -g @vue/cli-init

 

CLI插件

插件能修改webpack的內部配置，也能夠向vue-cli-service注入命令

vue add @vue/eslint //會解析爲完整的包名 @vue/cli-plugin-eslint
//等價於
vue add @vue/cli-plugin-eslint

 

若是插件不帶 @vue，則會安裝第三方插件

vue add apollo //安裝並調用 vue-cli-plugin-apollo

vue invoke [插件名稱] //若是插件已安裝，則跳過安裝過程，只調用生成器

 

插件與package.json的設置

{ "vuePlugins": { 　　 "resolveFrom": ".config",//加載其它package.json裏的插件，若有個文件：.config/package.json 　　"service":["my-commands.js"],//直接訪問插件API,不須要建立完整插件 　　"ui":["my-ui.js"]//添加像UI插件同樣工做的文件 } }

 

CLI Preset

在使用 vue create 建立項目的過程當中，保存的preset會放在home目錄下的 .vuerc 配置文件中

{ "useConfigFiles": true, "plugins": { "@vue/cli-plugin-eslint":{
      　　  "version":"^3.0.0",//插件版本管理
        　　"prompts":true//在項目建立時，插件安裝容許注入命令提示 } }, //能夠爲集成工具添加配置
  //根據 useConfigFiles 的值，configs的配置會被合併到 package.json或相應的配置文件中
  //如：useConfigFiles值爲true時，configs的值會被合併到vue.config.js中
  "configs": { "vue": {...}, "postcss": {...}, "eslintConfig": {...}, "jest": {...} } }

 

使用遠程Preset

vue create --preset [遠程插件名稱] [項目名稱] //如 vue create --preset username/repo my-project

//從私有repo獲取，確保使用 --clone vue create --preset gitlab:username/repo --clone my-project vue create --preset bitbucket:username/repo --clone my-project

 

加載本地Preset

// ./my-preset 應當是一個包含 preset.json 的文件夾 vue create --preset ./my-preset my-project //或者，直接使用當前工做目錄下的 json 文件： vue create --preset my-preset.json my-project

 

CLI服務

@vue/cli-service 安裝了一個名爲 vue-cli-service 的命令

vue-cli-service serve [options] [entry]//啓動服務
vue-cli-service build [options] [entry|]//生成用於生產環境的包
vue-cli-service inspect [options] [...paths] //審查項目的webpack config

 啓動服務的多種方式：

./node_modules/.bin/vue-cli-service //終端直接調用
npx vue-cli-service serve //npx直接調用