Создайте интерфейсную архитектуру Vue с нуля (9)

предисловие

Я думаю, что многие люди использовали егоvue-cliилиcreate-react-appили аналогичные подмости. Скаффолдинг удобен для копирования, вставки или клонирования базы кода, а также может вводить подключаемые модули, необходимые пользователям, с большим выбором пользователей. Строительные леса часто сочетаются с проектами, которые уже были разработаны, а затем копируются по запросу.

Yeoman

представлять

Введение на официальном веб-сайте: веб-инструмент для построения современных веб-приложений.

yoman — это инструмент для строительных лесов, с помощью которого мы можем легко разрабатывать собственные строительные леса. Конкретное использование yoman в этой статье не будет слишком подробно раскрываться, документации на официальном сайте почти достаточно, а в конце статьи я положу несколько собранных мною справочных материалов.

Установить

Установить йомен:npm install -g yo

generator

Генератор на самом деле является модулем узла, а именно npm. yoman выполняет написанный нами код сборки на основе написанного нами генератора. (Студенты, которые не знакомы с тем, как выбрать пакет npm самостоятельно, могутНажмите здесь>>) папка генератора должна начинаться сgenerator-в начале, а затем введите имя пользовательского шаблона, напримерgenerator-zx-vue, превратив его в пакет npm, загрузите его на официальный сайт npm, только установите его глобально на компьютер, а затем запустите его с помощью yoman, который будет подробно представлен позже.

Создайте свой собственный генератор

Помимо ручного создания нашего собственного проекта генератора, мы также можем создать его с помощью скаффолдинга, который уже сделали другие. Установитьgenerator-generator: npm install -g generator-generatorЗатем запустите строительные леса:yo generatorПосле этого мы можем увидеть ряд подсказок.После ввода информации согласно подсказкам у нас есть шаблонный проект для написания собственного генератора.

Напишите свой генератор

На самом деле нам не нужно управлять многими файлами, сгенерированными этой структурой генератора, нам просто нужно сосредоточиться наgenerator/appСодержимое этой папки в порядке.templatesФайл используется как хранилище, когда мы пишем скрипт, если нам нужны какие-то файлы, мы можем просто зайти в это хранилище и скопировать их.

фокус

1. Вопросы

Поскольку у нас есть генератор в виде пакета npm, мы, естественно, надеемся, что его управление версиями и использование git облегчат будущие итерации.templatesПо сути, это тоже самостоятельный проект, как мы уже говорили, это уже готовая полка проекта, которую мы просто скопировали с гитлаба или гитхаба. Так как же управлять этими двумя разными проектами?

2. Подмодуль разрешения-git

Учащиеся, использующие git 6, должны были сразу подумать о знании подмодулей git. Незнакомые ученики могут тыкатьдокументация git - подмодули >>

Поэтому мы не копируем проект вtemplates, ни git clone вtemplates, но сначала удалитеappв папкеtemplates,Потом:git submodule add https://github.com/CodeLittlePrince/vue-construct-for-zx-vue.git templatesВ этом случае мы можем обновить собственный проект-склад (vue-construct-for-zx-vue), а если проект-генератор такой же, просто подтянуть подмодуль. Два остаются независимыми для легкой итерации и обслуживания.

Пишите скрипты сборки

Далее мы можем написатьappв папкеindex.jsфайл тоже:

const Generator = require('yeoman-generator')
const chalk = require('chalk')
const yosay = require('yosay')
const path = require('path')
const fs = require('fs')

module.exports = class extends Generator {
  initializing() {
    // 打印欢迎语
    this.log(
      yosay(`Welcome to the shining ${chalk.cyan('generator-zx-vue')} generator!`)
    )
  }
  prompting() {
    // 让用户选择是否需要包含vuex
    const prompts = [
      {
        type: 'input',
        name: 'name',
        message: 'Name of project:',
        default: path.basename(process.cwd())
      },
      {
        type: 'input',
        name: 'description',
        message: 'Description:',
        default: '',
      },
      // {
      //   type: 'confirm',
      //   name: 'includeVuex',
      //   message: 'Would you like to include Vuex in your project?',
      //   default: false,
      // }
    ]
    return this.prompt(prompts).then(answers => {
      this.name = answers.name
      this.description = answers.description
      // this.includeVuex = answers.includeVuex
      this.log(chalk.green('name: ', this.name))
      this.log(chalk.green('description: ', this.description))
      // this.log(chalk.green('includeVuex: ', this.includeVuex))
    })
  }

  writing() {
    // 复制普通文件
    // https://github.com/sboudrias/mem-fs-editor
    this.fs.copyTpl(
      this.templatePath(),
      this.destinationPath(),
      {
        name: this.name
      },
      {},
      { globOptions:
        {
          dot: true
        }
      }
    )
    // 根据用户选择，决定是否安装vuex
    if (this.includeVuex) {
      const pkgJson = {
        name: this.name,
        description: this.description,
        // dependencies: {
        //   vuex: '^3.0.1'
        // }
      }
      // Extend or create package.json file in destination path
      this.fs.extendJSON(this.destinationPath('package.json'), pkgJson)
    }
  }

  install() {
    this.npmInstall()
  }

  end() {
    this.log(chalk.green('Construction completed!'))
  }
}

Синтаксис очень прост, подробности можно посмотреть в официальной документации yoman Я кратко представлю несколько часто используемых функций или жизненных циклов:

Имя функции	что я использую
initializing	Я писал приветственные слова
prompting	Взаимодействие с пользователем, такое как ввод, установка флажка, подтверждение и т. д.
writing	Копировать и редактировать файлы
install	Установите зависимости, такие как npm install
end	Напишите несколько заключительных замечаний, таких как до свидания

Полезно ли тестировать локально

Пакет npm, который не был выпущен в сети, для локального теста нужно только связать его, перейти в корневой каталог генератора, а затем запуститьnpm link, поэтому мы можем использовать наш генератор, например, в новую пустую папку и запустить:yo zx-vue, вы можете видеть, что проект начинает собираться автоматически. После того, как тест завершен, его можно опубликовать на официальном сайте npm.О процессе публикации см. в другой моей статье.npm — написать модуль npm с 0

zx-vue

Цель

zx-vueЭтоvue-constructВ качестве строительных лесов склада шаблонов, чтобы облегчить строительство новых проектов и унифицировать новые проекты в будущем.

использовать

Сначала установите глобальный yoomman иgenerator-zx-vue:npm install -g yo npm install -g generator-zx-vueЗатем найдите пустую папку и выполните:yo zx-vueОперации после создания проекта могут относиться кvue-constructнаконец,generator-zx-vueАдресgenerator-zx-vue

конец

Изначально я планировал сделать vuex опцией, позволяющей пользователю выбирать, импортировать эту библиотеку или нет. Однако после этого я обнаружил, что, поскольку для этого использовался шаблон ejs, окончательный выходной файл будет<% if (condition) { %>Этот синтаксис ejs приводит к новым строкам или отступам, не соответствующим eslint. Конечно, я также могу сделать проект более пустым и очистить все использование vuex, но это не очень хорошо, потому что я хочу, чтобы пользователи запускали этот проект и видели эффект всего семейного ведра на странице, к которой привыкли. На самом деле есть еще один более жестокий метод: я делаю проект с vuex и проект без vuex, а потом выбираю, какую копию копировать, что слишком жестоко. Подержав его долгое время, я не придумал очень приемлемого метода, поэтому пока привел vuex напрямую. Наконец, я также надеюсь, что студенты, у которых есть идеи, и старшие братья оставят много комментариев и дадут несколько предложений.^_^

исходный адрес

Интерфейсная архитектура Vue (9) создание лесов с нуля

пасхальные яйца

NetEase Finance набирает фронтенд-инженеров:

профессиональные требования:

1. Степень бакалавра, более 3 лет соответствующего опыта работы или степень магистра, более 1 года соответствующего опыта работы (можно игнорировать)

2. Знание CSS/DIV/XML/JSON, знакомство с http-протоколом;

3. Знание JavaScript, хорошее владение Ajax и другими технологиями асинхронного отображения информации о странице;

4. Знаком с идеями разработки программного обеспечения, хорошими навыками программирования и навыками программирования;

5. Положительный, с хорошими навыками межличностного общения, хорошими навыками координации работы и практическим рабочим духом;

6. Предпочтение отдается тем, у кого есть опыт разработки масштабных веб-программ.

Также: желательно иметь github и блог

Заинтересованные студенты могут отправить мне личное сообщение или отправить свое резюме на мою электронную почту (nijunjie@corp.netease.com)~

использованная литература

официальная документация йомена

Индивидуальные передние леса с Yeoman

Генератор скаффолдов-веб-приложение, написанное другими

Связанные с файловой операцией

документ ejs

git-подмодуль