Как настроить свой собственный шаблон vue-cli

Настройте свой собственный шаблон vue-cli

В процессе использования vue-cli широко используемые шаблоны веб-пакетов предоставляют нам только самое основное содержимое, но каждый раз, когда нам нужно создать новый проект, нам нужно перемещать некоторые конфигурации предыдущего проекта, что вызывает довольно большой Разница.Удобно, если это команда, то ведение общего шаблона, я считаю, вполне необходимо.
Например, ниже приведен каталог, который я использую для создания проектов.

src
├─api  //接口
├─assets //图片
├─components  //公用组件
├─css  //样式 主要是scss
├─js //第三方以及工具类
├─page  //页面
├─router //路由
└─store  //vuex

Давайте поговорим о том, как настроить собственный шаблон vue-cli.

Форк собственный шаблон

отGitHub.com/v UE JS-temp…Разветвите библиотеку, а затем отправьте свои изменения в [собственную ветку], потому что большая часть нашего контента все еще изменяется на этой основе.

Для анализа исходного кода vue-cli обратитесь к этой статье.Узнайте, как писать шаблоны из исходного кода vue-cli

vuejs-templates/webpackКаталог выглядит следующим образом:

│  .gitignore
│  circle.yml
│  deploy-docs.sh
│  LICENSE
│  meta.js   //该文件必须导出为一个对象, 用于定义模板的 meta 信息
│  package.json
│  README.md
│  test.sh
├─docs  // 一些介绍该模板一些模块的文档
└─template  //模板的内容


D:\work\nodetest\webpack>

meta.js

meta.jsВ основном, чтобы определить некоторые конфигурации шаблона, определяемые в данный момент поля следующие:

подсказки: собирать пользовательские данные
фильтры: фильтровать файлы по условиям
completeMessage: подсказка, выдаваемая после рендеринга шаблона, поддерживает выражение усов руля.
complete: функция обратного вызова после завершения рендеринга шаблона, которая имеет приоритет над completeMessage.
helpers: пользовательские вспомогательные функции Handlebars
prompts

полезныйvue-cliУчащиеся должны были видеть картинку ниже

image

посмотриpromptsкод
```
 "prompts": {
    "name": {  //项目名
      "type": "string",
      "required": true,
      "message": "Project name"  
    },
    "description": {  
      "type": "string",
      "required": false,
      "message": "Project description",
      "default": "A Vue.js project"
    },
    "author": {
      "type": "string",
      "message": "Author"
    },
    "router": {   
      "type": "confirm",
      "message": "Install vue-router?"
    },
    ...   
 }
```
После того, как все действия пользователя выполнены,templateВсе файлы в каталоге будут использоватьHandlebars(Узнайте о синтаксисе здесь) для рендеринга.Введенные пользователем данные будут использоваться как данные рендеринга шаблона, например, вcmdПодтвердить использованиеrouterпосле, затемmain.jsбудуimport router，main.jsИсходный код среды:
```
{{#router}}
import router from './router'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
//类似 {{#if_eq lintConfig "airbnb"}};{{/if_eq}}是启用lint后一些语法的检查

{{/router}}
```
Поскольку разработка часто используется дляvuex, мы можем добавитьvuex,Исправлятьmeta.js
```
 "vuex":{
      "type": "confirm",
      "message": "Install vuex?"
    },
```
В процессе установки вам будет предложено установитьvuexохватывать

helper

надif_eq, а в исходном кодеunless_eqЭто вспомогательная функция, зарегистрированная в оригинальном vue cli, generate.js в vue-cli:
```
# vue-cli/lib/generate.js

//...

// register handlebars helper
Handlebars.registerHelper('if_eq', function (a, b, opts) {
  return a === b
    ? opts.fn(this)
    : opts.inverse(this)
})

Handlebars.registerHelper('unless_eq', function (a, b, opts) {
  return a === b
    ? opts.inverse(this)
    : opts.fn(this)
})
```
Аналогичным образом, вы также можете настроить некоторые функции, чтобы облегчить собственную обработку некоторых данных, вmeta.jsсерединаhelpersВы можете добавить к объекту свои собственные методы, например зарегистрировать один из них в исходном коде.if_orМетоды, которые вы можете использовать в файле{{#if_or a b}}{{/if_or}}использовать
```
"helpers": {
    "if_or": function (v1, v2, options) {
      if (v1 || v2) {
        return options.fn(this);
      }

      return options.inverse(this);
    }
  },
```
filters

filtersЯвляется фильтровать файлы по условиям, исходный код:
```
 "filters": {
    ".eslintrc.js": "lint",
    ".eslintignore": "lint",
    "config/test.env.js": "unit || e2e",
    "test/unit/**/*": "unit",
    "build/webpack.test.conf.js": "unit",
    "test/e2e/**/*": "e2e",
    "src/router/**/*": "router"  //例如上面的 router 为true的时候，就会加入这个目录
  },
```
Точно так же здесь я могу добавить свой собственный каталог vuex, когдаvuexдляtrue, этот каталог будет импортирован
```
 "filters": {
    ".eslintrc.js": "lint",
    ".eslintignore": "lint",
    "config/test.env.js": "unit || e2e",
    "test/unit/**/*": "unit",
    "build/webpack.test.conf.js": "unit",
    "test/e2e/**/*": "e2e",
    "src/store/**/*": "vuex",  //加入自己的目录
    "src/router/**/*": "router"
  },
```
затем вmain.jsпредставлятьvuex
```
{{#vuex}}  //vuex为true的时候就会写入这些
import Vuex from 'vuex'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
import store from  './store/store'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
Vue.use(Vuex){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
{{/vuex}}

//store.js 文件是我写vuex的入口

new Vue({
  el: '#app',
  {{#router}}
  router,
  {{/router}}
  {{#vuex}}
  store,
  {{/vuex}}
  {{#if_eq build "runtime"}}
  render: h => h(App){{#if_eq lintConfig "airbnb"}},{{/if_eq}}
  {{/if_eq}}
  {{#if_eq build "standalone"}}
  template: '<App/>',
  components: { App }{{#if_eq lintConfig "airbnb"}},{{/if_eq}}
  {{/if_eq}}
}){{#if_eq lintConfig "airbnb"}};{{/if_eq}}
```
Также вtemplate/package.jsonтакже присоединяйтесьvuex
```
 "dependencies": {
    "vue": "^2.5.2"{{#router}},
    "vue-router": "^3.0.1"{{/router}}{{#vuex}},
    "vuex": "^2.1.1"{{/vuex}}

  },
```
В последующем вам нужно только добавить файлы и папки, которые вам нужны, вtemplate/src, например, я добавляю сюда запрос, чтобы узнать, является ли это мобильным терминалом.Если это мобильный терминал, он представитlib-flexible.jsи связанные файлы конфигурации scss
```
  "isMobile":{
        "type": "confirm",
        "message": "is Mobile project?"
    },
```
Наконец, отправьте его в собственную ветку github, и вы сможете его использовать.
```
vue init jamielhf/webpack#template1 name
```
гитхаб-адрес

GitHub.com/Jamie Langham Place/Tower…

Ссылаться на:

Подробная настройка веб-пакета vue-cli
Узнайте, как писать шаблоны из исходного кода vue-cli

Настройте свой собственный шаблон vue-cli

Форк собственный шаблон

meta.js

prompts

helper

filters

гитхаб-адрес

Ссылаться на: