npm 包 deepblue-scaffold 使用教程

什么是 deepblue-scaffold？

deepblue-scaffold 是一个基于 webpack 和 Vue.js 的前端工程化脚手架，可快速创建 Vue.js 项目，支持 PWA、ESLint、Prettier、postcss-autoreset 等常用功能和插件。

安装 deepblue-scaffold

  1. 安装 Node.js 和 npm

  2. 全局安装深蓝前端脚手架 deepblue-scaffold

    --- ------- -- -----------------

  3. 通过命令创建项目

    ----------------- ------ --------------

如何使用 deepblue-scaffold 创建项目

  1. 打开终端，输入 deepblue-scaffold create <project-name>，回车

  2. 选择需要的配置项，如下图所示：

  3. 等待安装完毕，进入创建的项目目录

  4. 启动项目

    --- --- -----

  5. 打开浏览器，输入 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

阅读全文

猜你喜欢

  • npm 包 grasshopper-demo 使用教程

    介绍 npm 是一个非常强大的包管理工具，可能是最流行的 JavaScript 包管理工具。而 grasshopper-demo 是一个物联网项目中经常用到的 npm 库，在物联网项目中推送数据时具有...

    2 年前
  • npm 包 react-redux-connectme 使用教程

    React-Redux 是 React 生态中最常见的状态管理库之一。它专门用于构建大型、可扩展的 Web 应用程序，它使用单向数据流的模式来减少运行时错误和提高应用程序的性能。

    2 年前
  • npm 包 itchat 使用教程

    介绍 itchat 是一个 Node.js 模块，它可以让我们轻松地将微信作为一个命令行工具来使用。它可以用于发送消息、自动接受好友请求、获取微信通讯录等。 安装 你可以通过 npm 安装 itcha...

    2 年前
  • npm 包 jpush-custom-react-native 使用教程

    简介 jpush-custom-react-native 是一个用于 React Native 框架的推送插件。JPush（极光推送）是一款专业的推送服务，它提供了一系列高效、可靠的推送解决方案，如广...

    2 年前
  • npm 包 ember-cli-p5js-shim 使用教程

    简介 ember-cli-p5js-shim 是一个为 Ember.js 应用提供 p5.js 的 shim 包。它可以让你在 Ember.js 应用中更加方便地集成和使用 p5.js。

    2 年前
  • npm 包 koa-easy-logger 使用教程

    在开发 Web 应用时，日志管理是一个重要的任务。在 Node.js 中，虽然可以通过 console 对象输出调试信息，但当需要记录线上运行日志时，需使用较为完备的日志管理库。

    2 年前
  • npm包aiga-controller使用教程

    前置知识 在使用aiga-controller之前，需要掌握以下技术： Node.js环境及npm包管理工具的使用 基本的JavaScript语法 Web前端框架（如Vue.js或React）的使用...

    2 年前
  • npm 包 fast-config 使用教程

    什么是 fast-config fast-config 是一个用于快速获取配置信息的 npm 包。通过该包，我们可以快速地获取配置信息，从而更加高效地进行开发。 安装 fast-config 如果你已...

    2 年前
  • npm 包 hexo-toc-ext 使用教程

    前言 Hexo 是一个静态博客框架，它的核心是基于 Node.js 的，提供了强大灵活且易于使用的功能，使得它成为一个非常受欢迎的博客框架。而 hexo-toc-ext 则是 hexo 上一个非常实用...

    2 年前
  • npm 包 is-really-primitive 使用教程

    在前端开发中，我们经常会遇到需要检查一个变量是否为原始类型的情况。而这一检查可以得到一个 boolean 类型的返回值。为了满足这一需求，我们可以使用 npm 包 is-really-primitiv...

    2 年前
  • NPM 包 Minecraft-CLI 使用教程

    如果您是 Minecraft 爱好者或开发者，您可能想要使用 Minecraft 命令行工具来管理和控制 Minecraft 服务器。在这篇文章中，我们将介绍 Minecraft-CLI 这个 NPM...

    2 年前
  • npm 包 facile-clone 使用教程

    介绍 facile-clone 是一个简单易用的 npm 包，用于帮助前端开发者快速克隆 HTML 元素，包括其所有子元素和属性。该包可用于快速生成表格、列表等具有重复元素的页面。

    2 年前
  • npm 包 nativescript-material-showcaseview 使用教程

    前言 在一个优秀的移动应用中，当用户首次打开应用时，需要通过一些引导方式，向用户介绍应用中的特点和功能。其中一种常见的引导方式是 Showcase View，即向用户展示一个带有高亮和提示信息的演示视...

    2 年前
  • npm 包 bourbon-data 使用教程

    简介 bourbon-data 是一个提供基础样式和 mixin 的 Sass 库，可用于简化 CSS 和 Sass 编写。借助 Bourbon，您可以轻松编写出简洁、干净的代码。

    2 年前
  • npm 包 string-dom 使用教程

    介绍 string-dom 是一个实用的 npm 包，用来将字符串转换为 DOM 对象。在前端开发过程中，常常需要手动创建 DOM 对象，但这个过程比较繁琐，而且容易出错。

    2 年前
  • npm 包 test-proj 使用教程

    什么是 npm 包 npm (Node Package Manager)是 Node.js 的包管理器，允许用户共享他们的 Node.js 应用程序和库。您可以使用 npm 包来加快您的开发过程，管理...

    2 年前
  • npm 包 typedoc-md-theme 使用教程

    在前端开发过程中，文档编写是必不可少的一环节。而 TypeScript 项目中，typedoc 是一款非常好用的文档生成工具。但是默认生成的 html 格式文档并不美观，这时候就需要借助 typedo...

    2 年前
  • npm 包 chrisvy-tabs 使用教程

    前端开发经常需要实现选项卡效果，chrisvy-tabs 正是一款可靠的 npm 包，可以帮助我们轻松实现干净美观的选项卡效果。本篇文章将会详细介绍 npm 包 chrisvy-tabs 的使用教程，...

    2 年前
  • NPM 包 cy-tabs 使用教程

    介绍 cy-tabs 是一个基于 React 构建的开源组件库，专为 Web 前端开发者提供一组可定制化的选项卡 UI 组件。cy-tabs 在使用上非常简便，可以通过安装该组件库的 NPM 包，直接...

    2 年前
  • npm 包 folder-comparison 使用教程

    随着前端应用的复杂性不断提高，前端项目的体积也愈发庞大。如何管理和维护一个巨大的前端项目变得越来越困难，并且通常需要比较两个复杂项目之间的区别。npm 包 folder-comparison 可以解决...

    2 年前

相关推荐

    暂无文章