Создайте свою собственную библиотеку пользовательского интерфейса на основе vue-cli3.

Vue.js
Создайте свою собственную библиотеку пользовательского интерфейса на основе vue-cli3.

написать впереди

Маленькие передние части имеют большие мечты. Это должно быть хорошей маленькой целью, чтобы сделать нашу собственную библиотеку компонентов пользовательского интерфейса. Это. . . Что такое компоненты 😯? Я думаю, это само собой разумеется, в повседневной разработке мы сталкиваемся с этим каждый день, каждый файл vue, который вы пишете, может рассматриваться как компонент, но общность другая. Компоненты пишутся много, и со временем у вас появится желание написать библиотеку компонентов. На самом деле, это больше для повышения уровня B 😢, при общении с другими вы говорите, что написали UI-библиотеку, а другие думают, что вы можете быть немного снисходительны. Ладно, не дуй В, поторопись 😜

Адрес источника:GitHub.com/Lugouqiao627628/Малый…

Необходимые знания

Возможно, мы привыкли к тому, как вводить компоненты в vue, поэтому давайте закрепим этот способ в глобальном масштабе. Возьмем каштан 🌰, обычно у нас такое употребление:

import Loading from '../components/loading'
// 方法一：name 是组件的名字
Vue.component(Loading.name, Loading)
// 方法二：前提是 Loading 有提供 install 这个方法
Vue.use(Loading);

Вышеуказанные два метода можно использовать для регистрации компонентов глобально, но параметры разные, вы можете выбрать какой метод, но обратите внимание на второй метод, этот метод требует, чтобы у самого компонента был метод установки. Лоб. . . Зачем нужен метод установки? Вы можете относиться к этому как к правилу: если вы используете чужие фреймворки, вы должны следовать чужим правилам. Бред 🐂, это на самом деле из-за исполненияVue.useВыполнит метод установки внутри, поэтому нам нужно написать установку. Вам не нужно серьезно относиться к этому, это похоже на это, о нет 🙅♀️, он должен стоять на плечах великого бога 💪.

каталог сборки

Быстро создавайте проекты

Этот шаг не должен много говорить, просто выполните егоvue create xr-ui(Предполагается, что у вас установлен vue-cli3), а затем выберите некоторые конфигурации в соответствии с вашими предпочтениями. После нескольких нажатий у вас будет обновленный начальный проект. Я не стал использовать здесь машинопись (главным образом потому, что не привык к ней), поэтому студенты, выбравшие машинопись, должны обратить внимание, способ написания может немного отличаться.

Изменить структуру каталогов

  1. Измените имя каталога src на examples, которое используется для отображения примеров компонентов.
  2. Создайте новую папку пакета в корневом каталоге, которая используется для размещения компонентов

Вы можете спросить, почему вы хотите построить такую ​​структуру каталогов. Это хороший вопрос. Причина очень проста, потому что другие делают это, так что учитесь (подражая) Луо. . . Мы видим, что исходный код Element также структурирован следующим образом:

Когда нашего уровня недостаточно, имитация — это мощная способность к обучению👏.

Добавить файл конфигурации

После небольшого изменения каталога вы с удивлением обнаружите, что проект не работает. Не беда, это нормально, ведь src пропал, а путь должен сообщать об ошибке. Итак, теперь давайте это исправим. Создайте новый файл vue.config.js в корневом каталоге (в новом проекте этого файла нет) и напишите следующее содержимое:

const path = require('path')
module.exports = {
  // 修改 pages 入口
  pages: {
    index: {
      entry: 'examples/main.js', // 入口
      template: 'public/index.html', // 模板
      filename: 'index.html' // 输出文件
    }
  },
  // 扩展 webpack 配置
  chainWebpack: config => {
    // @ 默认指向 src 目录，这里要改成 examples
    // 另外也可以新增一个 ~ 指向 packages
    config.resolve.alias
      .set('@', path.resolve('examples'))
      .set('~', path.resolve('packages'))

    // 把 packages 和 examples 加入编译，因为新增的文件默认是不被 webpack 处理的
    config.module
      .rule('js')
      .include.add(/packages/).end()
      .include.add(/examples/).end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
}

Приведенные выше комментарии должны быть очень четкими, в основном для изменения псевдонима, изменения файла записи и добавления нового файла к этапам компиляции веб-пакета. Затем мы можем снова запустить программу, и она заработает. Что касается того, почему или как это настроить, студенты, которые не понимают, могут перейти кVue CliГлядя на официальный сайт, то что написано выше понятно и понятно, но я понимаю только одну-две конфигурации.Опять забыл, никак 🤷‍♀️Мозг не может работать.

написать компоненты

Компонент библиотеки компонентов - это не то, как строка ее, поэтому мы должны сначала написать тестовую сборку (вы можете легко написать, не имеет значения). OK👌, мы сначала в каталоге пакетов создайте тестовую папку, а затем в тесте ниже, чтобы создать новую папку в папке SRC в папке SRC под новым компонентом Test.Vue, вероятно, следуя долгое, как это 👇:

<!--test.vue-->
<template>
  <div class="xr-test" @click="handleClick">{{ num }}</div>
</template>

<script>
export default {
  name: 'XrTest', // 这个名字很重要，它就是未来的标签名<xr-test></xr-test>，坑了我一下
  data () {
    return {
      num: 0
    }
  },
  methods: {
    handleClick () {
      this.num++
    }
  }
}
</script>

<style lang="scss" scoped>
.xr-test {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  font-size: 30px;
  text-align: center;
  background: #24292e;
  color: white;
}
</style>

Вы должны быть в состоянии понять это, но, пожалуйста, объясните больше. ⚠️ Главное здесь то, что имя имя имеет особое значение, и я надолго застрял в этой яме. В первую очередь его надо написать.Почему?Под ним можно понимать id,у которого есть функция уникальной идентификации компонента.В дальнейшем мы будем использовать это имя для поиска и определения что это за компонент,поэтому все Компоненты, которые вы пишете, должны быть Это не одно и то же имя; во-вторых, это имя является нашим окончательным именем лейбла, например, наше имя здесьXrTest, то метка, которую мы пишем, будет выглядеть так<xr-test></xr-test>, как и Element, имяElButton, когда используешь<el-button></el-button>.

Выставить компоненты

Давайте создадим новый файл index.js в packages/test со следующим кодом:

// 为组件提供 install 方法，供组件对外按需引入
import XrTest from './src/test'
XrTest.install = Vue => {
  Vue.component(XrTest.name, XrTest)
}
export default XrTest

Суть этого шага заключается в распространении метода установки на компонент, а зачем этот метод расширять, уже было сказано в начале статьи, т.к.Vue.use()Если вам это нужно, use вызовет метод установки по умолчанию для установки, вот и все. Затем мы также создаем новый файл index.js в пакетах. Обратите внимание, что он отличается от файла index.js выше. Вышеупомянутый файл устанавливается для одного компонента. Он устанавливается глобально для всех компонентов. Давайте сначала посмотрим на код :

import XrTest from './test'
// 所有组件列表
const components = [
  XrTest
]
// 定义 install 方法，接收 Vue 作为参数
const install = function (Vue) {
  // 判断是否安装，安装过就不继续往下执行
  if (install.installed) return
  install.installed = true
  // 遍历注册所有组件
  components.map(component => Vue.component(component.name, component))
  // 下面这个写法也可以
  // components.map(component => Vue.use(component))
}

// 检测到 Vue 才执行，毕竟我们是基于 Vue 的
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  install,
  // 所有组件，必须具有 install，才能使用 Vue.use()
  ...components
}

Основная функция этого шага — единообразный экспорт всех компонентов и предоставление метода установки. Предыдущий index.js устанавливал только один компонент, но теперь этот index.js устанавливает все компоненты по кругу, в зависимости от того, хотите ли вы ссылаться на него по мере необходимости. Вот структура каталогов для вашего удобства:Так как этот шаг очень важен, рекомендуется остановиться и понять и переварить его🤔. . .
Конечно, вы можете спросить, почему вы создаете такой каталог? В чем еще может быть причина, ведь Элемент такой (как показано на рисунке ниже), поэтому пишем его вот так, вот и все.

тестирование компонентов

Хорошо, компонент готов, тогда мы проверим его на примерах, чтобы увидеть, может ли ссылка быть успешной. Во-первых, импортируйте пакет, только что написанный в main.js, в примерах, например:Затем удалите содержимое Home.vue в разделе examples/views и напишите свой собственный компонент метки, например:Хорошо, наконец, давайте запустим проектyarn serve, посмотрите на эффект, ну ничего страшного.

упаковка режима библиотеки

В vue-cli3 мы можем упаковать одну запись в библиотеку с помощью следующей команды:

// target: 默认为构建应用，改为 lib 即可启用构建库模式
// name: 输出文件名
// dest: 输出目录，默认为 dist，这里我们改为 lib
// entry: 入口文件路径
vue-cli-service build --target lib --name lib [entry]

Следует отметить, что в библиотечном режиме упакованная библиотека не содержит Vue. Затем мы модифицируем файл package.json следующим образом:Затем выполнитеnpm run libБиблиотеку можно сгенерировать, и посмотреть, есть ли в каталоге слева дополнительная папка lib, именно ее мы и хотим опубликовать. Кроме того, причина, по которой в каталоге lib есть несколько видов js, заключается в том, что есть две спецификации (common и umd), разница между сжатием (min) и отображением (map).

Опубликовать в нпм

Все готово, осталось только выпустить.

  1. Улучшите документ README.md, просто напишите два предложения
  2. Измените файл package.json:
{ 
  "name": "xr-ui",
  "version": "0.3.0",
  "description": "基于 vue-cli3 的 UI 组件库",
  "main": "lib/xr-ui.umd.min.js",  // 这是 lib 目录下的其中一个
  "keywords": "xr-ui",
  "private": false,
  "license": "MIT"
}
  1. Создайте новый файл .npmignore в корневом каталоге, содержимое аналогично .gitignore:
# 这是复制 .gitignore 里面的
.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

# 以下是新增的
# 要忽略目录和指定文件
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html

окончательное исполнениеnpm loginВойдите в свою учетную запись npm и выполнитеnpm publishПросто опубликуйте его, это так же просто, как два шага, и вы сможете найти его на npm через некоторое время. Конечно, предпосылка заключается в том, что у вас есть учетная запись npm. Если у вас ее нет, зарегистрируйте ее. Это очень просто. Затем вам нужно найти имя вашего пакета npm, чтобы узнать, использует ли его кто-то, и если да , Измени это.

Мелкий измельчитель

Наконец, после всех невзгод, мы можем процитировать написанную нами Куру и подумать над ней. Не волнуйтесь, давайте поэкспериментируем сvue create newначать новый проект, а затемnpm i xr-ui -S, вы можете увидеть в node_modules, что наш пакет выглядит так:Затем импортируйте в main.js:

import Vue from "vue"
import XrUI from 'xr-ui'
import 'xr-ui/lib/xr-ui.css'

Vue.use(XrUI)

Таким образом мы можем вводить компоненты на страницу, хахахаха, вор счастлив и вне себя от радости. . .

<xr-test></xr-test>

резюме

Подумайте о том, как здорово, если вы поддерживаете библиотеку компонентов для своей команды. Конечно, хорошая память не так хороша, как плохая клавиатура, и понять это не значит освоить ее, это действительно незабываемо, только если испытать это на себе, 😓 ах. . Почему вдруг лирично.
Наконец, позвольте мне подчеркнуть, что когда уровня недостаточно, имитация является необходимым навыком, как и я. Но это не важно, это просто процесс.После того, как вы будете писать код в течение нескольких лет, у вас всегда будут какие-то собственные идеи, а потом вы сможете потихоньку набрасывать какие-то свои вещи.Мы просто стоим на плечах гиганты и вперед. Все, до встречи 👋👋👋

Категории