Найти компоненты Vue.js, которые на 100% соответствуют нашим требованиям к макету без необходимости изменять их в собственном проекте, не так-то просто. В 99,99% случаев нам приходится тиражировать и поддерживать эти же модификации в других наших проектах, что превращает сопровождение в тяжелую и утомительную работу.
Самым простым способом поддерживать компонент такого размера было бы создание собственного компонента. Кроме того, что мы сможем использовать его в других проектах, мы будем в нескольких шагах от того, чтобы сделать его доступным в Интернете и помочь другим людям, которые, возможно, столкнулись с той же проблемой.
В этой статье рассматриваются следующие технологии:
- Пряжа
- Vue 2.x
- Vue Cli
Примечание: Автор использует Yarn, но если вы предпочитаете NPM и хотите использовать его, просто обратите внимание на команды, использующие yarn, и адаптируйте их при необходимости.
Учитывая, что у вас уже установлены Yarn/NPM, перейдем к установке Vue Cli.
Откройте терминал и введите следующую команду:
yarn global add @vue/cli
Проверьте правильность его установки с помощью команды:
vue --version
Если все прошло успешно, давайте посмотрим версии Vue Cli в соответствии с этим примером
@vue/cli 4.3.1
Все еще с открытым терминалом, перейдите в каталог, где вы хотите создать свой компонент.
В данном примере мы создадим очень простой компонент с одной кнопкой, однако вы можете следовать этой статье для создания более сложных вещей.
Далее, перейдя в нужную директорию, введите следующую команду:
vue create my-simple-button
Vue Cli спросит вас, какую предустановку вы хотите. Выберите значение по умолчанию. Для данного примера этого достаточно.
Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
Manually select features
Он выполнит необходимые установки, а после завершения введите следующую команду для запуска проекта:
yarn serve
Проверьте, что все работает, и завершите работу над приложением, чтобы мы могли изменить некоторые вещи в конфигурации.
Перейдем к файлу package.json
В разделе Scripts добавьте новый под названием build-lib
И поместите в него следующее содержимое:
vue-cli-service build --target lib --inline-vue --name nome-plugin [entry]
Измените в нем name-plugin на имя нашего проекта, который в данном случае является my-simple-button
Нам также потребуется изменить [entry]. Здесь мы сообщаем, какой будет точка входа компонента.
Если мы не сообщим, что он получает [entry], то точкой входа будет src/App.vue, но нам нужно, чтобы точкой входа был src/main.js.
Вот как будет выглядеть сессия сценариев
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-lib": "vue-cli-service build --target lib --inline-vue --name my-simple-button src/main.js",
"lint": "vue-cli-service lint"
}
Выполнив новую команду, мы получим ответ, который выглядит следующим образом:
DONE Compiled successfully in 4866ms
File Size Gzipped
dist/plugin-button.umd.min.js 70.49 KiB 25.14 KiB
dist/plugin-button.umd.js 222.08 KiB 60.92 KiB
dist/plugin-button.common.js 221.69 KiB 60.81 KiB
dist/plugin-button.css 0.33 KiB 0.23 KiB
Images and other types of assets omitted.
✨ Done in 7.16s.
Это означает, что сборка прошла успешно.
Посмотрев на папку dist, мы видим несколько файлов, нам нужно определить, какой из них будет использоваться любым приложением, которое импортирует наш компонент.
Давайте выберем тот, который заканчивается на .common.js
Затем вернитесь в package.json и добавьте главную сессию, как показано ниже:
"main": "./dist/plugin-button.common.js",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build-lib": "vue-cli-service build --target lib --inline-vue --name my-simple-button src/main.js",
"lint": "vue-cli-service lint"
}
Теперь давайте разработаем нашу кнопку.
Перейдя к компонентам, создадим файл MyCustomizedBoot.vue с таким содержимым:
<template>
<div>
<button @click="incremento">{{ texto }}</button>
</div>
</template>
<script>
export default {
data () {
return {
contador: 0
}
},
computed: {
vezes () {
return this.contador === 1 ? 'vez' : 'vezes'
},
texto () {
return `Clicado ${this.contador} ${this.vezes}`
}
},
methods: {
incremento () {
this.contador += 1
}
}
}
</script>
Эта кнопка при активации сообщает нам, сколько раз на нее нажали.
Как я уже сказал, ничего сложного и легко понять.
Vue позволяет нам визуализировать только этот компонент. Выполните следующую команду:
vue serve src/components/MeuBotaopersonalizado.vue
Теперь, чтобы мы могли использовать этот компонент в других местах, мы должны сообщить, что будет экспортировано:
import botaoSimples from './components/MeuBotaopersonalizado.vue'
export default {
install (Vue, options) {
Vue.component('simple-button', botaoSimples)
}
}
Мы не можем забывать восстанавливать каждый раз, когда завершаем обновление чего-либо.
Если компонент должен работать с Vuex, нам понадобится немного больше кода.
Мы должны помнить, что Vue позволяет использовать только один экземпляр Vuex, поэтому мы не сможем установить этот плагин в наш компонент.
Но чтобы использовать магазин, нам просто нужно определить его структуру и сообщить ему, что наш компонент для работы зависит от установленного в проекте Vuex.
Неважно, будем ли мы использовать однофайловый или модульный магазин. В конечном итоге это будет тот же самый процесс — просто сообщить путь к главному файлу магазина.
В данном примере для простоты понимания я буду считать, что магазин создается в виде одного файла.
Давайте перейдем в каталог src и создадим файл store.js со следующим содержимым:
const store = {
state: {
contador: 0
},
getters: {
contador: state => state.contador
},
mutations: {
increment (state) {
state.contador += 1
}
}
}
export default store
Вернитесь к файлу MyCustomizedBoot.vue и измените его код на следующий:
<template>
<div>
<button @click="incremento">{{ texto }}</button>
</div>
</template>
<script>
export default {
data () {
return {}
},
computed: {
vezes () {
return this.$store.getters.contador === 1 ? 'vez' : 'vezes'
},
texto () {
return `Clicado ${this.$store.getters.counter} ${this.vezes}`
}
},
methods: {
incremento () {
this.$store.commit('increment')
}
}
}
</script>
Нам нужно изменить файл main.js на этот код:
import botaoSimples from './components/MeuBotaopersonalizado.vue'
import store from './store.js'
export default {
install (Vue, options) {
// Precisamos que vuex seja passada como opção para que possamos registrar a vuex do componente
if (!options || !options.store) {
throw new Error('Inicie o componente com Vuex.')
}
options.store.registerModule('simplebutton', store)
Vue.component('simple-button', botaoSimples)
}
}
Мы должны отстроить его заново.
После того как мы выполнили сборку, компонент готов к использованию в любом из наших проектов.
Если мы не будем публиковать его в NPM, мы можем использовать его следующим образом:
Находясь в проекте, в котором мы хотим использовать компонент, мы должны открыть терминал в этой директории и выполнить команду:
yarn add ../my-simple-button
Не забудьте пройти правильный путь. Это только для примера.
Затем перейдите в файл main.js этого проекта и установите наш компонент.
import mySimpleButton from my-simple-button;
// Podemos usar assim, passando as opcoes
Vue.use(mySimpleButton, {algumaOpcao: algumValor})
// ou assim, sem opcoes
Vue.use(mySimpleButton)
У нас есть два способа его использования: с опцией и без опции.
Нашему компоненту нужен магазин, поэтому мы должны использовать первый вариант.
import Vue from 'vue'
import App from './App.vue'
import store from './store';
import mySimpleButton from my-simple-button;
Vue.config.productionTip = false
Vue.use (mySimpleButton, { store });
new Vue({
store,
render: h => h(App),
}).$mount('#app')
Таким образом, наш компонент определяется на уровне приложения как Vuex, а не как компонент, внутри которого мы будем его использовать.
Помните: это глобально!
<template>
<div id="app">
<h1>Contato</h1>
<p>Algum texto</p>
<my-simple-button />
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
Имя, которым он будет называться, всегда будет тем, которое мы определили в файле main.js нашего компонента.
import botaoSimples from './components/MeuBotaopersonalizado.vue'
import store from './store.js'
export default {
install (Vue, options) {
if (!options || !options.store) {
throw new Error('Inicie o componente com Vuex.')
}
options.store.registerModule('simplebutton', store)
Vue.component('bolacha-doce', botaoSimples)
}
}
В этом примере я изменил имя на sweetcake, чтобы использовать его:
<template>
<div id="app">
<h1>Contato</h1>
<p>Algum texto</p>
<bolacha-doce />
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
Очень легко создавать и совместно использовать компоненты/плагины.
Точно так же, как мы создали наш компонент, мы могли бы инкапсулировать чужой компонент, например, другой стиль кнопки Bootstrap с некоторыми действиями при нажатии или наведении мыши.
Мы также можем предоставить компонентные миксины, хуки, фильтры и многое другое.
То, что мы видели здесь, было лишь одной из N’s конфигураций, которые мы можем сделать при установке нашего компонента.
Это может стать плюсом для другой статьи.
Что мы можем сделать сейчас, так это опубликовать в NPM facilitating, чтобы сделать доступным для использования сообществом.
Ну, вот и все, друзья.
Любые вопросы и предложения оставляйте в комментариях, мы всегда будем следить за вами! Чтобы ознакомиться с другими темами нашего блога, просто нажмите здесь. Спасибо, что читаете!
А чтобы узнать экосистему EZ и стеки с возможностями, зайдите на наш сайт для талантов.
Увидимся в следующий раз!
Этот контент является репостом с сайта EZ.devs.