Как включить ваш сайт с Vue.js и минимальными усилиями

Автор оригинала: FreeCodeCamp Community Member.

ondřej polesný.

У вас есть статический сайт, и вы знаете, какие рамки подходят вам и ваш проект лучшего. Но как вы интегрируете рамки на сайт? Как вы разделяете дизайн на компоненты? Как вы обрабатываете маршрутизацию между страницами? Как определяете, где дочерние страницы должны отображать свой конкретный контент?

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

Интеграция Vue.js.

Выберенные правильные рамки для моего сайта, я могу начать интегрировать все детали вместе. Какие эти части?

HTML шаблон – разметки
Логика сайта – Vue.js и его компоненты
Содержание для всех компонентов – все услуги, предоставляющие данные через их API

Вы когда-нибудь слышали о Jamstack. ? Это современная архитектура веб-разработки, основанная на этих трех частях, которые я изложил выше. Есть несколько дополнительных лучших практик на своем сайте, но мы доберемся до тех позже.

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

...    ...

Во-вторых, нам нужно выбрать элемент, который включает все функциональные возможности VUE.JS. Vue.js не обязательно нужно контролировать весь ваш веб-сайт, но только небольшая часть этого. Однако в нашем случае мы хотим Vue.js контролировать всю страницу. Следовательно, мы можем выбрать верхний элемент и назначить ID к нему, если у него еще нет.

...      ...

Молодец! Теперь у нас есть главная страница, готовая к компонентам Vue.js.

Выкладывая компоненты

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

Заголовок, включая главное меню
Нижний колонтитул, включая контактную форму

Все остальное, что между между ними связана на основе контекста страниц. Другими словами, выделенные детали всегда остаются прежними. Это середина, которая меняется на основе URL.

Прежде всего, давайте создадим два пустых файла:

app.js.
Компоненты.js.

Положить их в папку Активы/JS (Вы можете выбрать любую другую папку, если вы предпочитаете) и ссылаетесь на них на сайте. Добавьте эти активы перед окончанием теги тела. Если есть какая-либо другая функциональность JavaScript, убедитесь, что они включают эти файлы перед любым другим, которые могут изменить разметку HTML.

......

На моем сайте есть 3 страницы, поэтому в общей сложности у меня будет 3 URL-адреса и 3 основных компонента на моей странице:

/- Главная страница
/блог – Blog Page
/о – обо мне страница

Мастер шаблон

Основной HTML-файл будет использоваться в качестве главного шаблона для всего сайта. Следовательно, нам нужно удалить все конкретное содержимое. Мы оставляем только те элементы, которые будут отображаться на всех страницах по всему сайту. Когда я делаю это и открою страницу в браузере, я вижу это:

Существует заголовок с меню (1), контактная форма с нижним колонтитулом (2) и пустое желтое место, где появится содержание всех моих дочерних страниц. Помните, что мы включили роутер Vue.js вместе с основной библиотекой Vue.js Framework? Маршрутизатор собирается обрабатывать всю навигацию для нас. Он гарантирует, что каждая дочерняя страница отображается в этом главном шаблоне. Нам нужно рассказать маршрутизатору, где их показывать. В вашем HTML-коде найдите место, отмеченное желтой полосою, и добавьте следующий компонент там:

......

Это говорит о маршрутизаторе использовать это место для рендеринга дочерних страниц и их компонентов. Нам также нужно настроить ссылки в основной навигации от обычного А Теги к каналам маршрутизатора. Вот моя реализация:

... Home
 Blog
 About
...

Если есть какие-либо другие параметры на вашем А Теги, вы можете использовать их с тегами Mar Router-Link. Маршрутизатор Vue.js удостоверится, что они появляются в конечном HTML-коде.

Поздравляем, ваш главный шаблон закончен.

Детские страницы

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

Прежде всего, давайте инициализируем нашу приложение Vue.js и маршруты в app.js файл. Маршруты идут непосредственно из списка страниц выше. Реализация должна выглядеть так:

const router = new VueRouter({ routes: [  { path: '/', component: Home },  { path: '/blog', component: Blog },  { path: '/about', component: About } ]})const app = new Vue({ el: '#page-wrapper', router})

Мы создаем экземпляр маршрутизатора и пропустите его URL-адреса всех наших страниц и имена компонентов. У нас еще нет этих компонентов, поэтому я просто использовал имена соответствующих страниц. Мы создадим компоненты с тем же именами позже.

Каждое приложение Vue.js доведено в жизнь, создав экземпляр класса Vue и подключив его к элементу. В моем случае это div с ID Page-Wrapper – верхний уровень элемента прямо под тегом тела. Экземпляр также должен знать, что мы хотим использовать маршрутизатор Vue.js. Вот почему экземпляр маршрутизатора передается в основной экземпляр.

Последнее, что нам нужно сделать, это определить компоненты для каждой страницы. Обратите внимание, что нам нужно создать их до определения приложения Vue, в противном случае они не будут известны Vue.js.

Помните удаленный код из главного шаблона? Это содержание нашего компонента домашней страницы. Давайте определим это:

const Home = { template: `                   ...     
     Ondrej Polesny
     Developer Evangelist + dog lover + freelance bus driver
    
   
                                        Kentico
        ...
        Continue       
      
     
          ...     
          ...     
          ...     
                  Latest blog posts
       ...
       ...       
     
           See all
     
    
   
  
`}

Вы видите, что это много HTML Markup, и это делает наши app.js файл довольно большой и нечитаемый. Кроме того, какой-то содержание также отображается на других страницах. Например, список статей блога или текстов обо мне.

Компоненты

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

const Home = { template: `                                  Latest blog posts
       ...
                      See all
       
      
     
    
   
  
`}

Важно правильно идентифицировать компоненты. Они должны быть независимыми и охватывают конкретные функциональные возможности или разметки. Посмотрите, как я их отделил:

Я определил 3 компонента:

Баннер (1)
Об обзоре (2)
Список блога (3)

Обратите внимание, что некоторые элементы управления находятся за пределами желтых областей, которые отмечают соответствующие компоненты. Например, посмотрите на компонент списка блога. Вы видите, что кнопка «Смотрите все», абзац, представляющий раздел и его заголовок, исключаются из компонента. Причина в том, что компонент списка блога также будет использоваться на странице блога. Эти тексты будут разными, и кнопка «See все» не будет отображаться вообще. Поэтому компонент должен включать только многоразовые части контента и разметки.

Я добавил определения этих компонентов к Компоненты.js файл. Их можно использовать независимо, поэтому, если вы хотите отделить их дальше, вы можете.

Баннер – самый простой из этих компонентов. Он не содержит никаких функций, просто разметка HTML. Посмотрите, как это выглядит ниже:

Vue.component('banner', { template: `                             
    Ondrej Polesny
    Developer Evangelist + dog lover + freelance bus driver
   
  
` })

Каждый компонент должен иметь уникальное имя (баннер) и шаблон, который является просто HTML Markup. Обычно компоненты также содержат данные и другие функции, которые им нужны для их функциональности. Посмотрите на компонент списка блога:

Vue.component('blog-list', { props: ['limit'], data: function(){  return {   articles: [    {     url: 'https://medium.com',     header: 'How to start creating an impressive website for the first time',     image: 'https://cdn-media-1.freecodecamp.org/images/1*dVlw9tLq4lVaXrGG0gZc8Q@2x.png',     teaser: `OK, so you know you want to build a website. You have an idea how it should look like and what content it should display. You are sure that it should be fast, eye-pleasing, gain a lot of traction, and attract many visitors. But how do you create that? What are the trends around building websites these days? How are others building successful websites and where should YOU start? Let's give you a head start!`    },    …   ]  } }, template: `             {{article.header}}
    {{article.teaser}}
    Continue reading   
  
`})

В объеме компонента списка блога я хочу перечислить последние сообщения в блоге. Я также хочу иметь возможность ограничить количество постов, отображаемых на домашней странице только к 4 последним статьям. Таким образом, я представил Ограничить имущество. Я буду использовать его позже, когда содержимое исходит из службы контента. Предел будет установлен в разметке при использовании компонента: <Лимит списка блога = " 4″>.

В шаблоне (разметка) есть простой V-для Цикл, который итерации на массив статей. Толстая кишка : href До того, как любой атрибут означает, что он будет разрешен Vue.js до указанной переменной, например URL-адреса статьи. Кудрявые скобки {{article.teaser}} иметь тот же эффект.

Статьи определены в данные Собственность в объекте. Позже я покажу вам, как сохранить этот контент за пределами компонента, в безголовом CMS. Это служба контента в облаке. Но не волнуйтесь, денег не будет потрачено, как мы будем использовать бесплатный план безголового CMS Кентако облако Отказ

Последний компонент «Об обзоре» выглядит очень похоже. Так что давайте пропустим это сейчас. Давайте посмотрим, как приклеить компоненты и страницы вместе и создать два до сих пор пропущенных страниц – о и блоге.

Создание других страниц

Эти две страницы – о и блоге – будут созданы так же, как мы создали домашнюю страницу. Обратите внимание, что мы на самом деле не создаем компоненты, а страницы. Поэтому не будет Vue.component () Определение, но простой объект с одним свойством – шаблон. Эти объекты пойдут в app.js файл. Давайте посмотрим на страницу блога:

const Blog = { template: `              Blog posts
     Here you can see list of all blog posts that I published.
    
   
                
   
  
`}

Видите ли, эта страница была действительно проста, поскольку компонент списка блога мог быть повторно использован.

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

const router = new VueRouter({ routes: [  { path: '/', component: Home },  { path: '/blog', component: Blog },  { path: '/about', component: About } ]})

На самом деле эти компоненты являются страницами. Страницы, которые мы только что созданы как простые объекты и назначили их константам. Обратите внимание, что название этих констант должно соответствовать именам компонентов соответствующих маршрутов. Например, страница на /Блог Маршрут должен быть определен как объект в постоянном Блог Отказ

Заканчивать

Когда у вас есть все ваши компоненты и определенные страницы, откройте свой мастер-шаблон и посмотрите результаты. Сайт динамичен, даже если мы не использовали какие-либо технологии рендеринга на стороне серверов. Как маршрутизация, так и рендеринга компонентов выполнены Vue.js.

Последний совет: если вы видите неполный веб-сайт, шансы у вас есть опечатка в одном из файлов JavaScript. Откройте консоль вашего браузера, ударив F12 (или Ctrl + Shift + C ) и переключитесь на вкладку консоль. Вы увидите причину ошибки там.

Поздравляю! Вы только что сделали свой сайт Dynamic. В следующей статье я покажу вам, как отделить контент от компонентов и создать настоящую архитектуру микросервиса с без головы CMS Отказ

Другие статьи в серии:

Оригинал: “https://www.freecodecamp.org/news/how-to-power-up-your-website-with-vue-js-and-minimal-effort-dc8042cc383c/”

Интеграция Vue.js.

Выкладывая компоненты

Мастер шаблон

Детские страницы

Ondrej Polesny

Kentico

Latest blog posts