脚手架开发小记（一）——相逢即是初识

前端

2023-10-07 09:53:15

前言

前端脚手架，顾名思义，就是为前端项目开发提供一套标准化的工具和流程。它可以帮助我们快速搭建项目结构，安装依赖，配置环境，以及执行各种构建任务。

目前，市面上流行的前端脚手架工具主要有：

vue-cli
create-react-app
webpack

这些脚手架工具都有自己的特点和优势，但它们有一个共同点：都使用 Node.js 来构建项目。因此，在使用这些脚手架工具之前，您需要先安装 Node.js。

脚手架的作用

使用脚手架工具可以为我们带来以下好处：

提高开发效率：脚手架工具可以自动生成项目结构和配置，减少了我们重复造轮子的时间，从而提高了开发效率。
保证项目质量：脚手架工具可以根据最佳实践来生成项目结构和配置，从而保证了项目的质量。
促进团队协作：脚手架工具可以为团队成员提供一个统一的开发环境，从而促进团队协作。

如何使用脚手架进行项目开发

以下我们将以 vue-cli 为例，介绍如何使用脚手架工具进行项目开发。

首先，您需要安装 vue-cli。您可以使用以下命令进行安装：

npm install -g @vue/cli

安装完成后，您就可以使用 vue-cli 创建一个新的项目。您可以使用以下命令创建项目：

vue create my-project

执行该命令后，vue-cli 会在当前目录下创建一个新的项目。项目结构如下：

my-project/
  |- node_modules/
  |- package.json
  |- src/
  |- .gitignore
  |- .eslintrc.js
  |- README.md
  |- package-lock.json

其中，node_modules 目录是项目依赖的安装目录，package.json 文件是项目的配置信息文件，src 目录是项目的源代码目录，.gitignore 文件是 Git 忽略的文件列表，.eslintrc.js 文件是 ESLint 的配置文件，README.md 文件是项目的说明文件，package-lock.json 文件是项目的依赖锁文件。

接下来，您就可以在 src 目录下编写您的代码了。当您编写完成后，您可以使用以下命令构建项目：