前言
vue-cli-plugin-ct-template 是一个基于 vue-cli3 集成的工具，用于快速生成基础模板、组件模板等，适用于 Vue 项目开发。通过 vue-cli-plugin-ct-template，可以大大提高开发效率，减少重复代码的编写，使得团队协作开发更加轻松快捷。
安装
- 先安装 Vue CLI 3
Vue CLI 是一个官方发布的基于 Vue.js 的脚手架工具，提供了针对 Vue.js 快速构建项目的完整开发工具，支持 Vue Cli3/4/5 的项目，npm 官网上有详细的安装说明。
- 安装 vue-cli-plugin-ct-template
在项目中执行以下命令安装 vue-cli-plugin-ct-template 插件：
vue add ct-template
使用
vue-cli-plugin-ct-template 插件基于 EJS 模板语言，根据预设的模板和参数快速生成业务代码，同时满足个性化开发需求，可以通过插件提供的配置项进行自定义调整。
1. 生成简单模板
在 vue-cli-service 中使用快速生成基础模板：
vue invoke ct-template
选择模板类型：simple，并输入模板名称，即可在指定位置生成一个基础模板。在模板中可以根据需要引入自己的组件和样式文件，在简单模板中，我们可以添加一个 HelloWorld 的组件：
-- -------------------- ---- -------
----------
-----
------ --- -------
------
-----------
--------
------ ------- -
------ -
------ -
---- ------- -------
--
-
--
---------2. 生成组件模板
在 vue-cli-service 中使用快速生成组件模板：
vue invoke ct-template
选择模板类型：component，并输入组件名称和相应文件路径，即可在指定位置生成一个组件模板。在组件模板中，我们可以定义一个按钮组件：
-- -------------------- ---- -------
----------
------- ---------------- ---------------------- ---------
-------------
---------
-----------
--------
------ ------- -
------ -
----- -
----- -------
-------- --
--
----- -
----- -------
-------- --
-
--
--------- -
--------- -
------ ------- ------------------- --------------------
-
-
--
---------
-------
---- -
-------- --- -----
-------------- ----
-
------------ -
----------------- ------
------ -----
-
-- --- ---- ------ --- --
--------3. 自定义模板
在 vue.config.js 中，可通过添加配置项定制模板结构、文件名、类名等参数，详细配置请参考 vue-cli-plugin-ct-template 文档。
-- -------------------- ---- -------
-------------- - -
-------------- -
----------- -
------------- --------------
---------- -------------------
--------------- -
--- ------
---- --------
----- ------
--
---------- -
--- --------------
---- --------------
----- -------------
--
---- -
------- ----
--
-------- -
-
----- --------
----- -------
-------- ---------
--------- ------- -- -------
-
-
-
-
--以上是 vue-cli-plugin-ct-template 的基本使用流程和示例代码，欢迎有兴趣的同学尝试使用本插件进行 Vue 项目开发，可以大大提高开发效率，避免不必要的重复代码编写，让前端开发更加简单高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66d34