UdnlxPortfolio - Создание приложения, посадка верстки на Vue 3

Установим расширение браузера для дебага Vue

В РАЗРАБОТКЕ

Подготовка проекта к посадке верстки

После генерации шаблона нашего проекта приступаем к его разработке.

Прежде всего приводим в порядок наш index.html.

HTML

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Whizz Vue</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Далее удалим всё из директории "src", будем приложение делать с нуля, оставим только "main.js" и приведем его к виду:

main.js

import { createApp } from 'vue'

createApp(App).mount('#app')

Создадим в папке "src" файл App.vue, это буде корень нашего приложения, зададим его структуру.

App.vue

<template>

</template>

<script>

</script>

<style>

</style>

Добавим в main.js импорт нашего App.vue строкой "import App from './App'".

В секции "template" будет html разметка нашего компонента.

В секции "script" будет логика работы нашего компонента и пишется она так:

Секция скрипт

<template>
    <div>
        Количество лайков: <strong>{{ likes }}</strong>
    </div>
</template>



<script>
export default {
    data() {
        return {
            likes:0,
        }
    }
}

</script>



<style></style>

В секции "style" пишутся свои какие либо специфические стили для этого компонента, которые могут переписать стили из main.css.

Сажаем верстку на VueJS 3 приложение

Для посадки вёрстки делим нашу верстку на блоки, и каждый блок в Vue у нас будет как компонент.

Для примера как подключать и собирать блоки проекта рассмотрим подключение Header, Footer и между ними блок Content.

Создаем в папке "components" файлы Header.vue, Footer.vue и Content.vue.

Header.vue

<template>
    <div>
        Хеадер
    </div>
</template>

<script>

</script>

<style scoped>

</style>

Footer.vue

<template>
    <div>
        Футер
    </div>
</template>

<script>

</script>

<style scoped>

</style>

Content.vue

<template>
    <div>
        Здесь будет контент нашего сайта
    </div>
</template>

<script>

</script>

<style scoped>

</style>

Тогда App.vue у нас будет выглядеть так:

App.vue

<template>
    <div>
        <Header/>
        <Content/>
        <Footer/>
    </div>
</template>



<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import Content from "@/components/Content.vue";

export default {
    components: {
        Header, Footer, Content
    },
}
</script>



<style scoped>

</style>

Теперь, нам нужно подключить наши стили и скрипты вёрстки, для этого: