什么是 deepblue-scaffold？
deepblue-scaffold 是一个基于 webpack 和 Vue.js 的前端工程化脚手架，可快速创建 Vue.js 项目，支持 PWA、ESLint、Prettier、postcss-autoreset 等常用功能和插件。
安装 deepblue-scaffold
安装 Node.js 和 npm
- 下载 Node.js 安装包：https://nodejs.org/en/download/
- 安装完成后，打开命令行工具，输入
npm -v查看 npm 版本是否正确。
全局安装深蓝前端脚手架 deepblue-scaffold
npm install -g deepblue-scaffold
通过命令创建项目
deepblue-scaffold create <project-name>
如何使用 deepblue-scaffold 创建项目
打开终端，输入
deepblue-scaffold create <project-name>，回车选择需要的配置项，如下图所示：
等待安装完毕，进入创建的项目目录
启动项目
npm run serve
打开浏览器，输入
http://localhost:8080，回车
deepblue-scaffold 的配置
deepblue-scaffold 支持多个选项配置，包括 PWA、ESLint、Prettier、postcss-autoreset 等常用功能和插件。
PWA
-- -------------------- ---- -------
-- -------------
-------------- - -
---- -
----- --------
----------- ----------
------------- ----------
---------------- -
----------------- -------
--
--
--ESLint
-- -------------------- ---- -------
-- ------------
-------------- - -
-------- -------------------------- -----------------
-------- -----------
------ -
-------------------- -
--------
-----------------
-
---- --------
--
--
--
------- --------------------
-------------- -
------- -----------------------
--
--------- -
------------------ -
------ -
---- ------ ----------
----------- ------- ------- ---------
--
--
--
--Prettier
-- -------------------- ---- ------- -- -------------- -------------- - - ----------- ---- -------------- ------ --------------- ----- ------------------- ------ ------------ ----- ----- ----- --
postcss-autoreset
-- -------------------- ---- -------
-- -----------------
----- --------- - -----------------------------
-------------- - -
-------- -
-----------
------------- ------
---
--
--示例代码
响应式表格列表
-- -------------------- ---- -------
----------
---- ------------------
-------
-------
----
-----------
-----------
-----------
-----------
-----
--------
-------
--- ------------- -- -------- -----------------
------ --------- -------
------ ----------- -------
------ ---------- -------
------ ------------- -------
-----
--------
--------
------
-----------
--------
------ ------- -
------ -
------ -
-------- -
- --- -- ----- ----- ---- --- ------- --- --
- --- -- ----- ----- ---- --- ------- --- --
- --- -- ----- ----- ---- --- ------- --- --
--
--
--
--
---------
------ -------
----- -
---------------- ---------
------ -----
-
---
-- -
------- --- ----- -----
-
-- -
----------------- --------
------ -----
-
------------------ -
----------------- --------
-
---------- -
---------- ------
------- - -----
-------- -----
-
--------总结与展望
deepblue-scaffold 是一个非常好用的前端工程化脚手架，能够快速创建 Vue.js 项目，并配置好常用插件和功能。本篇文章主要介绍了 deepblue-scaffold 的安装和使用方法，以及常用配置项的说明。
未来，我们会继续完善 deepblue-scaffold，增加更多的功能和插件，让前端工程化更加简单易用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552be81e8991b448d024e