『手撕Vue-CLI』拷贝模板

vue,cli · 浏览次数 : 0

小编点评

## 使用 Node.js 实现项目模板拷贝功能 本篇文章将继续实现根据用户选择的模板名称加上对应的版本号的功能,并实现将下载后的模板文件拷贝到当前所执行命令的目录下。 ### 步骤 1: 根据模板名称和版本号创建项目 首先,在终端中运行以下命令: ```sh nue-cli createneo your-template-name ``` 这将创建一个名为 `your-template-name` 的新项目。 ### 步骤 2: 下载模板文件并存放至 .nue-template 文件夹 在用户选择模板后,我们可以将其文件存放在项目目录下的 `.nue-template` 文件夹中。具体实现可以在用户选择模板时,使用 HTTP 请求或其他方法自动下载模板文件并将其存储在指定目录。 #### 使用 Node.js 实现下载模板并存储至 .nue-template 文件夹 1. 首先,导入必要的 Node.js 模块:`http`, `fs`, 和 `path`。 ```js const http = require('http'); const fs = require('fs'); const path = require('path'); ``` 2. 定义一个函数,使用 `http.get()` 方法从模板服务器下载模板文件。 ```js function downloadTemplate(url, destination) { http.get(url, (response) => { let data = ''; response.setEncoding('utf8'); response.on('data', (chunk) => { data += chunk; }); response.on('end', () => { fs.writeFile(destination, data, (err) => { if (err) { console.error(`Failed to write template: ${err}`); } }); }); }); } ``` 3. 获取用户选择的模板名称及其版本号。 ```js console.log('Please select a template:'); console.log('1. Vue Simple'); console.log('2. React Basic'); const choice = +prompt('Enter the number (1/2): '); const templateName = `vue-simple-template`; const version = `1.0.0`; ``` 4. 调用 `downloadTemplate()` 函数,从模板服务器下载模板文件,并将其存储在项目目录下的 `.nue-template` 文件夹中。 ```js const url = `https://template-server.com/template-downloads/${templateName}/${version}`; constdestination = path.resolve`.nue-template`; downloadTemplate(url, destination); ``` 5. 使用 `path.resolve()` 方法获取当前目录路径,并将模板文件拷贝至该目录。 ```js const newPath = path.resolve(__dirname, 'your-project-name'); ncp(newPath, './.nue-template/vue-simple-template', (err) => { if (err) { console.error(`Failed to copy template: ${err}`); } else { console.log('Template copied successfully!'); } }); ``` 6. 最后,使用 `ncp` 库将模板文件从用户的 `.nue-template` 文件夹复制到当前项目的指定目录。 ```js const destPath = 'C:\\\\Users\\\\BNTang\\\\.nue-template\\\\vue-simple-template'; await waitLoading('copying template...', ncp)(destPath, path.resolve(projectName)); ``` 这样,我们就实现了将下载的模板文件拷贝到当前所执行命令的目录下。在实际应用中,可以将上述代码放入一个脚本文件中,并在终端中使用命令行运行。 通过这个例子,您将了解如何使用 Node.js 和一些额外库来实现项目的模板功能,从而简化开发人员创建和部署项目的过程。 --- 请注意,示例代码可能已经过时或存在问题;因此,请谨慎使用,必要时请自行修改。

正文

开篇

经过上篇文章的介绍,实现了可以根据用户选择的模板名称加上对应的版本号,可以下载对应的模板,并且将下载之后的文件存放在用户目录下的 .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』拷贝模板相似的内容:

『手撕Vue-CLI』拷贝模板

开篇 经过上篇文章的介绍,实现了可以根据用户选择的模板名称加上对应的版本号,可以下载对应的模板,并且将下载之后的文件存放在用户目录下的 .nue-template文件夹中。 接下来这篇文章主要实现内容是将下载的模板文件拷贝到当前所执行命令的目录下。 拷贝模板 例如我现在在终端当中输入 nue-cli

『手撕Vue-CLI』自动安装依赖

开篇 经过『手撕Vue-CLI』拷贝模板,实现了自动下载并复制指定模板到目标目录。然而,虽然项目已复制,但其依赖并未自动安装,可能需要用户手动操作,这并不够智能。 正如前文所述,我们已经了解了业务需求和背景。那么,接下来我们将直接深入探讨核心实现细节。 自动安装依赖 在前文中,我们已经将模板文件复制

『手撕Vue-CLI』完善提示信息

前言 经过『手撕Vue-CLI』自动安装依赖,已经实现了自动安装依赖的功能。 然而,虽然项目已复制并安装依赖,但其提示信息并不够友好,于是我试着去运行了一下vue create,发现其提示信息是这样的: 于是我决定完善提示信息,也借此机会完善一下项目的代码,变量命名等。 完善提示信息 完善变量命名

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

开篇 经上篇文章的介绍,实现了获取下载目录地址,接下来实现下载指定模板的功能。 背景 通过很多章节过后,已经可以拿到模板名称,模板版本号,下载目录地址,这些信息都是为了下载指定模板做准备的。 实现 如何从 GitHub 下载模板 可以借助 download-git-repo 这个库来下载 GitHu

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

开篇 在上一篇文章中,简单的对 Nue-CLI 的代码通过函数柯里化优化了一下,这一次来实现一个获取下载目录的功能。 背景 在 Nue-CLI 中,我现在实现的是 create 指令,这个指令本质就是首先拿到模板名称和版本号之后,然后去进行下载对应的模板,关于下载那么肯定要面临的问题就是如何下载?下

『手撕Vue-CLI』函数柯里化优化代码

开篇 在上一篇文章中,给 nue-cli 添加了拉取版本号的功能,这一次来优化一下代码,使用函数柯里化的方式来优化代码。 实现 函数柯里化 函数柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 在进行改写之前,首先给大家简单介绍一下函数柯里化,写一个简单的例子来演示一下。

『手撕Vue-CLI』拉取版本号

开篇 在上一篇文章中,给 nue-cli 添加了与用户终端交互的功能,这一次来实现一个拉取版本号的功能。 这个功能的背景是,有时候我们在使用脚手架的时候,不同版本的脚手架可能会有不同的功能,所以用户有可能会根据自己的需求选择不同的版本,所以这里将会实现一个根据用户选择的版本号,拉取对应的版本号的模板

『手撕Vue-CLI』添加终端用户交互

前言 经过上一篇文章的梳理,实现了可以从 GitHub 上拉取模板项目名称,已经可以得知可使用的模板有哪些了,那么我觉得是不是要进行选择呢?所以这一篇文章就来实现终端用户交互,让用户可以自己选择想要使用的模板。 实现 在 NodeJS 当中,已经有人为我们封装好了一个库,叫做 inquirer,可以

『手撕Vue-CLI』拉取模板名称

前言 好,经过上篇文章的介绍,已经可以有处理不同指令的能力了,接下来我们就来处理 vue create 指令,这个指令的本质就是从网络上下载提前准备好的模板,然后再自动安装模板中相关依赖。 所以实现 create 指令分为两步: 下载指定模板 安装模板中的依赖 先来看看官方的吧,我在终端中已经输入了

『手撕Vue-CLI』处理不同指令

前言 在上一篇『手撕Vue-CLI』添加自定义指令中,已经实现了自定义指令的添加,但是指令还是比较简单的,只是简单的打印一句话,那么在实际运用场景中,可能会有更多的需求,比如可能需要在指令中传递参数,或者需要在指令中进行一些复杂的操作,那么这个时候我们就需要对指令进行处理了。 创建指令处理文件 在上