前端项目初始化

引言

有一段时间没有写前端代码了，机缘巧合下需要写一个简单的前端功能页面，这时就需要来初始化项目了。项目可以借助Vue、React、Angular框架来搭建，也可以不使用框架，而是自己使用打包工具来构建。在使用第三方脚手架构建项目时突然一下子想不起来具体的指令了，本篇文章便是为此而生，在需要时进行查阅

环境准备

前端开发离不开Node 环境，因此在进行项目初始化之前，需要确保安装了Node.js

Node.js还附带了一个npm 包管理器，它是世界上最大的开源软件包生态系统之一，使用npm可以轻松安装、管理和共享JavaScript 模块和库

项目初始化

在构建一个项目时，可以根据需求来选择如何初始化项目，如果想通过已有的脚手架来搭建项目，那么React、Vue、Angular这三个主流的框架可以根据项目来选择其脚手架初始化项目；如果想通过Webpack等打包工具来搭建项目，则需要掌握的是如何进行配置

React

方式一

安装 React 脚手架
bash 复制代码
```
npm install -g create-react-app
```
借助 React 脚手架创建 React 项目
bash 复制代码
```
create-react-app my-react-app
```
打开终端，并在您想要创建项目的目录中执行上述命令，这将在指定目录中创建一个名为my-react-app的新 React 项目，可以将my-react-app替换为任意项目名称
方式二
bash 复制代码
```
npx create-react-app my-react-app
```

Vue

方式一

安装 Vue 脚手架
bash 复制代码
```
npm install -g @vue/cli
```
借助 Vue 脚手架创建 Vue 项目
bash 复制代码
```
vue create my-vue-app
```
与React脚手架创建项目一样，my-vue-app可以替换为任意项目名称
方式二
bash 复制代码
```
npx @vue/cli create my-react-app
```

Angular

方式一

安装 Angular 脚手架
bash 复制代码
```
npm install -g @angular/cli
```
借助 Angular 脚手架创建 Angular 项目
bash 复制代码
```
ng new my-angular-app
```
与其他两个脚手架创建项目一样，my-angular-app可以替换为任意项目名称
方式二
bash 复制代码
```
npx @angular/cli new my-react-app
```

打包工具

使用打包工具来构建项目和最开始的采用HTML、CSS、JavaScript三剑客来构建项目的一个最大的区别便是：引入了Webpack等打包工具，让项目可以使用更高级的语法进行开发，如：与css对应的less、sass等，与js对应的es6等

首先需要npm init初始化项目，然后可以npm install各个依赖，包括Webpack相关依赖，然后便可以进入开发了

如果直接使用npm install来安装依赖，不运行npm init，这将失去一个包含项目信息和依赖项列表的 package.json文件，可能使项目管理和共享更加复杂

对于如何使用Webpack来配置项目，可以参考文章：Webpack 入门篇、Webpack 进阶篇

拓展

在使用第三方脚手架搭建项目部分，都采用了两种方式，一个是npm、还有一个是npx，这里便对npx做一下简要介绍

npx是Node.js包管理工具npm的一部分，它用于执行Node.js包中的可执行文件。npx允许不在全局安装包的情况下运行包中的命令

使用npx安装脚手架，只会在本地临时安装并运行，而不会在全局安装。这样做的好处是：可以始终使用每个项目所需的特定版本的脚手架，而不会干扰全局安装的其他项目

小结

本文主要是对采用各种脚手架搭建项目的指令的一个汇总，方便之后查阅

React 脚手架搭建项目：npx create-react-app my-react-app
Vue 脚手架搭建项目：npx @vue/cli create my-react-app
Angular 脚手架搭建项目：npx @angular/cli new my-react-app