首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何实现一个脚手架进阶版(Vue-cli v2.9学习篇)

如何实现一个脚手架进阶版(Vue-cli v2.9学习篇)

作者头像
黄Java
发布2018-09-18 17:16:11
1.1K0
发布2018-09-18 17:16:11
举报
文章被收录于专栏:黄Java的地盘黄Java的地盘

前言

在之前一篇博客介绍了关于Node脚手架的一些基础的知识,这篇博客是在之前的基础上针对在Node中开发脚手架中遇到的问题,如:

  • 终端样式、交互问题
  • 文件处理问题

通过对Vue-cli 2.9.2的源码进行分析,解决相关问题。

如果没有看过之前一篇博客的,或者对Node.js的脚手架没有了解过的同学,推荐先看上一篇:如何实现一个简单的Node.js脚手架

正文

终端

怎么自定义终端的样式

chalk是一个日志的样式库,可以在终端上面调整日志的样式。

以下的代码:

const chalk = require('chalk');

console.log(chalk.red('hello world'));

转换为具体样式为:

通过说明文档,我们可以知道,chalk可以支持文字颜色和背景颜色。

怎么实现终端中的Loading图

ora可以在终端实现Loading的效果,可以在与用户进行交互后使用。

从官网的实例来看,我们可以实现以下的效果:

怎么在终端中和用户进行交互

在终端中和用户进行交互,获取用户输入是一个很常见的需求。

Inquirer这个库能够通过终端让我们和用户进行一些交互,比如下面的例子:

var inquirer = require('inquirer');
inquirer.prompt([{type: 'confirm', name: 'OK', message: 'Are you OK?', default: false}]).then(answers => {
    console.log(answers);
});

得到的结果内容为:

文件相关

怎么能够方便下载有目录结构的模板文件

最常见的文件模板下载,都是通过将文件上传到CDN中,然后再通过某个特定的格式下载到页面上。

但是,如果你想要通过比较优雅的方式来进行文件下载,可以通过download-git-repo来下载你再Git上面已经准备好的模板,这样就能够在下载的过程中保证文件目录和顺序,比之前自己创建和检测文件夹会简便很多。

怎么对下载的文件进行处理

当你提供的模板不仅仅是一个纯粹的文件,而是可以通过某些参数进行编译,得到不同的目标文件时,你可以通过metalsmith来对文件进行操作。

它是一个用来构建静态网站的类库,也能够用来对文件进行处理。

你可以通过编写一些处理的回调函数来对你的模板文件进行处理。

怎么编译模板语言

如果你想要一套现成的模板编译工具,可以使用现成的如Handlebars

他能够像后端模板语言一样,直接针对类HTML文件进行处理,我们可以看下官方的例子。

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

针对上述模板,在编译时填入titlebody两个字段,即可得到完整的HTML片段。

Vue-cli中,使用了模板引擎合并库consolidate.js,通过这个库的render方法来编写metalsmith的处理函数,从而在渲染的过程中对模板进行处理,具体代码如下:

exports.handlebars.render = function(str, options, fn) {
  return promisify(fn, function(fn) {
    var engine = requires.handlebars || (requires.handlebars = require('handlebars'));
    try {
      for (var partial in options.partials) {
        engine.registerPartial(partial, options.partials[partial]);
      }
      for (var helper in options.helpers) {
        engine.registerHelper(helper, options.helpers[helper]);
      }
      var tmpl = cache(options) || cache(options, engine.compile(str, options));
      fn(null, tmpl(options));
    } catch (err) {
      fn(err);
    }
  });
};

因此,他可以利用已经安装好的handlebar模板引擎来注册helper,从而进行模板的处理。

总结

通过对Vue-cli源码的简单学习,我们可以发现在日常中需要处理的与用户交互、文件处理编译等需求也有了一个比较好的解决方案。

当然,上面提供的方案不是唯一的,仅提供给大家进行一个参考和快速实现。大家也可以通过一些其他的方法来实现相同的功能。

有任何问题欢迎进行交流。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-02-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 正文
    • 终端
      • 怎么自定义终端的样式
      • 怎么实现终端中的Loading图
      • 怎么在终端中和用户进行交互
    • 文件相关
      • 怎么能够方便下载有目录结构的模板文件
      • 怎么对下载的文件进行处理
      • 怎么编译模板语言
  • 总结
相关产品与服务
内容分发网络 CDN
内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档