第9章 VueCLI部署項目

第9章

VueCLI部署項目9.1.1

什么是VueCLI

CLI-全局安裝,提供vue命交互式項目腳手架CLI服務一零配置原型開發局部依賴,構建于webpack之上CLI插件-可升級的運行時依賴以@vue/cli-plugin-開頭,提供可選功能9.1.2安裝VueCLI9.1.2npminstall-g@vue/cliyarnglobaladd@vue/cli升級驗證安裝(npmupdateg@vue/cli)(vue--version)項目內升級使用vueupgradevuebuildvuecreatevueserve零配置啟動開發服務器,適合快速原型開發零配置構建生產環境包創建完整新項目-p使用預設-d默認預設--bare省略新手引導-O打開瀏覽器-C復制URL-t指定構建目標-d指定輸出目錄9.1.2創建HelloWorld項目9.1.4了解VueCLI項目結構node_modules/-第三方依賴用接杵個約分鞋src目錄是開發核心區域,包含入口文件main.js、根組件App.vue及自定義組件public/-模板與資源文件主體極文件hello-world/src/-主體代碼(assets、components、App.vue、main.js)第件文件配置文件-packagejson、babel.configjs等9.2.1了解webpack模塊依賴圖Dependency入口Entry輸出Loader轉換BundleGraphwebpack是靜態模塊打包工具,構建內部依賴圖,映射項目所需每個模塊,生成一個或多個打包文件插件PluginsLoader對象形式函數形式confgureWebpack:{plugins:[..]configureWebpack:config{..}對象會被webpack-merge合并到最終配置中可基于環境變量條件修改配置注意:部分webpack選項需通過vue.config.js間接修改,如outputDir代替output.path9.2.2配置webpack-confgureWebpack修改Loader選項替換Loader修改插件選項config.module.rule()svgRule.uses.clear()后添加新loaderconfig.plugin()..tap(args=>{).use().tap()VueCLI使用webpack-chain維護內部配置,提供具名的loader規則和插件定義9.2.2配置webpack-confgureWebpack審查webpack配置vueinspect>output.jsvueinspect--rulevuevueinspect--pluginhtmlvueinspect--rules以文件方式使用配置審查特定規則路徑:node_modules/@vue/cli-service/webpack.config.js,供IDE或CLI工具訪問通過--rule參數指定規則名稱查看詳細配置9.2.2配置webpack-confgureWebpack9.3構建與部署VueCLI項目構建目標通過-target選項指定構建目標,默認應用模式:HTML注入資源、第三方庫獨立分包、小資源內聯