手把手教你构建一个web前端项目，全网最详细教程！

1. 选择现成的项目模板还是自己搭建项目骨架

搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。

选择一个现成项目模板是搭建一个项目最快的方式，模板已经把基本的骨架都搭建好了，你只需要向里面填充具体的业务代码，就可以通过内置的工具与命令构建代码、部署到服务器等。

一般来说，一个现成的项目模板会预定义一定的目录结构、书写方式，在编写项目代码时需要遵循相应的规范；也会内置必要的工具，比如  .editorconfig 、 eslint 、 stylelint 、 prettier 、 husky 、 lint-staged  等；也会内置必要的命令（ package.json | scripts ），比如  本地开发：npm run dev 、 本地预览：npm run start 、 构建：npm run build 、 部署：npm run deploy  等。

github上比较好的项目模板：

• react-boilerplate

• ant-design-pro

• vue-element-admin

• react-starter-kit

• create-react-app

• create-lila-app （我自己用的，哈哈）

这些模板的使用又分为两种：使用  git  直接克隆到本地、使用命令行创建。

（使用现有模板构建的项目，可以跳过第 2 ～ 7 步）

1.1 使用  git  直接克隆到本地

这是一种真正意义上的模板，可以直接到模板项目的  github  主页，就能看到整个骨架，比如  react-boilerplate 、 ant-design-pro 、 vue-element-admin 、 react-starter-kit 。

以  react-boilerplate  为例：

克隆到本地：

git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git  <你的项目名字>

切换到目录下：

cd <你的项目名字>

一般来说，接下来运行 npm run install 安装项目的依赖后，就可以运行；有些模板可能有内置的初始化命令，比如 react-boilerplate：

npm run setup

启动应用：

npm start

这时，就可以在浏览器中预览应用了。

1.2 使用命令行创建

这种方式需要安装相应的命令，然后由命令来创建项目。

以 create-react-app 为例：

安装命令：

npm install -g create-react-app

创建项目：

create-react-app my-app

运行应用：

cd my-app
npm start

1.3 自己搭建项目骨架

如果你需要定制化，可以选择自己搭建项目的骨架，但这需要开发者对构建工具如  webpack 、 npm 、 node  及其生态等有相当的了解与应用，才能完美的把控整个项目。

下面将会一步一步的说明如何搭建一个定制化的项目骨架。

2. 选择合适的规范来写代码

js  模块化的发展大致有这样一个过程  iife => commonjs/amd => es6 ，而在这几个规范中：

• iife :  js  原生支持，但一般不会直接使用这种规范写代码

• amd :  requirejs  定义的加载规范，但随着构建工具的出现，便一般不会用这种规范写代码

• commonjs :  node  的模块加载规范，一般会用这种规范写  node  程序

• es6 :  ECMAScript2015