Настроить шаблон/веб-пакет vue-cli

внешний интерфейс Командная строка Vue.js Webpack

задний план

Если предыдущие проекты не были собраны предшественниками, или они были собраны из vue-cli, а затем были перенесены некоторые общие коды старых проектов, эти операции оцениваются как невозможные для выполнения в течение часа, поэтому создание собственного шаблона Экономия времени.

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

Как изменить файл шаблона

Во-первых, нужно начатьtemplate/webpackЗагрузите официальный проект шаблона/вебпака, наша основная модификация находится в корневом каталогеmeta.jsдокументы иtemplateсодержание;

мета.js:

Есть два основных изменения: подсказки и фильтры.Те из нас, кто использовал библиотеку inquirer, знают, что подсказка — это инструмент командной строки для вопросов и ответов.vue init webpack my-projectПри использовании этой команды необходимо ответить на некоторые вопросы, что зависит от модуля приглашения;

// 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才会创建
  }

шаблон:

  • Напишите условие 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"
  }

{{#lint}}***{{/lint}}Ярлык содержимого означает, что нужно сказать «да» только до тех пор, пока не возникнет проблема с ворсом.

{{#if_eq runner "jest"}}***{{/if_eq}}Указывает, что содержимое тега толькоrunnerОтвет на вопрос равенjestСитуация будет существовать, люди могут расширить команду условия EOF (вlib/generate.js, по умолчаниюif_eqа такжеunless_eqдве команды)

  • Изменить каталог файлов

Это может напрямую изменить структуру каталогов шаблона.Здесь измените каталог src на структуру каталогов, к которой вы привыкли.

template/src

мой собственный шаблон

гитхаб:masongzhi/vue-template-webpack

Применение:vue init masongzhi/vue-template-webpack my-project

Возможности vue-template-webpack:

  • На основе шаблона/шаблона веб-пакета
  • настраиваемая структура каталогов
  • Добавить параметры vuex
  • Добавить фильтры
  • Увеличить опцию Mock Server
  • Добавить более красивый вариант (если ворс не выбран, добавьте ворс самостоятельно)

Суммировать

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

После того, как вы создали свой собственный шаблон шаблона, а затем повторно построить новый проект не придется вручную копировать пасту, и действительно, это очень удобно.

ps

Статья проекта:Практика и кастомная настройка json-сервера

Категории