建站
咨詢
售后
建站咨詢
新聞中心
使用命令
在一個 Vue CLI 項目中，@vue/cli-service 安裝了一個名為 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者從終端中以 ./node_modules/.bin/vue-cli-service 訪問這個命令。
創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比博興網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式博興網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋博興地區(qū)。費用合理售后完善，10多年實體公司更值得信賴。
這是你使用默認 preset 的項目的 package.json：
{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
}
你可以通過 npm 或 Yarn 調(diào)用這些 script：
npm run serve
# OR
yarn serve
如果你可以使用 npx (最新版的 npm 應(yīng)該已經(jīng)自帶)，也可以直接這樣調(diào)用命令：
npx vue-cli-service serve
提示
你可以通過 vue ui 命令使用 GUI 運行更多的特性腳本。
這里有一個 GUI 的 webpack Analyzer：
vue-cli-service serve
用法：vue-cli-service serve [options] [entry]
選項：
--open 在服務(wù)器啟動時打開瀏覽器
--copy 在服務(wù)器啟動時將 URL 復制到剪切版
--mode 指定環(huán)境模式 (默認值：development)
--host 指定 host (默認值：0.0.0.0)
--port 指定 port (默認值：8080)
--https 使用 https (默認值：false)
vue-cli-service serve 命令會啟動一個開發(fā)服務(wù)器 (基于 webpack-dev-server) 并附帶開箱即用的模塊熱重載 (Hot-Module-Replacement)。
除了通過命令行參數(shù)，你也可以使用 vue.config.js 里的 devServer 字段配置開發(fā)服務(wù)器。
命令行參數(shù) [entry] 將被指定為唯一入口，而非額外的追加入口。嘗試使用 [entry] 覆蓋 config.pages 中的 entry 將可能引發(fā)錯誤。
vue-cli-service build
用法：vue-cli-service build [options] [entry|pattern]
選項：
--mode 指定環(huán)境模式 (默認值：production)
--dest 指定輸出目錄 (默認值：dist)
--modern 面向現(xiàn)代瀏覽器帶自動回退地構(gòu)建應(yīng)用
--target app | lib | wc | wc-async (默認值：app)
--name 庫或 Web Components 模式下的名字 (默認值：package.json 中的 "name" 字段或入口文件名)
--no-clean 在構(gòu)建項目之前不清除目標目錄
--report 生成 report.html 以幫助分析包內(nèi)容
--report-json 生成 report.json 以幫助分析包內(nèi)容
--watch 監(jiān)聽文件變化
vue-cli-service build 會在 dist/ 目錄產(chǎn)生一個可用于生產(chǎn)環(huán)境的包，帶有 JS/CSS/HTML 的壓縮，和為更好的緩存而做的自動的 vendor chunk splitting。它的 chunk manifest 會內(nèi)聯(lián)在 HTML 里。
這里還有一些有用的命令參數(shù)：
- --modern 使用現(xiàn)代模式構(gòu)建應(yīng)用，為現(xiàn)代瀏覽器交付原生支持的 ES2015 代碼，并生成一個兼容老瀏覽器的包用來自動回退。
- --target 允許你將項目中的任何組件以一個庫或 Web Components 組件的方式進行構(gòu)建。更多細節(jié)請查閱構(gòu)建目標。
- --report 和 --report-json 會根據(jù)構(gòu)建統(tǒng)計生成報告，它會幫助你分析包中包含的模塊們的大小。
vue-cli-service inspect
用法：vue-cli-service inspect [options] [...paths]
選項：
--mode 指定環(huán)境模式 (默認值：development)
你可以使用 vue-cli-service inspect 來審查一個 Vue CLI 項目的 webpack config。更多細節(jié)請查閱審查 webpack config。
#查看所有的可用命令
有些 CLI 插件會向 vue-cli-service 注入額外的命令。例如 @vue/cli-plugin-eslint 會注入 vue-cli-service lint 命令。你可以運行以下命令查看所有注入的命令：
npx vue-cli-service help
你也可以這樣學習每個命令可用的選項：
npx vue-cli-service help [command]
緩存和并行處理
- cache-loader 會默認為 Vue/Babel/TypeScript 編譯開啟。文件會緩存在 node_modules/.cache 中——如果你遇到了編譯方面的問題，記得先刪掉緩存目錄之后再試試看。
- thread-loader 會在多核 CPU 的機器上為 Babel/TypeScript 轉(zhuǎn)譯開啟。
Git Hook
在安裝之后，@vue/cli-service 也會安裝 yorkie，它會讓你在 package.json 的 gitHooks 字段中方便地指定 Git hook：
{
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,vue}": [
"vue-cli-service lint",
"git add"
]
}
}
注意
yorkie fork 自 husky 且并與后者不兼容。
配置時無需 Eject
通過 vue create 創(chuàng)建的項目無需額外的配置就已經(jīng)可以跑起來了。插件的設(shè)計也是可以相互共存的，所以絕大多數(shù)情況下，你只需要在交互式命令提示中選取需要的功能即可。
不過我們也知道滿足每一個需求是不太可能的，而且一個項目的需求也會不斷改變。通過 Vue CLI 創(chuàng)建的項目讓你無需 eject 就能夠配置工具的幾乎每個角落。更多細節(jié)請查閱配置參考。
本文名稱：創(chuàng)新互聯(lián)VueCLI教程：VueCLI服務(wù)
轉(zhuǎn)載來于：http://www.5511xx.com/article/ccehsoi.html
