首页 > 其他分享 >『手撕Vue-CLI』下载指定模板

『手撕Vue-CLI』下载指定模板

时间:2024-06-02 13:10:41浏览次数:27  
标签:Vue const CLI downloadGitRepo repo 模板 download 下载

开篇

经上篇文章的介绍,实现了获取下载目录地址,接下来实现下载指定模板的功能。

背景

通过很多章节过后,已经可以拿到模板名称,模板版本号,下载目录地址,这些信息都是为了下载指定模板做准备的。

实现

如何从 GitHub 下载模板

可以借助 download-git-repo 这个库来下载 GitHub 上的模板,进入到 npm 官网搜索一下这个库:

进入官网,官方介绍的很清楚,使用这个库得要先安装:

npm install download-git-repo

安装完成之后,在工程中引入这个库:

// 导入 download-git-repo,用于下载模板
const downloadGitRepo = require('download-git-repo');

再将之前获取下载路径也导入进来:

// 导入 downloadDirPath,用于获取下载路径
const { downloadDirPath } = require('./const');

基本工作准备完成,现在我也不会使用所以我要去看看官方的示例,最后看到一个使用 http 的示例:

发现回调是 API 的方式,我这里想要使用 Promise 的方式,所以我要做一个事情就是将回调函数 API 方式转换为 Promise 方式。

怎么转呢?这里就要用到一个 Node.js 的内置模块 util,这个模块可以将回调函数转换为 Promise 函数,具体使用方法如下:

// 导入 util 模块
const { promisify } = require('util');

然后将 downloadGitRepo 方法转换为 Promise 方法:

// 导入 download-git-repo,用于下载模板
const downloadGitRepo = promisify(require('download-git-repo'));

这样就将 downloadGitRepo 方法转换为 Promise 方法了,接下来就可以使用 Promise 方法来下载模板了。

下载指定模板

下载指定模板的方法很简单,只需要调用 downloadGitRepo 方法,传入两个参数,第一个参数是 GitHub 上的模板地址,第二个参数是下载到本地的路径。

在官方的 options 介绍中有提供详解:

我这里采用的是 http 方式,先上代码:

const downloadTemplate = async (templateName, version) => {
    // https://github.com/kevva/download#options
    // 组织机构的名称/模板名称#版本号
    // 1.拼接模板在github上的地址
    let url = `neo-it6666/${templateName}`;

    if (version) {
        url += `#${version}`;
    }

    // 2.拼接存储下载好的模板的路径
    const downloadPath = `${downloadDirPath}\\${templateName}`;
    await downloadGitRepo(url, downloadPath);
    return downloadPath;
}

单独封装了一个函数 downloadTemplate,这个函数接收两个参数,第一个参数是模板名称,第二个参数是版本号,然后拼接 GitHub 上的模板地址,最后调用 downloadGitRepo 方法,将模板下载到本地。

逻辑很简单,downloadGitRepo 我分别传递了两个参数,第一个参数是 GitHub 上的模板地址,第二个参数是下载到本地的路径,这样就实现了下载指定模板的功能。

最后使用这个函数,在 create 指令主流程中调用:

const destPath = waitLoading('downloading template...', downloadTemplate)(template, version)
console.log(destPath)

这样就实现了下载指定模板的功能,来测试一下,首先在终端中输入指令:

nue-cli create test

可以看到已经下载成功了,然后再去用户目录中查看:

可以看到已经下载成功了,这样就实现了下载指定模板的功能。

如果您觉得文章对您有所帮助,欢迎您点赞、评论、转发,也欢迎您关注我的公众号『BNTang』,我会在公众号中分享更多的技术文章。

标签:Vue,const,CLI,downloadGitRepo,repo,模板,download,下载
From: https://www.cnblogs.com/BNTang/p/18227004

相关文章

  • 班级网页制作 HTML个人网页设计 我的班级网站设计与实现 大学生简单班级静态HTML网页
    ......
  • 个人介绍网页代码 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计
    ......
  • 【vue源码】虚拟DOM和diff算法
    虚拟DOM与AST抽象语法树的区别虚拟DOM是表示页面状态的JavaScript对象,(虚拟DOM只有实现diff算法)而AST是表示代码语法结构的树形数据结构。虚拟DOM通常用于优化页面渲染性能,而AST通常用于进行代码静态分析、代码转换等操作。(AST主要执行compiler编译)什么是虚拟DOM?用JavaSc......
  • 【手撕面试题】Vue(高频知识点三)
            每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。目录面试官:请简述一下v......
  • vue3 vite 项目tsx写法尝试
    vite配置上面jsx插件搞好就能在vue项目中使用jsx写法了代码尝试ChildWorld.vue<scriptlang="tsx">import{defineComponent,defineProps}from"vue"constchildAbc=()=>{return(<div>childAbc</div>)}constchildCbd=(props,......
  • 【Vue】深入理解MVVM模式的魔力
    目录前言一、MVVM模式是什么?二、具体示例总结前言    Vue.js是一种基于JavaScript的前端框架,它采用了MVVM(Model-View-ViewModel)模式来实现数据的双向绑定。在本篇博客中,我将介绍MVVM模式的基本概念,并演示如何使用Vue.js来实现这种模式。一、MVVM模式是什么? ......
  • 【Vue】中v-if和v-show的区别到底在哪里?
    概要   Vue.js是一种流行的JavaScript框架,用于构建交互式的Web应用程序。在Vue.js中,v-if和v-show是两个常用的指令,用于控制DOM元素的显示与隐藏。本文将介绍它们之间的区别。整体架构流程   Vue.js的整体架构基于虚拟DOM和响应式数据,当数据发生变化时,Vue会重新......
  • Vue插槽与作用域插槽
    title:Vue插槽与作用域插槽date:2024/6/1下午9:07:52updated:2024/6/1下午9:07:52categories:前端开发tags:VueSlotScopeSlot组件通信Vue2/3插槽作用域API动态插槽插槽优化第1章:插槽的概念与原理插槽的定义在Vue.js中,插槽(Slots)是一种强大的功能,它允许你......
  • ACM模板
    主席树区间修改#defineIOstd::ios::sync_with_stdio(0),cin.tie(0),cout.tie(0)#definebug(x)cout<<#x<<"is"<<x<<endl#include<bits/stdc++.h>#defineiter::iteratorusingnamespace std;typedeflonglongll;typedefpa......
  • Vue-router之页面跳转
    目录1.Vue Router1.1VueRouter的简介1.2安装1.3创建路由器实例2.router-link页面跳转2.1.router-link简介2.2使用路由对象的query属性进行传参1.Vue Router1.1VueRouter的简介官方文档见:https://router.vuejs.org/zh/introduction.htmlhttps://router.v......