Установка Vue.js 3 — это простой процесс, который начинается с установки Vue CLI. Vue CLI предоставляет инструменты для создания и управления проектами Vue.
npm install -g @vue/cli
После установки Vue CLI можно создать новый проект с Vue 3:
vue create my-vue3-project
Выберите «Manually select features» и убедитесь, что выбрана опция «Vue 3» в разделе «Choose a version of Vue.js».
Структура проекта
Структура проекта Vue.js 3 включает следующие основные каталоги и файлы:
public/
: каталог для статических файлов.src/
: каталог для исходного кода приложения.src/components/
: каталог для компонентов приложения.src/App.vue
: основной компонент приложения.src/main.js
: точка входа для приложения.
Создание компонентов
Компоненты в Vue.js 3 создаются с использованием синтаксиса Single File Components (SFC). SFC объединяют шаблон, логику и стили компонента в одном файле с расширением .vue
.
Пример компонента:
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue.js 3!',
};
},
};
</script>
<style scoped>
div {
color: red;
}
</style>
Работа с состоянием
Vue.js 3 предоставляет улучшенную систему реактивности для работы с состоянием компонентов. Используйте функцию reactive
для создания реактивных объектов.
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({ count: 0 });
function increment() {
state.count++;
}
return { state, increment };
},
};
Роутинг и Vuex
Vue Router и Vuex – это официальные библиотеки для роутинга и управления состоянием. Они также были обновлены для Vue.js 3.
Установите их с помощью npm:
npm install vue-router@next vuex@next
Сборка и развертывание
Для сборки и развертывания приложения Vue.js 3 используйте команду build
:
npm run build
Это сгенерирует оптимизированную сборку в каталоге dist/
, которую можно развернуть на любом хостинге.