一、Vue Cli 3.x和2.x的区别
- 主要区别
- 安装&项目构建
  - CLI安装
cli 2.x
cli 3.x
3.x 安装时，如果之前安装了2.x需要卸载2.x再安装
- cli3.x
文件目录
二、制作自定义模板
- Preset
Prompts
Generator
关键步骤
- 创建新的模板
GeneratorAPI
- Generator 作用
三、实战
四、问题
- preset 项目如何配置 eslint ？
  - 背景
  - 结论
如何删除 vue-cli3 创建的默认目录或文件？
- 背景
- 结论
如何远程跑gitlab上的仓库代码？
配置文件以 . 开头的文件的特殊写法
五、其他记录

一、Vue Cli 3.x和2.x的区别

主要区别

安装与项目构建
项目目录变化
项目配置变化
安装&项目构建
CLI安装
```javascript
cli 2.x
npm install -g vue-cli

cli 3.x

3.x 安装时，如果之前安装了2.x需要卸载2.x再安装

npm install -g @vue/cli

<a name="IkFOF"></a>
#### 项目构建
<a name="qk77a"></a>
##### cli2.x
```javascript
vue init <template-name> <project-name>
npm i 
npm run dev

cli3.x

#安装新增TypeScript配置选项
#新增图形化安装方法
#保留了2.x之前的安装方法
vue create hello-world
npm i
npm run serve
# 使用vue ui创建新项目(3.x新增)
vue ui
# 使用旧版（2.X）创建
npm install -g @vue/cli-init
# 'vue init'的运行效果与‘vue-cli@2.x’相同
vue init webpack projectname

文件目录

Screen Shot 2020-12-14 at 4.13.48 PM.png

二、制作自定义模板

  首先需要了解的是Vue CLI 3.0不像Vue CLI2.+可以通过 `vue init webpack my-project` 这样指定模板，只有通过预设(Preset)<br />两个方案

自定义一套Preset，template写在preset里面。(目前选这个)
开发一个自己用的插件。
Preset
定义

一个包含创建新项目所需预定义选项和插件的JSON 对象**。**

还可以理解为一套预置的项目模板，也就是本文要讲的。

在 `vue create` 过程中会有手动选择配置选项的一个过程，保存的 preset 会被放在你的 home 目录下的一个配置文件中 (`~/.vuerc`)。你可以通过直接编辑这个文件来调整、添加、删除保存好的 preset。<br />这里有一个 preset 的示例：

{
"useConfigFiles": true,
"cssPreprocessor": "sass",
"plugins": {
  "@vue/cli-plugin-babel": {},
  "@vue/cli-plugin-eslint": {
    "config": "airbnb",
    "lintOn": ["save", "commit"]
  },
  "@vue/cli-plugin-router": {},
  "@vue/cli-plugin-vuex": {}
}
}

preset和插件的区别

可以看到他们两个的区别就是插件必须有一个 Service 插件（这个东西比本文讲的插件范畴要窄），而 Preset 必须包含一个 preset.json

允许插件的命令提示

每个插件在项目创建的过程中都可以注入它自己的命令提示，不过当你使用了一个 preset，这些命令提示就会被跳过，因为 Vue CLI 假设所有的插件选项都已经在 preset 中声明过了。
在有些情况下你可能希望 preset 只声明需要的插件，同时让用户通过插件注入的命令提示来保留一些灵活性。
对于这种场景你可以在插件选项中指定 "prompts": true 来允许注入命令提示：

{
"plugins": {
  "@vue/cli-plugin-eslint": {
    // 让用户选取他们自己的 ESLint config
    "prompts": true
  }
}
}

Prompts

它是一个数组
示例如下：

// 注意这段代码下面会提到
module.exports = [
{
  type: 'list', // 即类型为 选择项
  name: 'module', // 名称，作为下面 generator 函数 options 的键
  message: '请选择你要生成的模块', // 提示语
  choices: [
    { name: 'Module1', value: 'module1' },
    { name: 'Module2', value: 'module2' },
    { name: 'Module3', value: 'module3' }
  ],
  default: 'module0',
},
{
  type: 'input', // 类型为 输入项
  name: 'moduleName',
  message: '请输入模块名称',
  default: 'myModule'
}
]
复制代码

当然用不到的话直接给空数组就行哈。
执行的效果大概就是这样：
Vue cli 3定制自己的开发模板 - 图2

Generator

可以叫它生成器，它导出一个函数，该函数接收三个参数

api : 一个 GeneratorAPI 实例
options: 可以先简单理解为 prompts 问题数组的用户输入 组合成的选项对象

rootOptions: 整个 preset.json 对象

// 这些代码本质上跑在 node 上，所以都是 node 的语法
module.exports = (api, options, rootOptions) => {
// 修改 `package.json` 里的字段
api.extendPackage({
 scripts: {
   test: 'vue-cli-service  command'
 }
})
// 复制并用 ejs 渲染 `./template` 内所有的文件
api.render('../template')
if (options.module === 'module1') { 
 // options.module 可以访问上面问题数组的第一个对象的值，默认为: 'module0'
 console.log(`Your choice is ${options.module}`)
}
if (options.moduleName === 'myModule') {
 // options.moduleName 可以访问到用户从控制台输入的文字
 console.log(`Your input is ${options.moduleName}`)
}
}

关键步骤

官方教程，在插件开发指南里面

创建新的模板

当你调用 api.render('./template') 时，该 generator 将会使用 EJS 渲染 ./template 中的文件 (相对于 generator 中的文件路径进行解析)
想象我们正在创建 vue-cli-auto-routing 插件，我们希望当插件在项目中被引用时做以下的改变：

创建一个 layouts 文件夹包含默认布局文件；
创建一个 pages 文件夹包含 about 和 home 页面；
在 src 文件夹中添加 router.js 文件

为了渲染这个结构，你需要在 generator/template 文件夹内创建它：
Vue cli 3定制自己的开发模板 - 图3
模板创建完之后，你应该在 generator/index.js 文件中添加 api.render 调用：

module.exports = api => {
  api.render('./template')
}

GeneratorAPI

  一个发布为 npm 包的 CLI 插件可以包含一个 `generator.js` 或 `generator/index.js` 文件。插件内的 generator 将会在两种场景下被调用：

在一个项目的初始化创建过程中，如果 CLI 插件作为项目创建 preset 的一部分被安装。
插件在项目创建好之后通过 vue invoke 独立调用时被安装。

Generator 作用
向 package.json 注入额外的依赖或字段，并向项目中添加文件
使用ejs渲染 generator/template 下的文件。

示例：

module.exports = (api, options, rootOptions) => {
  // 修改 `package.json` 里的字段
  api.extendPackage({
    scripts: {
      test: "vue-cli-service test"
    }
  });
  // 复制并用 ejs 渲染 `./template` 内所有的文件
  api.render("./template");
  if (options.foo) {
    // 有条件地生成文件
  }
};
复制代码

三、实战

（以下内容来自作者savokiss，仓库来自作者savokiss的vue-preset-template）

直接跑笔者的仓库

vue create --preset savokiss/vue-preset-template <project-name>
复制代码

clone 下来跑本地代码

vue create --preset ./vue-preset-template <project-name>
复制代码

跑 git 仓库的 preset

vue create --preset direct:<git-clone-url> <project-name>
复制代码

现在距离发布自己的项目模板只有一步之遥啦~ 那就是： 填充 template 文件夹的内容，其实直接把项目中用到的文件放进去就可以了。

四、问题

preset 项目如何配置 eslint ？

背景

preset 项目可以在 preset.json 中配置 eslint 插件，例如：@vue/cli-plugin-eslint；
preset 项目可以在 generator/index.js 中配置 eslint 相关依赖及配置；
同时两种配置会冲突；

结论
preset.json 中添加 @vue/cli-plugin-eslint 这个插件带来的是 eslint 整套配置，包含依赖、rule、githook；
generator/index.js 中配置 eslint 主要通过自己改写 package.json 以及 eslintConfig 内容来配置 eslint，每一处都需要自己写；
preset.json 与 generator/index.js 的配置可能会产生冲突，例如对 eslintConfig rules 进行配置，如果配置项是数组，那么最终创建的项目里此项会合并两处配置，导致配置错误；

如何删除 vue-cli3 创建的默认目录或文件？

背景

自己编写的 preset 有一套自定义目录结构，但是 vue-cli3 创建项目后总会有一些默认结构：
```
/public
/src/main.js
/src/App.vue
/src/components/HelloWorld.vue
```
结论

在 /generator/index.js 中利用 GeneratorAPI 进行目录文件编辑：

// generator
module.exports = (api, options, rootOptions) => {
// 删除 vue-cli3 默认的 /src 和 /public 目录
api.render(files => {
  Object.keys(files)
    .filter(path => path.startsWith('src/') || path.startsWith('public/'))
    .forEach(path => delete files[path])
})
// 根据自定义模板生成项目结构
api.render('./template')
}

如何远程跑gitlab上的仓库代码？

vue create --preset direct:https://git.hrlyit.com/luojinxu/xxxxxxx.git <project-name> --clone

配置文件以 `.` 开头的文件的特殊写法

以. 开头的文件在template里要以“_”开头。就像 .env 文件在template里要写成 _env 文件名。

五、其他记录

“prompts” : true 的提示可选只在plugins这一项里面可以用，并且在具体的类似@vue/cli-plugin-unit-mocha里面写上”prompts” : true，并不会跳出选项。

以上内容部分借鉴文章源自：
作者：cklwblove 文博
链接：https://cklwblove.github.io/vue-preset/#%E5%A6%82%E4%BD%95%E4%BB%8E%E4%BB%BB%E6%84%8F-git-%E4%BB%93%E5%BA%93%E8%8E%B7%E5%8F%96-remote-preset-%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE%EF%BC%9F
来源：github文章
作者：savokiss
链接：https://juejin.cn/post/6844903829985722381
来源：掘金
作者：MrGaoGang
链接：https://juejin.cn/post/6844903988781907975
来源：掘金

Vue cli 3定制自己的开发模板