位置: IT常识 - 正文
从0搭建前端脚手架详解（小白也可以搭建）(如何快速搭建前端界面)
编辑：rootadmin从0搭建前端脚手架详解（小白也可以搭建） 本篇文章用来为大家提供一个搭建简易前端脚手架的思路。
了解搭建的脚手架
本文链接地址:https://www.jiuchutong.com/zhishi/296146.html
转载请保留说明！
推荐整理分享从0搭建前端脚手架详解（小白也可以搭建）(如何快速搭建前端界面)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:如何搭建前端架构,搭建前端开发环境,前端cli搭建,如何搭建前端项目,前端搭建一个项目要注意什么,搭建前端开发环境,如何搭建前端架构,如何搭建前端架构,内容如对您有帮助，希望把文章链接给更多的朋友！
先来看一眼实现的效果。
从图上来看这个脚手架的功能非常的简单只有一个创建的命令，其他都是帮助和显示版本号的。
也就是上图这句，创建一个新项目，只需要输入create 项目名便可使用，在创建时执行了一系列的操作，这一块的思路很简单，就是将git仓库中的项目模板拷贝下来再依据使用者的不同操作对复制下来的模板的部分文件进行修改就可以了，大致思路便介绍到这里，接下来我们便来详细的讲讲如何实现，以及会用到的依赖。
脚手架目录结构了解搭建的脚手架脚手架就是在启动的时候询问一些简单的问题，并且通过用户回答的结果去渲染对应的模板文件，我们接下来的流程亦是如此
脚手架的初始化由于它是一个npm的包，因此我们需要使用npm的初始化命令，随意新建一个文件夹打开命令行，输入npm init，会出现以下情况。
名称意思默认值package name包的名称创建文件夹时的名称version版本号1.0.0description包的描述创建文件时的名称entry point入口文件index.jstest command测试命令—git repositorygit仓库地址—keywords关键词，上传到npm官网时在页面中展示的关键词—author作者信息，对象的形式，里面存储一些邮箱、作者名、url—license执照MIT这就是输入初始化命令时会询问的东西，回答完这些后就会生成一个 package.json 的文件，这个文件就是记录包的信息。
如果想要了解更多，可查看如下地址： package.json详解
脚手架依赖安装用到如下依赖请安装。
npm i pathnpm i chalk@4.1.0npm i fs-extranpm i inquirer@8.2.4npm i commandernpm i axiosnpm i download-git-repo询问用户问题创建入口文件在询问问题前我们需要先创建一个入口文件，创建完成后在package.json中添加bin项，并且将入口文件路径写进去
填写完入口文件路径后在入口文件内随便输出一句， 但必须在入口文件顶层
上一篇：数据库系统课程设计（高校成绩管理数据库系统的设计与实现）(数据库系统课程学什么)