首页 > 其他分享 >『手撕Vue-CLI』拷贝模板

『手撕Vue-CLI』拷贝模板

时间:2024-06-05 22:56:06浏览次数:21  
标签:Vue CLI ncp 地址 path 拷贝 目录 模板

开篇

经过上篇文章的介绍,实现了可以根据用户选择的模板名称加上对应的版本号,可以下载对应的模板,并且将下载之后的文件存放在用户目录下的 .nue-template文件夹中。

接下来这篇文章主要实现内容是将下载的模板文件拷贝到当前所执行命令的目录下。

拷贝模板

例如我现在在终端当中输入 nue-cli create neo 命令,如下图:

从图中可以看到除了指令部分之外的内容就是所在的目录文件地址,我要操作的就是将之前下载的模板文件内容拷贝到这个目录下,即可。

如何拷贝?

获取到当前所在的目录地址,这个可以通过 Node 中的 path 模块进行实现,使用 path 模块中的 resolve 方法,将当前所在的目录地址获取到。

所以话不多说,先导入 path 模块:

const path = require('path');

导入之后先通过 path.resolve() 方法获取到当前所在的目录地址,打印在控制台看一下是否正确:

console.log(path.resolve());

为了我方便测试我将之前所编写的代码都先注释掉了:

然后执行 nue-cli create neo 命令,看一下控制台输出的内容:

从图中可以看到输出的内容就是当前所在的目录地址,这个是正确的。

当前所执行的命令目录位置拿到了,接下来就可以拿着这个路径加上输入指令的项目名称,拼接成一个新的路径,这个路径就是最终要拷贝的目录地址,代码如下先拼接打印给大家看看:

console.log(path.resolve(projectName));

测试方式与之前一样,我将之前的代码注释掉,然后执行 nue-cli create neo 命令,看一下控制台输出的内容:

从图中可以看到输出的内容就是当前所在的目录地址加上输入的项目名称,这个是正确的。

地址完成了,标题所存在的问题还是没有得到解决,那就是如何拷贝文件到这个目录下。

ncp

这里我要给大家在介绍一个库,这个库是 ncp,这个库是一个用于拷贝文件的库,使用这个库可以很方便的将文件拷贝到指定的目录下。

npm 地址:ncp

好,话不多说,要想使用这个库,首先要安装这个库:

npm install ncp

安装完成之后,导入这个库:

const ncp = require('ncp');

导入之后发现 ncp 这个库的函数返回的不是一个 Promise 对象:

所以需要手动将这个函数封装成一个 Promise 对象,后续我就可以用 Promise 的方式来调用这个函数,重新改写导入这个库的代码:

let ncp = require('ncp');
ncp = promisify(ncp);

接下来就是将用户目录中的模板拷贝到执行指令路径中即可,代码如下:

const destPath = 'C:\\Users\\BNTang\\.nue-template\\vue-simple-template';
await waitLoading('copying template...', ncp)(destPath, path.resolve(projectName));

测试一下,我也是将之前的代码注释掉,目标地址我写死了,执行 nue-cli create neo 命令,看看拷贝的效果:

从图中可以看到控制台输出的内容就是拷贝成功了,模板已经拷贝到了当前所在的目录下。

很不错也很顺利,记住我的测试过程,因为我在前面的章节测试中,我下载好了模板所以我就将上面的代码注释掉了,如果你们看到我文章进行编写与实现的时候,没有进行下载得要将上面的代码取消注释,下载模板,然后再进行拷贝。

后面拷贝的目标地址我会改写,慢慢来,好了,这篇文章就到这里,下一篇文章再继续。

标签:Vue,CLI,ncp,地址,path,拷贝,目录,模板
From: https://www.cnblogs.com/BNTang/p/18234096

相关文章

  • vue 实现路由权限方式2,通过菜单角色,和用户角色是否重合实现匹配过滤权限
    接口数据查看,业务方式查看给角色分配路由权限,然后路由信息上meta就会有哪些角色可以访问的数组。就是说一个路径,哪些角色可以访问,都在meta下的roles里面保存着接着用户角色分配前端代码实现核心代码通过用户信息上用户的角色数组和路由meta上的角色数组是否包含用户角色......
  • 前端-Vue 快速上手
    Vue概念:Vue是一个用于构建用户界面的渐进式框架①构建用户界面:基于数据动态渲染页面②渐进式:循环渐进的学习③框架:一套完整的项目解决方案,提升开发效率↑(理解记忆规则)   规则→官网(v2.cn.vuejs.org / cn.vuejs.org)Vue的两种使用方式:1.Vue核......
  • Vue 3 Teleport:掌控渲染的艺术
    title:Vue3Teleport:掌控渲染的艺术date:2024/6/5updated:2024/6/5description:这篇文章介绍了Vue3框架中的一个创新特性——Teleport,它允许开发者将组件内容投送到文档对象模型(DOM)中的任意位置,即使这个位置在组件的挂载点之外。Teleport旨在解决某些特定场景下的布局和......
  • Vue的viewUI框架安装与使用
    1.安装pycharm进入到项目目录C:\Users\Administrator\PycharmProjects\myvue02>npminstallview-design--save 2.引用在项目的src/main.js中加入如下代码【src/main.js】importVuefrom'vue'importAppfrom'./App.vue'importViewUIfrom'view-design&......
  • 合工大毕业论文LaTeX模板使用指南
    本文是在笔者为班级同学编写的指南的基础上修改而来的。前言LaTeX是目前主流的计算机排版系统之一。目前社区维护了一份合工大毕业论文的LaTeX模板(以下简称“模板”):https://github.com/HFUTTUG/HFUT_Thesis考虑到大部分同学对Word都谈不上精通,使用LaTeX排版毕设论文,可以......
  • vue中html导出成word
    vue中将html中内容转换为word文档导出,无需模板,可以导出echarts图表。使用html-docx-js、file-saver。先将html中内容获取,之后将页面上的元素转成图片,然后把图片放到word文件中进行导出。参考链接:https://blog.csdn.net/weixin_47494533/article/details/13701867......
  • vue中html导出成word
    vue中将html中内容转换为word文档导出,无需模板,可以导出echarts图表。使用html-docx-js、file-saver。先将html中内容获取,之后将页面上的元素转成图片,然后把图片放到word文件中进行导出。参考链接:https://blog.csdn.net/weixin_47494533/article/details/137018678 ......
  • Ant Design Vue 动态表头并填充数据
    AntDesignVue动态表头并填充数据AntDesignVue是基于AntDesign的Vue版本,它为Vue.js提供了一套高质量的UI组件库。在本文中,我们将介绍如何使用AntDesignVue创建一个动态表头并填充数据。首先,确保你已经安装了AntDesignVue。如果还没有安装,可以通过以下命......
  • pads选项设置模板
    目录(1)、常规页1、光标样式2、栅格3、文本译码4、自动备份(2)、设计页(3)、文本&线宽(4)、显示颜色​总所周知,PADS的选项设置多而复杂,每次使用都要重新设置一遍,这就太麻烦了,由此我打算自己给自己设置一个模板,方便以后使用,本文是PADSlogic的选项设置。(1)、常规......
  • 【vuex小试牛刀】
    了解vuex核心概念请移步https://vuex.vuejs.org/zh/#一、初始vuex#1.1vuex是什么就是把需要共享的变量全部存储在一个对象里面,然后将这个对象放在顶层组件中供其他组件使用父子组件通信时,我们通常会采用props+emit这种方式。但当通信......