В РАЗРАБОТКЕ
После генерации шаблона нашего проекта приступаем к его разработке.
Прежде всего приводим в порядок наш 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.
Для посадки вёрстки делим нашу верстку на блоки, и каждый блок в 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>
Теперь, нам нужно подключить наши стили и скрипты вёрстки, для этого: