需求的产生

在使用vue-cli初始化一个项目时，webpack只会提供给我们一个包含最基础内容的模板，但是每次新建一个项目是需要将以前的一些配置、工具类和css文件复制过来，或者要重新去安装一些常用的依赖和插件，这样就造成了很大的不便和时间的浪费，所以就使得维护一个常用的项目开发模板就变的很有必要了
下面是我常用的文件目录

src
├─api  // 接口
├─assets // 图片 或者 初始化的css文件
├─components  // 公用组件
├─until // 第三方以及工具类
├─store  //vuex  
├─router // 路由
└─views // 页面

如何自定义一个自己的vue-cli模板

fork一个模板

因为从头开始写时间成本比较大，所以我们可以先从 https://github.com/lipengfei00/vuejs-template上clone一份代码下来，然后在这份代码的基础上修改就可以了
vuejs-template的目录

├─.circleci
├─docs  // 一些文档类的东西
├─untils // 工具类
  ...  // 一些不重要的文件
├─  meta.js // 该文件必须导出为一个对象, 用于定义模板的 meta 信息
└─template // 模板内容

meta.js

meta.js主要是定义一些脚手架和模板的配置，目前可定义的字段如下：

prompts<Object>：收集用户自定义的数据，如项目名称、项目描述、作者、是否安装xxx包之类的
filters<Object>：根据条件过滤一些文件，如用户不安装router时，过滤掉模板中的router文件夹
complete<Function>：模板生成后的回调函数，可以在这里执行自动安装依赖
completeMessage<String>：模板生成后的提示信息，后于complete执行
helper<Object>：自定义的Handlebars辅助函数

prompts

来一张无比熟悉的图

image.png

然后在看一下prompts的代码：

    name: {
      when: 'isNotTest',
      type: 'string',
      required: true,
      message: 'Project name',
    },
    description: {
      when: 'isNotTest',
      type: 'string',
      required: false,
      message: 'Project description',
      default: 'A Vue.js project',
    },
    author: {
      when: 'isNotTest',
      type: 'string',
      message: 'Author',
    },
    router: {
      when: 'isNotTest',
      type: 'confirm',
      message: 'Install vue-router?',
    },
    autoInstall: {
      when: 'isNotTest',
      type: 'list',
      message:
        'Should we run `npm install` for you after the project has been created? (recommended)',
      choices: [
        {
          name: 'Yes, use NPM',
          value: 'npm',
          short: 'npm',
        },
        {
          name: 'Yes, use Yarn',
          value: 'yarn',
          short: 'yarn',
        },
        {
          name: 'No, I will handle that myself',
          value: false,
          short: 'no',
        },
      ],
    },

图上的这些配置都是由prompts生成的，type是答案类型，在用户输入完所有的配置后，template目录下的所有文件可以根据用户输入的配置，经过 Handlebars语法，生成对应的代码，当然生成代码的逻辑需要自己去写，比如用户确认使用vue-router时，main.js中就会自动import router

{{#router}}
import router from './router'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
//类似 {{#if_eq lintConfig "airbnb"}};{{/if_eq}}是启用lint后一些语法的检查

{{/router}}

filters

filters会根据用户输入的配置来过滤掉不需要的文件或文件夹，例如用户不使用vue-router，过滤掉router文件夹，使用vux，则生成store文件夹

{
  'src/router/**/*': 'router',
  'src/store/**/*': 'vuex',
}

complete

在模板生成后的回调函数，在这里可以执行一些自己想做的事情，比如自动下载依赖，依赖下载完成后自动启动项目

// untils/index.js
exports.installDependencies = function installDependencies(
  cwd,
  executable = 'npm',
  color
) {
  // console.log(`\n\n# ${color('Installing project dependencies ...')}`)
  console.log(`\n\n# ${color('安装依赖中 ...')}`)
  console.log('# ========================\n')
  return runCommand(executable, ['install'], { cwd })
}
// meta.js
const { installDependencies } = require('./utils')
module.exports = {
  complete: () => {
    // cmd输出信息（字）的颜色
    installDependencies('项目地址', 'npm', color).then(() => {
      // Do other thing...
    });
  }
}

helper

在helper中可以注册一些自定义的Handlebars辅助函数，方便自己去处理一些数据，如

  // 注册
  helper: {
    fnName: (arguments) => {
      // do something
      return result
    } 
  }
  // 使用
  {{#fnName arg1 arg2 ...}}
    // something
  {{/fnName}}

使用

代码编写完后提交到github自己的仓库中，就可以使用了

  // 需先安装 npm install -g @vue/cli-init
  vue init lipengfei00/vuejs-template#main project-name

自定义个性化的vue-cli模板