首页 > 其他分享 >『手撕Vue-CLI』获取下载目录

『手撕Vue-CLI』获取下载目录

时间:2024-06-01 15:22:01浏览次数:28  
标签:Vue CLI process 用户 获取 目录 下载

开篇

在上一篇文章中,简单的对 Nue-CLI 的代码通过函数柯里化优化了一下,这一次来实现一个获取下载目录的功能。

背景

在 Nue-CLI 中,我现在实现的是 create 指令,这个指令本质就是首先拿到模板名称和版本号之后,然后去进行下载对应的模板,关于下载那么肯定要面临的问题就是如何下载?下载到什么地方?

官方的 Vue-CLI 会先将模板下载到 用户目录 中,然后再拷贝到 执行指令的目录 中。

那么官方为什么要先下载到用户目录中呢?

因为下载好的模板可能还需要进行一些其它操作,例如:修改文件内容,删除文件等等。

好那么开始实现获取下载目录的功能。

实现

先去当前本机的用户目录进行查看一下,看看是什么样子的,先进入到 C 盘,然后找到用户目录:

再找到自己的用户名:

在自己的用户名文件夹当中,这个目录就是所说的用户目录,一般新电脑的设置不会开启显示隐藏的项目,如何开启?

点击显示隐藏的项目,然后就可以看到隐藏的项目了,什么是隐藏的项目呢?就是以 . 开头的项目,例如 .vscode.git 等等。

在里面就会存在使用 Vue-CLI 所拉取的模板,我这里因为是新电脑,我点进去会发现没有存在,但是经过我这些内容的介绍我想告诉大家的是,如何找到自己电脑上的用户目录。

好了,接下来就是实现获取下载目录的功能了,在 Node.js 中有一个模块叫做 os,这个模块可以获取到一些系统的信息,例如:用户目录,操作系统等等。

通过 process.env,可以获取当前电脑的环境变量,先来简单的打印看一下输出什么内容:

console.log(process.env);

通过观察控制台的输出结果发现一个 USERPROFILE 的环境变量,这个环境变量就是用户目录,好,接下来就好办了。

windows 的获取方式已经得知了,那么 mac 呢,所以这里就要区分一下平台,该如何进行区分呢?

这里也可以采用 process 模块,通过 process.platform 方法来获取当前系统的平台,windows 是 win32,mac 是 darwin,控制台打印一下看看:

console.log(process.platform);

知道了这些内容就够编写代码的知识储备,代码如下:

const currentPlatformKey = process.platform === 'win32' ? 'USERPROFILE' : 'HOME';
const downloadDirPath = `${process.env[currentPlatformKey]}\\.nue-template`;
console.log(downloadDirPath);

代码很简单其实就是三行代码,首先是根据当前的平台来获取对应的环境变量,如果是 windows 那么就是 USERPROFILE,如果是 mac 那么就是 HOME,这样一来就可以得出不同平台的用户目录地址,在从 process.env 中获取到对应的环境变量,然后拼接上 .nue-template 就是下载目录的地址了。

最后将这个地址返回出去,这样就可以在后续的代码中使用了。

标签:Vue,CLI,process,用户,获取,目录,下载
From: https://www.cnblogs.com/BNTang/p/18226005

相关文章

  • 基于SpringBoot+Vue的在线答疑管理系统设计与实现毕设(文档+源码)
            目录一、项目介绍二、开发环境三、功能介绍四、核心代码五、效果图六、源码获取:        大家好呀,我是一个混迹在java圈的码农。今天要和大家分享的是一款基于SpringBoot+Vue的在线答疑管理系统,项目源码请点击文章末尾联系我哦~目前有各类成......
  • 基于SpringBoot+Vue的在线BLOG网管理系统设计与实现毕设(文档+源码)
            目录一、项目介绍二、开发环境三、功能介绍四、核心代码五、效果图六、源码获取:        大家好呀,我是一个混迹在java圈的码农。今天要和大家分享的是一款基于SpringBoot+Vue的在线BLOG网管理系统,项目源码请点击文章末尾联系我哦~目前有各类......
  • 基于SpringBoot+Vue的校园博客管理系统设计与实现毕设(文档+源码)
          目录一、项目介绍二、开发环境三、功能介绍四、核心代码五、效果图六、源码获取:        大家好呀,我是一个混迹在java圈的码农。今天要和大家分享的是一款基于SpringBoot+Vue的校园博客管理系统,项目源码请点击文章末尾联系我哦~目前有各类成品毕......
  • Elasticsearch8.4安装及Java Api Client的使用
    目录简介一、ElasticSearch安装二、可视化界面(elasticserach-head)插件安装三、Kibana的安装四、ES核心概念五、IK分词器六、Rest风格说明:ES推荐使用的七、关于索引的操作1、PUT命令2、GET命令3、POST命令4、DELETE命令八、关于文档的操作九、整合SpringBoot,基于......
  • 4.HttpClient,微信小程序,SpringCache
    HttpClient,微信小程序,SpringCacheHttpClient:简介:HttpClient是ApacheJakartaCommon下的子项目,可以用来提供高效的、最新的、功能丰富的支持HTTP协议的客户端编程工具包,并且它支持HTTP协议最新的版本和建议;导入:在maven项目中的pom.xml文件直接导入<dependency> <group......
  • 1940java swing零售库存管理系统myeclipse开发Mysql数据库CS结构java编程
    一、源码特点   javaswing零售库存管理系统是一套完善的窗体设计系统,对理解SWINGjava编程开发语言有帮助,系统具有完整的源代码和数据库,,系统主要采用C/S模式开发。应用技术:java+mysql开发工具:Myeclipse8.5、jdk。java零售商品库存管理系统二、功能介绍零售库......
  • 1882java密室逃脱管理系统 Myeclipse开发mysql数据库web结构java编程计算机网页项目
    一、源码特点java密室逃脱管理系统是一套完善的web设计系统,对理解JSPjava编程开发语言有帮助采用了java设计,系统具有完整的源代码和数据库,系统采用web模式,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发,数据库为Mysql,使用java语言开发。二、功能介绍(1)......
  • 使用 Vue 3 和 JsBarcode 开发一维码显示组件
    在现代前端开发中,条形码(或称一维码)在许多应用场景中非常常见,例如商品管理、物流跟踪等。本文将介绍如何使用Vue3和JsBarcode库来创建一个灵活的一维码显示组件,并展示如何在应用中使用它。1.安装必要的依赖首先,我们需要安装Vue3和JsBarcode。如果你还没有创建Vue3......
  • 汽车电子专栏目录一览
    最近开始整理汽车电子专栏的目录。方便找到想要的内容,与大家一起学习。目录一、 AUTOSAR规范与ECU软件开发篇幅目录二、CDD复杂驱动讲解篇幅目录三、ETAS的运用四、自动驾驶芯片驾驶芯片五、三电技术六、S32KXXMCU(NXP汽车常用芯片)99999、未整理一、 AUTOSAR规......
  • vue3 组件级权限控制
    权限控制程度分为:1.页面级2.组件级3.代码级1.页面级这是大部分前端遇到的级别。依靠路由守卫,如果没有权限,就看不到菜单,就进不到页面。不会给页面带来侵入性。什么是侵入性,就是写页面组件的时候,还要考虑权限。2.组件级有没有权限都可以看到页面组件,但是不同权限的人,......