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】

• 4、? Please enter your api proxy address. (https://testycsmy.kgxj.haikou.gov.cn)

【请输入你的后端接口代理地址（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

用了啥做成的呢？

• plop

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

• download-git-repo

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

plop使用的一些主要工具

• Inquirer.js

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

• handlebars

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

还待补充