前端自定义Vue脚手架

自定义项目模版并使用

可参考网站：vue init定制团队模板之meta.js/meta.json写法入门 - web得胜 - 博客园

1.从https://github.com/vuejs-templates/webpack下载一个模板

2.模板位置

方法一：

可将下载的模板放到C:\Users\Admin\.vue-templates里面，若没有.vue-templates可以新建一个

方法二：

自定义模板的位置

注：不同的模板位置对应的初始化命令不同（详见第5条）

3.下载下来的模板目录结构

4.自定义命令和模板内容

如果需要自定义命令和模板内容的话，一般只需要修改meta.js和template文件就可以。

meta.js主要是定义模板的一些配置

prompts: 收集用户自定义数据，初始化项目时可选的提示语（图2），用法如下所示（图1）：

type为string，可以在初始化创建项目时自定义输入的内容

type为list，可以在choices里面自定义选项的名称

type为confirm，使用默认的选项yes和no

图一

图二

filters: 根据条件过滤文件，使用方法如下：

template存放自定义的模板内容

将template下的内容替换成wadp3.0-demo的内容，可以通过之前在meta.js里面的定义的内容来判断某些代码是否显示。

如果prompts中的type类型为list,可以用if_eq，如下：

如果prompts中的type类型为confirm,直接如下使用即可：

需要注意的是，template文件里面所有的 {{ XXX }} 都需要在前面加个 \ （如下图），否则初始化创建项目完成后， {{ XXX }} 将不显示。

初始化项目

   将下载下来的官方模板修改成我们自己想要的模板后，就可以进行初始化。

方法一：

若将模板放到了C:\Users\Admin\.vue-templates里面，初始化命令为：

vue init webpack test --offline

（webpack：下载的库的名称，test：自定义的初始化项目名称）

方法二：

若自定义了模板的位置，初始化命令为：

vue init E:\A-test\webpack test

（E:\A-test\webpack：模板位置，test：自定义的初始化项目名称）