Как улучшить свой веб-сайт с помощью Vue.js и минимальных усилий

1656526998 kak uluchshit svoj veb sajt s pomoshhyu vuejs i minimalnyh usilij

Ондржея Полесного

tvqH1epE7QGKBI55lTFFJHeA9LoHghX10AsD

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

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

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

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

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

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

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

...  <! — development version, includes helpful console warnings →  <script src="  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script></head>...

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

...<body class="is-preload">  <div id="page-wrapper">    <header id="header" class="alt">...

Хорошая работа! Теперь у нас готова главная страница компонентов Vue.js.

Раскладка компонентов

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

B5bClcS18GrM20zcQt0nnugKZ29-0TY61gjl
  1. Заголовок, включая главное меню
  2. Нижний колонтитул, включая контактную форму

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

Сначала создадим два пустых файла:

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

...<script src=" src="assets/js/app.js"></script>...

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

  • / — Домашняя страница
  • /blog – страница блога
  • /about — Страница обо мне

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

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

Vgayc-byp00ZPFvEdC0Qvzxqv7hhF7zxMN8l

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

...<router-view></router-view>...

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

... <li><router-link to="/">Home</router-link></li> <li><router-link to=" <li><router-link to="/about">About</router-link></li>...

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

Добро пожаловать, ваш главный шаблон готов.

Дочерние страницы

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

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

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

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

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

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

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

const Home = { template: `  <div>   <section id="banner">    <div class="inner">     <div class="logo">     ...     </div>     <h2>Ondrej Polesny</h2>     <p>Developer Evangelist + dog lover + freelance bus driver</p>    </div>   </section>   <section id="wrapper">    <div>     <section id="one" class="wrapper spotlight style1">      <div class="inner">       <router-link to="/about" class="image"><img src=" alt="" /></router-link>       <div class="content">        <h2 class="major">Kentico</h2>        <p>...</p>        <router-link to="/about" class="special">Continue</router-link>       </div>      </div>     </section>     <section id="two" class="wrapper alt spotlight style2">     ...     </section>     <section id="three" class="wrapper spotlight style3">     ...     </section>     <section id="four" class="wrapper alt style1">     ...     </section>     <div class="inner">      <div>       <h2 class="major">Latest blog posts</h2>       <p>...</p>       ... <!-- list of blogs -->      </div>     </div>     <ul class="actions">      <li><a href=" class="button">See all</a></li>     </ul>    </div>   </section>  </div>`}

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

Компоненты

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

const Home = { template: `  <div>   <banner></banner>   <section id="wrapper">    <about-overview></about-overview>    <section id="four" class="wrapper alt style1">     <div class="inner">      <div>       <h2 class="major">Latest blog posts</h2>       <p>...</p>       <blog-list limit="4"></blog-list>       <ul class="actions">        <li><a href=" class="button">See all</a></li>       </ul>      </div>     </div>    </section>   </section>  </div>`}

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

j2whyBT5pzhObo8-R5XkYC0hoLM7vNnJndhg

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

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

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

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

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

Vue.component('banner', { template: `  <section id="banner">   <div class="inner">    <div class="logo">     <span class="icon">      <img src=" alt="" />     </span>    </div>    <h2>Ondrej Polesny</h2>    <p>Developer Evangelist + dog lover + freelance bus driver</p>   </div>  </section>` })

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

Vue.component('blog-list', { props: ['limit'], data: function(){  return {   articles: [    {     url: '     header: 'How to start creating an impressive website for the first time',     image: '     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: `  <section class="features">   <article v-for="article in articles">    <a :href=" class="image"><img :src="article.image" alt="" /></a>    <h3 class="major">{{article.header}}</h3>    <p>{{article.teaser}}</p>    <a :href=" class="special">Continue reading</a>   </article>  </section>`})

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

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

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

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

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

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

const Blog = { template: `  <section id="wrapper">   <header>    <div class="inner">     <h2>Blog posts</h2>     <p>Here you can see list of all blog posts that I published.</p>    </div>   </header>   <div class="wrapper">    <div class="inner">     <blog-list></blog-list>    </div>   </div>  </section>`}

Понимаете, эта страница стала очень простой, поскольку компонент списка блогов можно использовать повторно.

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

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

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

Заканчиваем

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

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

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

  1. Как начать создавать впечатляющий сайт впервые
  2. Как выбрать лучшую технологию для своего сайта?
  3. Как улучшить свой веб-сайт с помощью Vue.js и минимальных усилий
  4. Как объединить Headless CMS с веб-сайтом Vue.js и Pay Zero
  5. Как сделать подачу форм безопасной на веб-сайте API
  6. Создание супербыстрого и безопасного веб-сайта с помощью CMS не составляет большого труда. Или это?
  7. Как быстро создать статический веб-сайт с помощью Vue.js
  8. Как быстро настроить процесс составления статического сайта

Добавить комментарий

Ваш адрес email не будет опубликован.