Element3 Development Insider — Разработка плагина Vue CLI

Официальное руководство по разработкеprocess.v ue js.org/this/dev-provided…

Элемент от нашей команды выпущен. Чтобы всем было удобно пользоваться. Необходимо присоединиться к экосистеме vue-cli и vite.

Сегодня поговорим о том, как разрабатывается плагин vue-cli.

Вы можете сначала попробовать

vue create vue3-demo
vue add element3

1. Что такое плагин Vue CLI

Инструмент Vue CLI — это экосистема Vue, отвечающая за стандартизацию базы инструментов в экосистеме Vue. Он использует архитектуру на основе плагинов.

Например, vue-router, vuex или установочная библиотека компонентов могут быть установлены в виде плагинов.

vue addЦелью дизайна является установка и вызов плагина Vue CLI.

# 插件安装
vue add vuex

Vue add xxx сделает это.

2. Реализация функции

1. Создайте основу

1.1 Первоначальная библиотека npm

Чтобы плагин CLI правильно работал в проекте Vue CLI, он должен следоватьvue-cli-plugin-<name>или@scope/vue-cli-plugin-<name>такое соглашение об именах. Это позволяет вашему плагину:

одеяло@vue/cli-serviceОбнаружить;

То есть нам нужно только назвать библиотеку npm vue-cli-plugin-element3.

Таким образом, пока он наконец отправлен в репозиторий npm, мы передаем

vue add element3

Просто установите плагин

mkdir vue-cli-plugin-element3
npm init -y

2. Установите и настройте взаимодействие с командной строкой

Перед установкой плагина обычно через интерактивную форму командной строки выбираем параметры установки:

Например, нужно спросить в Элементе

Стоит ли устанавливать глобально
Вы используете сасс?

Эта функция используетсяinquirerвыполнить. На самом деле, если вы сами пишете инструмент cli, вы, как правило, будете использовать эту функцию.

Здесь нам просто нужно отредактировать файл prompts.js. Конкретная конфигурация может относиться кinquirer

module.exports = [
  {
    type: 'list',
    name: 'import',
    message: 'How do you want to import Element3?',
    choices: [
      { name: 'Fully import', value: 'full' },
      { name: 'Import on demand', value: 'partial' }
    ],
    default: 'full',
  },
  {
    when: answers => answers.import === 'full',
    type: 'confirm',
    name: 'customTheme',
    message: 'Do you wish to overwrite Element\'s SCSS variables?',
    default: false,
  },
]

3. Генератор кода Генератор

Основной функционал добавления библиотеки компонентов element3 ориентирован на генераторы. Роль генератора

Изменить существующий код
добавить код
добавить зависимости
Другие функции (например, конфигурация Babel)

Если вы добавляете библиотеку Element3 вручную, вам, вероятно, потребуются следующие шаги:

npm добавить зависимости
Добавить библиотеку компонентов в виде плагина vue
main.js ссылается на библиотеку компонентов
Напишите пример кода в App.vue Например: обратитесь к кнопке, чтобы подтвердить эффект установки

3.1 Добавить зависимости

module.exports = (api, opts, rootOptions) => {
 api.extendPackage({
  dependencies: {
    'element3': '^0.0.26'
  }
})
}

Эта функция на самом деле может быть достигнута путем вызова API, предоставляемого cli.

3.2 Добавить плагин

Процесс добавления плагинов на самом деле заключается в добавлении файла /plugins/element.js

Сгенерированный код обычно использует метод рендеринга механизма шаблонов.Процесс аналогичен рендерингу внутреннего кода.Обычно используемыми библиотеками являются шаблон ejs и шаблон hbs.

Инструмент cli требует от нас использования шаблона ejs.

Если вы хотите понять принцип реализации шаблонизатора, прочтите это [Making Wheels Every Day - Template Engine]](Наггетс.Талант/пост/688413…)

Сначала определите шаблон

// 部分节选
<%_ if (options.import === 'full') { _%>
import Element3 from 'element3'
<%_ if (options.customTheme) { _%>
import '../element-variables.scss'
<%_ } else { _%>
import 'element3/lib/theme-chalk/index.css'
<%_ } _%> 
<%_ if (options.lang !== 'en') { _%>
import locale from 'element3/lib/locale/lang/<%= options.lang %>'
<%_ } _%>
<%_ } else { _%>
import { ElButton } from 'element3'
import 'element3/lib/theme-chalk/index.css'
<%_ if (options.lang !== 'en') { _%>
import lang from 'element3/lib/locale/lang/<%= options.lang %>'
import locale from 'element3/lib/locale'
<%_ }} _%>

export default (app) => {
  <%_ if (options.import === 'full') { _%>
  <%_ if (options.lang !== 'en') { _%>
  app.use(Element3, { locale })
  <%_ } else { _%>
  app.use(Element3)
  <%_ } _%>
  <%_ } else { _%>
  <%_ if (options.lang !== 'en') { _%>
  locale.use(lang)
  <%_ } _%>
  app.use(ElButton)
  <%_ } _%>
}

вызов рендеринга шаблонизатора

Это по-прежнему использует метод рендеринга, предоставляемый API, который на самом деле является механизмом шаблонов ejs.

api.render({
    './src/plugins/element.js': './templates/src/plugins/element.js.ejs',
  })

3.3 Добавить ссылку на плагин

Добавление ссылки на плагин эквивалентно добавлению содержимого в файл main.js.

Логика этой программы относительно проста, и ее нужно выполнить только через простые операции с файлами + регуляризация.

Если это сложная функция, ее необходимо выполнить с помощью абстрактного синтаксического дерева AST. Он представлен в следующей главе.

api.afterInvoke(() => {
    const { EOL } = require('os')
    const fs = require('fs')
    const contentMain = fs.readFileSync(api.resolve(api.entryFile), { encoding: 'utf-8' })
    const lines = contentMain.split(/\r?\n/g)

    const renderIndex = lines.findIndex(line => line.match(/createApp\(App\)\.mount\('#app'\)/))
    lines[renderIndex] = `const app = createApp(App)`
    lines[renderIndex + 1] = `installElement3(app)`
    lines[renderIndex + 2] = `app.mount('#app')`

    fs.writeFileSync(api.resolve(api.entryFile), lines.join(EOL), { encoding: 'utf-8' })
  })

3.4 Добавить пример кода

Эта функция по-прежнему отображает код с помощью шаблонов кода.

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <p>
        If Element3 is successfully added to this project, you'll see an
        <code v-text="'<el-button>'"></code>
        below
      </p>
      <el-button type="primary">el-button</el-button>
    </div>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

api.render({
    './src/App.vue': './templates/src/App.vue.ejs'
})

4. Сервисная обработка

служба будет запущена при запуске службы. Давайте покажем небольшой логотип здесь.

Делаем с помощью филе + мел

const figlet = require('figlet')
const chalk = require('chalk')

module.exports = () => {
    console.log(chalk.yellow(figlet.textSync('Element 3', {
        font: 'big',
        horizontalLayout: 'default',
        verticalLayout: 'default',
        width: 80,
        whitespaceBreak: true
    })));
}

3. Локальная отладка

Он необходим перед загрузкой npm и устанавливается локально, метод следующий:

# 再次安装依赖
yarn
npm install --save-dev file:/Users/xiaran/source/hug-sun/vue-cli-plugin-element3
vue invoke vue-cli-plugin-element3

В-четвертых, загрузите хранилище npm

Чтобы загрузить репозиторий, нужно выполнить npm publish. Просто имейте в виду, что зеркальные репозитории необходимо изменить. Измените его обратно после загрузки.

#!/usr/bin/env bash
npm config get registry # 检查仓库镜像库
npm config set registry=http://registry.npmjs.org
echo '请进行登录相关操作：'
npm login # 登陆
echo "-------publishing-------"
npm publish # 发布
npm config set registry=https://registry.npm.taobao.org # 设置为淘宝镜像
echo "发布完成"
exit

Молодежь должна говорить о боевых искусствах! ! !`点赞`,`关注`,`收藏`Все устроено! ! !

截屏2020-11-14 下午10.38.43

🔥Поиск по общедоступным номерам: [Front-end big bus] Получить больше инсайдерских руководств по разработке Element3

это мыКоманда фронтенда Huaguoshanпроект с открытым исходным кодомelement3
Библиотека компонентов внешнего интерфейса, поддерживающая vue3.