定制化vue-cli Template/webpack

背景

之前的项目要不是前人搭建的，要不就是从 vue-cli 搭建，而后将一些旧项目公用的代码搬过来，这些操做下来一个小时估计是跑不了的了，因此搭建属于本身的 template 是一件省时省力的事情。

本文章不会讲到 vue-cli 的原理和实现，有兴趣的同窗能够阅读 从vue-cli源码学习如何写模板，这篇文章写的很好，足够理解 vue-cli 的原理了。

如何修改 template 文件

首先，须要从 template/webpack 下载官方 template/webpack 项目，咱们主要修改的地方是根目录下的meta.js文件和template目录；

meta.js：

主要改两个地方：prompts 和 filters，咱们用过 inquirer 库的都知道，prompt 这是一个命令行形式的问答工具，在使用vue init webpack my-project这个命令的时候，须要回答一些问题，就是依赖于 prompt 这个模块；

// prompts(节选)
prompts: {
    name: {
      when: 'isNotTest', // 表明不是test的时候询问(isNotTest能够看scenarios/index.js文件)
      type: 'string', // 问题的类型，这里 string 表明输入项目名字
      required: true, // 必须填写 name
      message: 'Project name', // 问题的描述
    },
    lint: {
      when: 'isNotTest',
      type: 'confirm',
      message: 'Use ESLint to lint your code?',
    },
    lintConfig: {
      when: 'isNotTest && lint', // 表明不是test而且上面lint问题选择yes才询问
      type: 'list', // 答案从choices中选择
      message: 'Pick an ESLint preset',
      choices: [
        {
          name: 'Standard (https://github.com/standard/standard)',
          value: 'standard',
          short: 'Standard',
        },
        {
          name: 'Airbnb (https://github.com/airbnb/javascript)',
          value: 'airbnb',
          short: 'Airbnb',
        },
        {
          name: 'none (configure it yourself)',
          value: 'none',
          short: 'none',
        }
      ],
    }
}
复制代码

// filters(节选)
filters: {
    '.eslintrc.js': 'lint', // .eslintrc.js文件只有lint问题选择yes才会建立
    'build/webpack.test.conf.js': "unit && runner === 'karma'", // webpack.test.conf.js文件只有unit问题选择yes而且runner问题选择karma选项才会建立
    'src/router/**/*': 'router' // src/router目录只有在router问题选择yes才会建立
  }
复制代码

template：

• 编写EOF条件

能够看到template文件夹看起来就是一个 vue init命令后的目录了，但仔细看文件的话能够看到差别：

// package.json/scripts
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    {{#if_eq runner "jest"}}
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    {{/if_eq}}
    {{#if_eq runner "karma"}}
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    {{/if_eq}}
    {{#e2e}}
    "e2e": "node test/e2e/runner.js",
    {{/e2e}}
    {{#if_or unit e2e}}
    "test": "{{#unit}}npm run unit{{/unit}}{{#unit}}{{#e2e}} && {{/e2e}}{{/unit}}{{#e2e}}npm run e2e{{/e2e}}",
    {{/if_or}}
    {{#lint}}
    "lint": "eslint --ext .js,.vue src{{#unit}} test/unit{{/unit}}{{#e2e}} test/e2e/specs{{/e2e}}",
    {{/lint}}
    "build": "node build/build.js"
  }
复制代码

能够看多在package.json文件里穿插着一些EOF风格的标签，这些标签可分为两种（能够本身扩展EOF条件）

{{#lint}}***{{/lint}}表示标签内的内容只有在lint问题选择yes才会存在

{{#if_eq runner "jest"}}***{{/if_eq}}表示标签内的内容只有在runner问题的答案等于jest的状况才会存在，我的能够扩展EOF的条件命令（在lib/generate.js, 默认有if_eq 和 unless_eq两个命令）

• 修改文件目录

这个直接将template的目录结构改变便可，这里把src目录改为本身习惯的目录结构

我本身的template

github：masongzhi/vue-template-webpack

用法：vue init masongzhi/vue-template-webpack my-project

vue-template-webpack 特色：

• 基于 template/webpack 模板
• 自定义目录结构
• 增长 vuex 选项
• 增长 filters 选项
• 增长 mock 服务器选项
• 增长 prettier 选项（不选择 lint 状况下，lint 状况请自行添加）

总结

其实我发觉在不介绍原理的状况下，感受写的挺乱的，因此建议你们能够先阅读 从vue-cli源码学习如何写模板，再看本文章进行实践；

建立好本身的template模板后，以后再搭建新项目就不用手动的复制黏贴了，确实是很方便的。

ps

项目文章：json-server的实践与自定义配置化