你是否曾经在开发过程中烦恼于各种构建工具、打包工具的安装及配置？是否曾经想过使用一个命令行工具即可轻松搭建前端项目结构？
那么，不妨试试使用 npm 包 dc-fe-cli，它是一个基于 webpack 的开发环境快速搭建工具。本文将会详细地介绍 dc-fe-cli 的使用方法及其优势。
安装
dc-fe-cli 可以通过 npm 安装：
npm install -g dc-fe-cli
安装完成后，输入 dc-fe-cli 可以看到工具的帮助信息，如下所示：
-- -------------------- ---- ------- ------ --------- --------- --------- --------- ------ ------ ------ - --- ------- -------- ----- --------- ----- --- ------ ------ ----- --------- ----- --- --- --- ---------- -------- -------- --- ------ ------ ----- ----------- ------ --- --------- ------ --- ------- ------ ----
创建项目
使用 dc-fe-cli 创建项目非常简单，只需要运行下面的命令：
dc-fe-cli create my-project
其中，my-project 是你想创建的项目名称。然后你可以选择你希望使用的模板类型，支持 PC 和移动端两种模板类型：
$ cd my-project $ dc-fe-cli create my-project ? Select the type of template (Use arrow keys) ❯ pc mobile
然后，你可以选择你需要配置的模块。模块包括 lint、vuex、vuex-router-sync、axios 等：
? Select modules to be configured (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◯ lint ◉ vue ◯ vuex ◉ vuex-router-sync ◯ axios ◯ iview
等待一段时间后，你就可以在你的工程目录下看到一个基于 dc-fe-cli 快速生成的项目结构。
开发服务
进入到项目目录，输入以下命令开启开发服务：
dc-fe-cli start
运行成功后，即可在浏览器中访问 http://localhost:8080 进行开发了。
当然，你可以通过在命令行中加入不同的参数来启动自定义端口、host 等选项。
构建生产环境应用
在开发完成后，使用 dc-fe-cli 帮助我们将项目打包成生产环境所需要的资源。
dc-fe-cli build
执行成功后，你将会在你的工程目录下看到 dist 文件夹，里面包含有编译后的文件。
总结
通过本篇文章的阅读，你应该已经了解了 dc-fe-cli 的使用方法及其优势。它可以帮助我们自动化搭建前端开发环境，提高我们的开发效率。
如果你对该工具感到满意，可以在 Github 上点个赞哦~
示例代码
以下是一个简单的 Vue 组件示例：
-- -------------------- ---- -------
----------
-----
-- ------- --
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------- -------
-
-
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672e50520b171f02e1dc6