Vue.js 是一款流行的前端框架，它能快速地构建复杂的交互式界面。Vue-cli 是官方提供的初始化工具，它能帮助我们快速地创建一个基于 Vue.js 的项目模板。但是，如果我们需要定制化自己的模板，该怎么办呢？这篇文章将向大家介绍如何自定义 Vue-cli 实现项目模板。
说明
在项目实施之前，请先确保已经安装了 Node.js 和 Vue.js 。
第一步：安装 Vue-cli
npm install -g vue-cli
安装完成之后，你可以使用以下命令来检查是否安装成功：
vue -V
2.9.6
第二步：创建项目模板
vue init webpack my-project
第三步：切换至项目目录
cd my-project
第四步：修改配置文件
找到 webpack.base.conf.js 文件，添加以下代码，将 src 目录下的文件复制到新建项目的文件夹中：
-- -------------------- ---- -------
----- ----------------- - ------------------------------
-------- -
--- -------------------
-
----- ----------------------- ----------
--- ------
------- ------
-
--
-第五步：安装所需依赖包
npm install
安装完成之后在终端中输入以下命令，启动项目：
npm run dev
第六步：执行项目模板
在项目文件夹同级目录下创建 generate.js 文件，输入以下代码：
-- -------------------- ---- -------
----- ---- - -----------------------------
--------- ---- -------------------- -------------------- ------- ------- ------- -- -
-- ------- -
-------------------- ----------
------
-
-------------------- -----------
-------------------- -----------
--此处需要注意的是，上面代码中的 <your-template-repo> 表示你的模板库， <your-new-project> 表示你需要创建的新项目名称。例如，我们创建了一个名为 vue-template 的模板库，需要创建一个名为 my-vue-project 的新项目，代码应为：
exec('vue init username/vue-template my-vue-project', (error, stdout, stderr) => {...})在终端中进入项目文件夹，执行以下命令，即可创建项目：
node generate.js
至此，自定义 Vue-cli 实现项目模板的步骤已经解释完毕。
总结
通过对 Vue-cli 自定义项目模板的学习，我们可以更加灵活地掌控项目的架构和功能。同时，也能为我们提升开发效率，使我们更加高效地完成任务。希望本篇文章能对您在构建 Vue.js 项目时有所帮助！
示例代码
webpack.base.conf.js
-- -------------------- ---- -------
----- ----------------- - ------------------------------
-------- -
--- -------------------
-
----- ----------------------- ----------
--- ------
------- ------
-
--
-generate.js
-- -------------------- ---- -------
----- ---- - -----------------------------
--------- ---- -------------------- -------------------- ------- ------- ------- -- -
-- ------- -
-------------------- ----------
------
-
-------------------- -----------
-------------------- -----------
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649fd9ca48841e9894c34be4