От автора: Vue — один из наиболее быстро растущих фреймворков JavaScript в современном мире. Описанный как «интуитивный, быстрый и композитный» MVVM для создания интерактивных интерфейсов, Vue стал любимым фреймворком JavaScript для разработчиков, чтобы разрабатывать интерактивные веб-приложения и интерфейсы. Это совершенно очевидно с его 97K GitHub звезд с момента его выпуска в 2014 году.
В отличие от Angular, основанного на старой архитектуре Model-View-Controller, этот фреймворк следует за моделью Model-View-View-Model. Например, интересно, как происходит в Vue js создание компонента.
У фреймворка есть отдельные файловые компоненты. Это означает, что вы можете написать template, script и style в одном файле .vue.
<template> <p>({greeting })</p>
</template>
<script> module.exports = { data: function () { return { greeting: 'Hello' } } }
</script>
<style scoped> p { font-size: 2em; text-align: center; }
</style>
В этом посте я расскажу о некоторых из лучших практик, которые вы можете иметь в виду при создании расширенного Vue App.
Настройка приложения
Существует много разных способов создания приложения Vue. Если вы новичок, вы можете посмотреть этот пример JS Fiddle Hello World, чтобы попробовать Vue.
В этом посте я собираюсь использовать Vue CLI для создания Vue Project. Сначала откройте командный терминал в вашей системе и напишите следующую команду для установки Vue CLI:
$ npm install --global @vue/cli
Теперь вы можете создать проект Vue! Поэтому давайте продолжим и делаем это:
$ vue create vue-app $ cd vue-app
Это создаст новый проект Vue под названием vue-app. Вы можете назвать это чем-то еще, если хотите.
Создавайте компоненты Vue с помощью vue-class-component
Взгляните на фрагмент кода вверху, и вы увидите, что у вас есть функция data которая возвращает объект. Если вы хотите передать какие-либо обработчики, вам придется написать объект method.
vue-class-component уменьшает процесс разработки компонентов, позволяя разработчикам напрямую добавлять свойства данных и обработчики в качестве свойств класса.
Откройте каталог проекта в редакторе кода. В вашей папке src вы увидите два файла: App.vue и main.js.
Разработчики с опытом работы в таких библиотеках, как React могут сказать, что файл main.js эквивалентен index.js от React. Это означает, что фактический файл запускается при запуске команд, таких как yarn serve или yarn build.
Перепишите файл main.js со следующим кодом:
import 'tailwindcss/dist/tailwind.css';
import Vue from 'vue';
import App from './App'; new Vue ({ el: '#app', render: h => <App />,
}); В принципе, мы сначала захватываем элемент div, который имеет «приложение» в качестве идентификатора из файла public/index.html, а затем мы визуализируем компонент App внутри него. Теперь вам нужно создать этот компонент App внутри файла App.vue. Откройте файл App.vue и замените код по умолчанию следующим:
<template> <h1 @click="onClick"> {{message}} </h1>
</template> <script>
import Vue from 'vue';
import Component from 'vue-class-component';
export default Component({})( class App extends Vue { message = 'Batman'; onClick() { this.message = 'Bruce Wayne'; } }
);
</script> Здесь я сначала создал простой template, в котором есть div с сообщением внутри него. script импортирует пакет Vue и функцию Component из Component vue-class-component. Вам также необходимо установить этот пакет в свой проект.
$ yarn add vue-class-component
Затем я декорирую класс App функцией Component. Эта функция имеет объект, который вы можете передать в параметрах.
Если вы используете VS Code, вы увидите, что теперь вы получаете сообщение об ошибке в App. Это связано с тем, что VS Code по умолчанию не принимает экспериментального декоратора. Чтобы решить эту проблему, создайте новый файл с именем jsconfig.json в корневом каталоге проекта. Здесь вы говорите Vue Compiler, чтобы позволить экспериментальным декораторам в вашем коде:
{ "compilerOptions": { "experimentalDecorators": true }
}
Перезагрузите редактор, и вы увидите, что ошибка исчезнет!
Теперь мы отвечаем на вопрос: «Почему я должен использовать vue-class-component вместо традиционных компонентов Vue?»
В традиционном компоненте вам необходимо написать функцию data, которая возвращает объект. Чтобы изменить что-либо в своем компоненте, вы затем будете писать такие methods, как onClick.
const TraditionalComp = { data() { return {message: "Batman"} }, methods:{ onClick() { this.message = "Bruce Wayne" } }
}
Но в vue-class-component вы напрямую пишете метод onClick. Все, что осталось сделать, это связать его с template. Вы можете сделать это, написав @click=»onClick» внутри тега h1 шаблона.
Запустите приложение Vue, используя команду yarn serve, и вы увидите, что она работает следующим образом:
Определите свои props с помощью vue-property-decorator
Вы также можете использовать vue-property-decorator для определения свойств непосредственно в классе. И это тоже делается с помощью простого декоратора @Prop(). Этот метод объявления prop позволяет нам держать наши классы простыми.
Сначала установите пакет vue-property-decorator в свой проект:
$ yarn add vue-property-decorator
Еще одна отличная вещь в этом пакете состоит в том, что он также включает vue-class-component внутри себя. Таким образом, вы можете импортировать Component из пакета vue-property-decorator.
Внутри файла App.vue перезапишите код, как показано ниже:
<template> <h1 @click="onClick"> {{message}} </h1>
</template> <script>
import Vue from 'vue';
import {Component, Prop} from 'vue-property-decorator';
export default Component({})( class App extends Vue { @Prop({default: 'Batman'}) message; onClick() { this.message = 'Bruce Wayne'; } }
);
</script> Здесь я сначала импортирую Component и Prop из пакета vue-property-decorator. Затем в классе App я использую декоратор @Prop, чтобы установить значение по умолчанию для message.
Вот и все! Теперь вы передаете message в качестве prop в наш код, и оно также имеет значение по умолчанию.
Определите место содержимого в компонентах с Vue Slots
slots Vue позволяют вам указывать код, в котором вы хотите, чтобы ваш контент находился в компоненте. Это может показаться запутанным сейчас, поэтому давайте посмотрим, какие slots действительно делают для нас с некоторым кодированием.
Вернитесь в файл main.js, перепишите код внутри render следующим образом:
render: h => ( <App> <h1>Superman</h1> </App> )
Если вы посмотрите на приложение в своем браузере, вы увидите, что ничего не изменилось. Это связано с тем, что вы не указали места для нового текста внутри template в файле App.vue. Именно здесь вступают в действие игровые slots.
Внутри App.vue напишите два новых slots, которые обертывают исходный тег h1.
<template> <div> <slot name="header"></slot> <h1 @click="onClick"> {{message}} </h1> <slot name="footer"></slot> </div>
</template>
Ваше приложение по-прежнему не будет отображать новый текст. Это потому, что компилятор теперь не знает, в какой слот помещается новый текст. Я хочу, чтобы текст находился в нижнем слоте. Я дал этому слоту name footer.
Перейдите в файл main.js и добавьте атрибут slot=»footer» в новый текст. Затем будет отображаться новый текст.
Но ваш метод render сейчас немного громоздкий. Давайте посмотрим, как вы можете использовать slots чтобы позаботиться об этом.
Использование слотов для создания макетов
Вы также можете использовать slots для создания настраиваемых макетов, которые могут использоваться для указания места размещения каждой части вашего приложения или компонента.
Создайте новый файл с именем Layout.vue внутри папки src/components. Внутри этого файла напишите элемент template как показано ниже:
<template> <div> <slot name="header"></slot> <slot name="body"></slot> <slot name="footer"></slot> </div> </template>
Затем перейдите в файл App.vue и удалите все внутри тега template. Затем внутри тега script импортируйте созданный вами Layout.vue, например:
import Layout from './components/Layout';
Вам также нужно сообщить декоратору Component, что вы используете Layout как компонент.
export default Component({ components: {Layout},
})
Теперь вы можете использовать Layout как компонент внутри тега template. Я также добавлю несколько текстовых тегов.
<template> <Layout> <h1 slot="header">How To Build Vue Apps Like A Pro</h1> <h2 slot="body"> by Rajat S</h2> <h3 slot="footer">Technical Content Writer</h3> </Layout> </template>
Убедитесь, что вы добавили атрибут slot с соответствующим именем, иначе текстовые теги не будут отображаться.
Передача props с использованием области Vue Slot
Комбинируя ваши компоненты с slots, вы можете передавать данные компонента в слот с использованием slot-scope. Вы можете передавать реквизиты вниз от компонентов родителя к дочерним компонентам, не связывая их вместе.
Перейдите в файл App.vue и внутри тега template, оберните Layout внутри тега Settings.
<template> <Settings> <Layout slot-scope="{header}"> <h1 slot="header">{{header}}</h1> <h2 slot="body"> by Rajat S</h2> <h3 slot="footer">Technical Content Writer</h3> </Layout> </Settings>
</template>
Импортируйте Settings внутри тега script
import Settings from './components/Settings.vue';
Скажите декоратору Component, что вы используете Settings в качестве компонента.
export default Component({ components: {Layout, Settings},
})
Теперь вам действительно нужно создать компонент Settings. Поэтому перейдите в src/components и создайте файл с именем Settings.vue. Напишите этот код внутри него:
<template> <div> <slot :header="header"></slot> </div>
</template>
<script>
import Vue from 'vue';
import Component from 'vue-class-component';
export default Component({})( class Settings extends Vue { header = 'How To Build Vue Apps Like A Pro'; }
);
</script> Внутри тега template у меня есть корневой div, в котором есть slot. Внутри этого slot я привязываю :header к header.
Перейдя к тегу script, я сначала импортирую пакет Vue и декоратор Component из пакета Component vue-class-component.
Затем я создаю класс Header внутри декоратора Component. Этот класс содержит данные, которые я хочу передать в заголовок.
Передача props функциональным шаблонам
Функциональные шаблоны позволяют создать компонент, который имеет только тег template и предоставляет props в шаблоне.
Внутри папки src/components создайте новый файл с именем Header.vue и напишите этот код внутри него:
<template functional> <h1 slot="header">{{props.header}}</h1>
</template>
Термин functional здесь используется, чтобы указать, что этот файл имеет простой template. Повторите это для Body.vue и Footer.vue.
Вернитесь в файл App.vue и перепишите template следующим образом:
<template> <Settings> <Layout slot-scope="{header, body, footer}"> <Header slot="header" :header="header"></Header> <Body slot="body" :body="body"></Body> <Footer slot="footer" :footer="footer"></Footer> </Layout> </Settings>
</template>
Вам также необходимо написать операторы импорта для Header, Body, Footer внутри тега script файла:
import {Header, Body, Footer} from './components';
И скажите декоратору Component, что вы используете их как компоненты.
export default Component({ components: { Settings, Layout, Header, Body, Footer, },
})
Но код все равно не сработает. Потому что оператор импорта, который вы только что написали, не совсем корректен. Чтобы решить эту проблему, создайте новый файл index.js внутри src/components.
export {default as Header} from ‘./Header.vue’;
export {default as Body} from ‘./Body.vue’;
export {default as Footer} from ‘./Footer.vue’;
Благодаря этому вы создали функциональные шаблоны в Vue, что позволяет нам передавать наши реквизиты из родительского компонента в дочерний компонент без необходимости писать много кода.
Использование Bit для компонентов Vue
Bit — это платформа для обмена компонентами в нескольких приложениях или проектах, поддерживая их синхронизацию. При работе с компонентами Vue.js Bit — отличный способ совместной работы, разработки компонентов из разных проектов, их организации, синхронизации изменений и контроля. Не стесняйтесь проверить это.
Заключение…
Vue — это программная технология, которая широко используется во всем мире для веб-разработки. Vue на самом деле является средой JavaScript с различными дополнительными инструментами для создания пользовательских интерфейсов.
Одним из главных факторов успеха Vue является то, что его очень легко изучить, и с ним еще проще создавать потрясающие приложения.
Надеюсь, этот пост поможет вам лучше понять Vue и как вы можете создавать с ним лучшие приложения. Следите за подобными сообщениями в Vue, React и других популярных фреймворках / библиотеках.
Автор: Rajat S
Источник: https://blog.bitsrc.io/
Редакция: Команда webformyself.