FE-DESIGN

# 前端快速开发脚手架

# 概述

FEDESIGN-CLI(frontend-design-cli)是一款快速构建WEB项目的前端应用工具。开发者只需要关注项目逻辑的代码，而不需要关心webpack打包、启动Node服务等诸如此类的这些问题。Vue-cli是一款基于模板化的开发工具，等于就是把别人的项目结构给照搬过来，所有的配置都是暴露出来的，你可以根据实际情况去做一些配置的修改，更加灵活自由一点。就是一个集成项目初始化、调试、构建、测试、部署等等流程，能够让使用者专注于code的工具。脚手架是为了保证施工过程顺利进行而搭设的工作平台。在项目开发中我们把创建项目结构模版的工具也称之为脚手架。如vue-cli，create-react-app等。这些脚手架等原理都一样，即用Node.js命令行程序生成项目模版。

# 特点

  • 集成项目初始化
  • 集成项目调试
  • 集成项目构建
  • 集成项目测试
  • 集成项目部署
  • 让项目搭建更加规范
  • 让项目更好维护
  • 让使用者专注业务开发而简化配置工作

# 环境要求

FEDESIGN 项目基于 node，请确保已具备较新的 node 环境（>=8.0.0），推荐使用 node 版本管理工具 nvm(opens new window) 来管理 node，这样不仅可以很方便地切换 node 版本，而且全局安装时候也不用加 sudo 了。

# 常用工具

名称 工具名称 链接地址
交互命令 commander(opens new window) https://www.npmjs.com/package/commander
文件拉取 download-git-repo(opens new window) https://www.npmjs.com/package/download-git-repo
命令行交互 inquirer(opens new window) https://www.npmjs.com/package/inquirer
替换模板内容 handlebars(opens new window) https://www.npmjs.com/package/handlebars
美化命令行 chalk(opens new window) ora(opens new window) https://www.npmjs.com/package/chalk / https://www.npmjs.com/package/ora

# 脚手架包含内容

  • 安装命令
  • 操作命令
  • 模板库

# 常见脚手架

  • create-react-app
  • vue-cli

# 搭建脚手架

# 创建项目文件夹
$ mkdir project-name && cd project-name
# 初始化package.json
$ npm init -y
1
2
3
4

在package.json中增加两项

"bin":{
	"fedesign":./bin/fedesign",
	"fedesign-init": "./bin/fedesign-init",
    "fedesign-add": "./bin/fedesign-add",
    "fedesign-delete": "./bin/fedesign-delete",
    "fedesign-list": "./bin/fedesign-list",
    "fedesign-build": "./bin/fedesign-build"
}
"private":false
1
2
3
4
5
6
7
8
9
  • bin目录下的testCli 表示，我们在命令行输入testCli 则会调用main.js内的内容，
  • bin目录下的fedesign表示，:./bin/fedesign",
  • bin目录下的fedesign-init表示，": "./bin/fedesign-init",
  • bin目录下的fedesign-add表示，": "./bin/fedesign-add",
  • bin目录下的fedesign-delete表示，": "./bin/fedesign-delete",
  • bin目录下的fedesign-list表示，": "./bin/fedesign-list",
  • bin目录下的fedesign-build表示，": "./bin/fedesign-build"
  • private:false 表示内容是公开的，即可以被npm发布的
#!/usr/bin/env node
1

  • 其中 #!/usr/bin/env node 的作用就是这行代码是当系统运行到这一行的时候，去 env 中查找 node 配置，并且调用对应的解释器来运行之后的 node 程序 然后我们需要测试代码，这里可能需要用到 npm link 或者 npm install -g 。这样在命令行执行testCli就可以看到你在main.js中写入的代码，这里写一个hello world

    npm link: 将当前package链接到全局 —— npm unlink

    npm install -g: 将当前package安装到全局 —— npm uninstall -g

# bin的作用就是官网是这样解释的

许多npm包都具有一个或多个要安装到PATH中的可执行文件。package.json中提供一个字段bin，该字段是命令名到本地文件名的映射。在安装时，npm会将文件符号链接到prefix/bin以进行全局安装或./node_modules/.bin/本地安装。说白了，就是在安装的时候，会创建一个快捷方式，通过快捷方式能够很方便的使用对应的node脚本命令。这也是为什么我们可以直接随便打开命令行，通过create方式创建项目。 而对应的index.js文件，在开头必须以#!/usr/bin/env node。usr/bin/env表示可以去PATH目录中查找脚本解释器，同时指定使用node去执行该文件。开发者只需要关注项目逻辑的代码，而不需要关心webpack打包、启动Node服务。

然后再通过npm link，在全局中创建符号链接，将package.json里的bin字段内容进行映射链接。在任何地方输入都可以使用fedesign命令。

# FEDESIGN-CLI 是什么

FEDESIGN-CLI(又称:frontend-design-cli)是专门为前端快速搭建标准化项目而打造的工具平台。

# FEDESIGN-CLI有哪些功能

/guide/using-vue.html →