Краткое введение в идею компонентизации Vue

Оригинальная статья Tencent DeepOcean:do pro.IO/explore -v UE…

Всего несколько месяцев назад количество звезд Vue превысило 100 тысяч, официально превысив React.

Один, потяни немного домой

В последние несколько лет jQuery доминировал в области внешнего интерфейса и выделялся среди многих фреймворков.Многие разработчики, которые привыкли писать синтаксис jQuery, обнаружили, что они никогда не смогут вернуться к написанию собственного JS. С течением времени также появились различные отличные фреймворки, и неизбежно, что любители разных фреймворков будут сравнивать разные фреймворки и даже щипать друг друга. Говоря о главном герое сегодняшнего дня, Vue также является очень популярным фреймворком в последние годы. Для новичков стоимость начала работы с Vue действительно низкая, простота использования очень высока, а поскольку он разработан отечественными разработчиками, вся документация на китайском языке, и его использует большое количество отечественных компаний, что также приводит к тому, что темпы роста Vue чрезвычайно высоки.

Однако именно итерации обновлений различных фреймворков соревнуются друг с другом, создавая все лучший и лучший интерфейсный мир. Как написал в Твиттере разработчик Vue:

Во-вторых, первый вход в ворота Vue

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

• Прогрессивная структура, разработанная с инкрементальной разработкой снизу вверх
• Механизм двустороннего связывания шаблона
• Инкапсулируйте DOM с помощью директив
• Компонентное мышление

Компонентизация Vue делит страницы пользовательского интерфейса на несколько компонентов для комбинирования и вложения.

Если рабочий хочет улучшить свое тело, он должен сначала заточить свои инструменты.

Независимо от того, какой фреймворк мы изучаем, создание среды — это путь. Vue предоставляет официальный интерфейс командной строки для быстрого создания сложных шаблонов для одностраничных приложений. Конечно, любой предпосылкой является то, что вы сначала понимаете концепции, связанные с Vue, В противном случае, когда новичок приступит к сборке Vue-cli и увидит задействованные концепции webpack, npm, nodejs и т. д., они также будут сбиты с толку, и легко иметь От начала до отказа от идеи.

Когда дело доходит до создания Vue-cli, мы могли бы также стоять на плечах гигантов.Вот учебник для вас, чтобы быстро открыть первую страницу Vue, которая настоятельно рекомендуется:nuggets.capable/post/684490….

3. Компонентизация Vue

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

1. Структура библиотеки компонентов

qqcartoon-ui // 组件库名字
├── index.js // 组件文件
├── aa1 // 各个组件包
├── bb1
├── dialog 
 ├── index.js // 组件注册
 ├── src
 ├── index.scss // 组件样式
 ├── index.vue // 组件结构 
├──
└── ... 

Как правило, в Vue мы будем писать компоненты в компонентах, но для того, чтобы создать библиотеку компонентов, которую можно использовать в нескольких проектах, здесь она переименована, например, в qqcartoon-ui.

• index.js:Каждый компонент в библиотеке компонентов включен как запись для ссылок на экземпляры.

import UIDialog from './dialog/index'
import UIA from './aa1/index'
import UIB from './bb1/index'

export {
  UIDialog,
  UIA,
  UIB
}

• диалог/index.js:Завершите регистрацию компонента.

import UIDialog from './src/index';

UIDialog.install = function(Vue){
    Vue.component(UIDialog.name,UIDialog);
};

export default UIDialog;

• диалог/index.scss:Стиль компонента.

.ui-dialog {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    background: rgba(0,0,0,0.4);
}
...... 省略其余样式代码

• диалог/index.vue:компонентный состав. Шаблон компонента может иметь только один корневой элемент.

<template>
    <div class="ui-dialog" :style="{diaplay:show?'-webkit-box':'none'}">
        <div class="ui-dialog-cnt">
            <div class="ui-dialog-bd">
                <h4>{{title}}</h4>
            </div>
        </div>
    </div>
</template>
<style lang="scss" src="./index.scss"></style>
<script>
    export default {
        name:'UIDialog',
        props:{
            show:{
                type:Boolean,
                default:false
            },
            title:{
                type:String,
                default:"这是标题"
            }
        }
    }
</script>

2. Ссылки на компоненты

В корневом каталоге проекта вы можете найти файл js, вероятно, с именем main.js. Введите в него название нужного вам компонента.

import {UIDialog} from '@/qqcartoon-ui/packages/index'
Vue.use(UIDialog)

На данный момент компонент всплывающего окна уже упоминается в проекте.На данный момент требуется только последний шаг, который используется в vue-файле проекта:

<UIDialog :show="true"></UIDialog>

В это время скомпилируйте код, и вы сможете увидеть окончательный эффект всплывающего окна в браузере!

В-четвертых, Vue компоненты стандартизируют

<ul id="app">
    <li v-on:click = "clickMe">单击事件</li>
</ul>



<script>

    var app = new Vue({
    el : '#app',
    data : {
    },
    methods : {
        clickMe : function(){
            console.log('单击事件发生');
        }
    }
})

</script>

<div>
  <h2>我是子组件的标题</h2>
  <slot>
    只有在没有要分发的内容时才会显示。
  </slot>
</div>

Шаблон родительского компонента:

<div>
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>这是一些初始内容</p>
  </my-component>
</div>

Результат рендеринга:

<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
  </div>
</div>

V. Резюме

Добро пожаловать в публичный аккаунт Tencent DeepOcean в WeChat, и мы будем еженедельно публиковать оригинальные высококачественные технические статьи, связанные с интерфейсом, искусственным интеллектом, SEO/ASO и другими областями:

Видя, как тяжело редактору двигаться, обратите внимание на один :)