[{"data":1,"prerenderedAt":400},["ShallowReactive",2],{"page-\u002Fvue\u002Fcli和脚手架":3},{"id":4,"title":5,"body":6,"description":392,"extension":393,"meta":394,"navigation":395,"path":396,"seo":397,"stem":398,"__hash__":399},"content\u002FVue\u002Fcli和脚手架.md","Cli和脚手架",{"type":7,"value":8,"toc":374},"minimark",[9,17,25,32,39,55,62,69,75,101,108,111,176,183,186,193,196,199,209,212,218,224,227,229,235,241,244,246,252,254,260,266,275,277,283,290,297,299,305,307,313,319,322,325,341,348,361,368,371],[10,11,12,16],"p",{},[13,14,15],"strong",{},"CLI（命令行接口）脚手架","，是指通过命令行界面（Command Line Interface）提供的一种自动化工具，用于快速创建、构建和初始化项目的工具集合。简单来说，它是一个可以帮助开发者快速搭建项目框架、配置环境、生成代码等的工具。",[18,19,21,22],"h3",{"id":20},"_1-脚手架的定义","1. ",[13,23,24],{},"脚手架的定义",[10,26,27,28,31],{},"​\t在开发领域，",[13,29,30],{},"“脚手架”（Scaffolding）通常指的是一种自动化生成项目结构和基础代码的工具","。它为开发者提供了一个“起步模板”，让开发者可以在其基础上快速开发应用程序，而无需从零开始手动创建各种配置和代码文件。",[10,33,34,35,38],{},"而 ",[13,36,37],{},"CLI 脚手架"," 则是通过命令行来实现这种自动化功能，通常包含以下功能：",[40,41,42,46,49,52],"ul",{},[43,44,45],"li",{},"自动创建项目目录结构。",[43,47,48],{},"自动安装依赖（如 npm、yarn 等）。",[43,50,51],{},"自动生成基础文件（如配置文件、模板文件、公共代码等）。",[43,53,54],{},"提供常用命令的支持，帮助开发者快速启动开发过程。",[18,56,58,59],{"id":57},"_2-为什么需要-cli-脚手架","2. ",[13,60,61],{},"为什么需要 CLI 脚手架？",[10,63,64,65,68],{},"​\t开发一个项目从零开始需要许多重复性的工作，比如",[13,66,67],{},"设置项目结构、安装依赖、配置工具链（如 ESLint、Webpack、Babel 等）","、创建必要的文件（如 README、LICENSE、配置文件等）。这些工作是低效的且容易出错，因此开发者通常会创建脚手架来简化这一过程。",[10,70,71,74],{},[13,72,73],{},"CLI 脚手架的主要优势","：",[40,76,77,83,89,95],{},[43,78,79,82],{},[13,80,81],{},"提升开发效率","：通过一条命令快速生成项目框架，节省了大量配置和搭建的时间。",[43,84,85,88],{},[13,86,87],{},"减少错误","：自动生成的项目文件和配置可以确保开发者遵循最佳实践，减少手动配置时可能出现的错误。",[43,90,91,94],{},[13,92,93],{},"统一项目结构","：在团队或公司内部使用脚手架工具，能保证不同项目之间的结构和配置一致性。",[43,96,97,100],{},[13,98,99],{},"扩展性","：CLI 脚手架可以根据项目需求灵活扩展，支持插件、模板、构建工具等。",[18,102,104,105],{"id":103},"_3-cli-脚手架的工作原理","3. ",[13,106,107],{},"CLI 脚手架的工作原理",[10,109,110],{},"CLI 脚手架工具通常基于 Node.js 等编程语言构建，它们有以下常见的工作流程：",[112,113,114,125,139,156,166],"ol",{},[43,115,116,119,120,124],{},[13,117,118],{},"初始化项目","：通过命令行输入特定的命令，如 ",[121,122,123],"code",{},"create my-project","，工具会自动创建项目的文件夹结构。",[43,126,127,130,131,134,135,138],{},[13,128,129],{},"安装依赖","：脚手架会自动安装项目所需的各种依赖（如 ",[121,132,133],{},"npm install"," 或 ",[121,136,137],{},"yarn","），省去了手动安装的步骤。",[43,140,141,144,145,148,149,148,152,155],{},[13,142,143],{},"生成模板文件","：脚手架根据预设的模板，生成一些常用的文件和配置，比如 ",[121,146,147],{},"index.html","、",[121,150,151],{},"app.js",[121,153,154],{},"webpack.config.js"," 等。",[43,157,158,161,162,165],{},[13,159,160],{},"初始化 Git","：很多脚手架会自动初始化 Git 仓库，并提供常用的 Git 配置，如 ",[121,163,164],{},".gitignore"," 文件。",[43,167,168,171,172,175],{},[13,169,170],{},"运行脚本","：某些脚手架工具会创建启动脚本，使得开发者可以通过简单的命令（如 ",[121,173,174],{},"npm run dev","）启动项目。",[18,177,179,180],{"id":178},"_4-常见的-cli-脚手架工具","4. ",[13,181,182],{},"常见的 CLI 脚手架工具",[10,184,185],{},"以下是一些常见的 CLI 脚手架工具：",[187,188,21,190],"h4",{"id":189},"_1-vue-cli",[13,191,192],{},"Vue CLI",[10,194,195],{},"Vue CLI 是 Vue.js 官方推出的脚手架工具，用于快速生成 Vue.js 项目。它可以帮助开发者快速搭建 Vue 项目，支持插件系统，能够根据需求生成配置。",[10,197,198],{},"安装：",[200,201,206],"pre",{"className":202,"code":204,"language":205},[203],"language-text","\nnpm install -g @vue\u002Fcli\n","text",[121,207,204],{"__ignoreMap":208},"",[10,210,211],{},"创建项目：",[200,213,216],{"className":214,"code":215,"language":205},[203],"\nvue create my-project\n",[121,217,215],{"__ignoreMap":208},[187,219,58,221],{"id":220},"_2-create-react-app",[13,222,223],{},"Create React App",[10,225,226],{},"Create React App 是 React 官方提供的脚手架工具，用于创建一个新的 React 应用，预配置了许多常用工具和插件，如 Babel、Webpack、ESLint、Jest 等。",[10,228,198],{},[200,230,233],{"className":231,"code":232,"language":205},[203],"\nnpx create-react-app my-app\n",[121,234,232],{"__ignoreMap":208},[187,236,104,238],{"id":237},"_3-angular-cli",[13,239,240],{},"Angular CLI",[10,242,243],{},"Angular CLI 是 Angular 官方提供的脚手架工具，用于帮助开发者创建 Angular 应用并进行自动化构建、测试等工作。",[10,245,198],{},[200,247,250],{"className":248,"code":249,"language":205},[203],"\nnpm install -g @angular\u002Fcli\n",[121,251,249],{"__ignoreMap":208},[10,253,211],{},[200,255,258],{"className":256,"code":257,"language":205},[203],"\nng new my-angular-app\n",[121,259,257],{"__ignoreMap":208},[187,261,179,263],{"id":262},"_4-vite",[13,264,265],{},"Vite",[10,267,268,274],{},[269,270,265],"a",{"href":271,"rel":272},"https:\u002F\u002Fvitejs.dev\u002F",[273],"nofollow"," 也可以算作一个现代的脚手架工具，特别是它专注于前端开发的快速启动和构建，支持 Vue、React 等框架的快速初始化。",[10,276,198],{},[200,278,281],{"className":279,"code":280,"language":205},[203],"\nnpm create vite@latest my-project\n",[121,282,280],{"__ignoreMap":208},[187,284,286,287],{"id":285},"_5-yeoman","5. ",[13,288,289],{},"Yeoman",[10,291,292,296],{},[269,293,289],{"href":294,"rel":295},"http:\u002F\u002Fyeoman.io\u002F",[273]," 是一个通用的脚手架工具，它允许开发者创建自己的脚手架模板，也有很多社区提供的模板，适用于不同类型的项目。",[10,298,198],{},[200,300,303],{"className":301,"code":302,"language":205},[203],"\nnpm install -g yo\n",[121,304,302],{"__ignoreMap":208},[10,306,211],{},[200,308,311],{"className":309,"code":310,"language":205},[203],"\nyo \u003Cgenerator-name>\n",[121,312,310],{"__ignoreMap":208},[18,314,286,316],{"id":315},"_5-cli-脚手架的自定义和扩展",[13,317,318],{},"CLI 脚手架的自定义和扩展",[10,320,321],{},"如果你需要为自己的项目或者团队定制一个脚手架工具，许多 CLI 脚手架工具都支持模板和插件系统，可以根据具体需求创建自定义脚手架。",[10,323,324],{},"例如：",[40,326,327,332],{},[43,328,329,331],{},[13,330,192],{}," 提供了插件系统，允许你创建自定义的插件以扩展功能。",[43,333,334,336,337,340],{},[13,335,289],{}," 允许开发者编写自己的生成器，并通过 ",[121,338,339],{},"yo"," 命令调用。",[18,342,344,345],{"id":343},"_6-cli-脚手架与传统的前端构建工具的区别","6. ",[13,346,347],{},"CLI 脚手架与传统的前端构建工具的区别",[40,349,350,355],{},[43,351,352,354],{},[13,353,37],{},"：主要用于项目的初始化，它提供了一个基础框架，帮助开发者快速开始开发工作。它的目标是节省时间、减少配置错误。",[43,356,357,360],{},[13,358,359],{},"前端构建工具","：如 Webpack、Vite、Parcel 等，主要用于项目的构建、打包、优化等工作。它们处理的任务通常是在开发完成后，用于将代码准备好进行生产部署。",[18,362,364,365],{"id":363},"_7-总结","7. ",[13,366,367],{},"总结",[10,369,370],{},"CLI 脚手架是开发过程中非常重要的工具，它能帮助开发者快速初始化项目、减少配置错误、提高开发效率。通过自动化脚手架工具，开发者不必从零开始搭建项目结构和配置文件，而是可以在一个已配置好的环境中快速启动开发。",[10,372,373],{},"例如，在 Vue、React 或 Angular 等框架的开发中，CLI 脚手架工具非常流行，并且大多数前端开发框架都会提供官方脚手架工具，来加速开发过程。",{"title":208,"searchDepth":375,"depth":375,"links":376},2,[377,380,382,384,386,388,390],{"id":20,"depth":378,"text":379},3,"1. 脚手架的定义",{"id":57,"depth":378,"text":381},"2. 为什么需要 CLI 脚手架？",{"id":103,"depth":378,"text":383},"3. CLI 脚手架的工作原理",{"id":178,"depth":378,"text":385},"4. 常见的 CLI 脚手架工具",{"id":315,"depth":378,"text":387},"5. CLI 脚手架的自定义和扩展",{"id":343,"depth":378,"text":389},"6. CLI 脚手架与传统的前端构建工具的区别",{"id":363,"depth":378,"text":391},"7. 总结","CLI（命令行接口）脚手架，是指通过命令行界面（Command Line Interface）提供的一种自动化工具，用于快速创建、构建和初始化项目的工具集合。简单来说，它是一个可以帮助开发者快速搭建项目框架、配置环境、生成代码等的工具。","md",{},true,"\u002Fvue\u002Fcli和脚手架",{"description":392},"Vue\u002Fcli和脚手架","c7iXofEcolSV8G_RlJxLaohyftyA9j6Awr4V5bhqQvY",1791042466978]