plop-vue-cli

基于plop的自定义vue前端脚手架

Usage no npm install needed!

<script type="module">
  import plopVueCli from 'https://cdn.skypack.dev/plop-vue-cli';
</script>

README

plop-vue-cli

基于plop的前端vue工程化脚手架



一、安装

  • 全局安装
npm i -g plop-vue-cli


二、创建vue工程


输入创建命令（在你要存放项目代码的目录下执行）

create-plop-vue

根据安装提示进行输入

  • 1、? Please input your project name.

【请输入你的工程名（String类型）】

  • 2、? Please input your project name.

? Please input your project name for Chinese. (项目名称) 【请输入你的中文项目名称（String类型），默认值：项目名称】

  • 3、? Do you need a vuex? (Y/n)

【你是否需要vuex组件（Boolean类型），输入Y或者n，默认值：Y】

【请输入你的后端接口代理地址（String类型），默认值：https://testycsmy.kgxj.haikou.gov.cn。】

接下来就是程序自动为您创建工程的步骤了


- 下载模版中...
√  getTemplate 下载模版完成.
√  ++ \smy\package.json
√  ++ \smy\vue.config.js
√  ++ \smy\src\main.js
√  deleteHbs 完成.
  • 执行步骤讲解

/**
 * 执行动作
 * 1、下载模版 并创建项目
 * 2、根据填写内容，配置package.json
 * 3、配置vue.config.js
 * 4、配置src/main.js
 * 5、清除.hbs模版文件
 */

执行完后该干嘛？

进入您刚创建好的项目里，安装依赖、运行代码，然后该干嘛干嘛。

npm install
  • 运行
npm run serve


用了啥做成的呢？

脚手架生成框架。集成各种工具，实现命令行询问以及获取用户输入值，并执行操作修改模版等。

从git等下载代码的工具，用于下载模版



plop使用的一些主要工具

一组通用的交互式命令行用户界面。plop的prompt询问，用的就是这了。

Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。 .hbs文件的模版引擎，用于修改设置模版。

还待补充