Русский

Учебник VueJS

VueJS - Настройка )

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

VueJS - Environment Setup

Why Vue.js?

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

Теперь lets get our hands dirty и настроить Vue.js четырьмя различными способами.

Использование тега

Этот метод是最简单的开始使用 Vue.js способ, особенно если вы только才开始尝试. Это как заказать готовое блюдо - быстро и легко!

Вот как это делается:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Vue App</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>

Давайте разберем это:

  1. Мы включаем библиотеку Vue.js с помощью тега <script> в секции <head>.
  2. Мы создаем <div> с идентификатором "app" - это место, где будет жить наше приложение Vue.
  3. В теге <script> внизу мы создаем новый экземпляр Vue,indicating чтобы он целялся на элемент с идентификатором "app".
  4. Мы настраиваем объект data с свойством message.
  5. В HTML, {{ message }} будет заменен на "Hello Vue!".

Использование CDN

CDN означает Content Delivery Network. Это как иметь доставку пиццы для вашего кода - быстро и удобно! Этот метод аналогичен методу тега скрипта, но использует CDN-ссылку.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue with CDN</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
title: 'Welcome to Vue!',
content: 'This is loaded from a CDN.'
}
})
</script>
</body>
</html>

Основное различие здесь в том, что мы используем CDN-ссылку для загрузки Vue.js. Это很好 для быстрого прототипирования или обучения, так как вам не нужно скачивать ничего.

Использование NPM

NPM означает Node Package Manager. Это как огромная библиотека, где вы можете借用 (или в этом случае,下载) пакеты кода. Этот метод больше подходит для больших проектов.

Сначала вам нужно установить Node.js на ваш компьютер. Затем следуйте этим шагам:

  1. Откройте ваш терминал или командную строку.
  2. Перейдите в директорию вашего проекта.
  3. Выполните следующие команды:
npm init -y
npm install vue

Теперь создайте файл с именем app.js и добавьте следующий код:

import Vue from 'vue'

new Vue({
el: '#app',
data: {
message: 'Hello from NPM!'
}
})

И в вашем HTML-файле:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue with NPM</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="app.js"></script>
</body>
</html>

Этот метод позволяет лучше управлять зависимостями и обычно используется в более сложных проектах.

Использование CLI Командной строки

Vue CLI (Command Line Interface) как иметь личного помощника для настройки ваших проектов Vue.js. Он невероятно мощный и настраивает полную среду разработки.

Чтобы использовать Vue CLI:

  1. Установите его глобально с помощью NPM:
npm install -g @vue/cli
  1. Создайте новый проект:
vue create my-vue-project
  1. Перейдите в директорию вашего проекта:
cd my-vue-project
  1. Запустите сервер для разработки:
npm run serve

CLI создаст структуру проекта для вас, включая директорию src с вашим главным компонентом App и другими необходимыми файлами.

Вот пример того, как может выглядеть ваш файл App.vue:

<template>
<div id="app">
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
</template>

<script>
export default {
name: 'App',
data() {
return {
title: 'Welcome to Your Vue.js App',
description: 'This was created using the Vue CLI!'
}
}
}
</script>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

Это настраивает компонент с шаблоном, скриптом и стилем в одном файле - pretty neat, right?

Methods Summary

Вот краткое сравнение методов, которые мы рассмотрели:

Method Ease of Use Best For Prerequisites
Script Tag Very Easy Quick start, learning None
CDN Easy Prototyping, small projects None
NPM Moderate Medium to large projects Node.js installed
CLI Advanced Large, complex projects Node.js, NPM

Remember, there's no "best" method – it all depends on your project needs and personal preferences. As you grow more comfortable with Vue.js, you'll naturally gravitate towards the method that suits you best.

And there you have it! You're now equipped with four different ways to set up your Vue.js environment. Whether you're just starting out or planning a complex application, you have the tools to begin your Vue.js journey.

Remember, the key to mastering programming is practice. So don't be afraid to experiment with these different setup methods. Try creating small projects using each approach. Before you know it, you'll be a Vue.js wizard!

Happy coding, and may the Vue be with you! ??‍??‍?

Credits: Image by storyset

Предыдущий учебник:
VueJS - Обзор
Следующий учебник:
VueJS - Введение