close

Установка Vue.js и создание вашего первого проекта

Чтобы установить Vue.js, выполните следующие действия:

Шаг 1: Создайте новый каталог для своего проекта и откройте терминал в этом каталоге.

Шаг 2: Используйте npm для установки Vue CLI(интерфейс командной строки), выполнив следующую команду:

npm install -g @vue/cli


Шаг 3: После успешной установки вы можете создать новый проект Vue, используя следующую команду:

vue create my-vue-project


Шаг 4: Выберите параметры конфигурации для вашего проекта, включая установку препроцессоров Babel, ESLint и CSS(необязательно).

Шаг 5: После завершения процесса создания проекта перейдите в каталог проекта с помощью команды:

cd my-vue-project


Шаг 6: Запустите следующую команду, чтобы запустить проект Vue:

npm run serve


После завершения процесса запуска вы увидите URL-адрес для доступа к вашему приложению Vue в браузере.

Простой пример Vue.js:

Давайте создадим новый файл HTML и назовем его index.html `. В этот файл добавьте следующий код:

html  
<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue.js Example</title>  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  
  <div id="app">  
    <h1>{{ message }}</h1>  
    <button @click="changeMessage">Change Message</button>  
  </div>  
  
  <script>  
    new Vue({  
      el: '#app',  
      data: {  
        message: 'Hello Vue.js!'  
      },  
      methods: {  
        changeMessage() {  
          this.message = 'Message changed successfully!';  
        }  
      }  
    });  
  </script>  
</body>  
</html>

В этом примере мы создали простое приложение Vue с h1 тегом и кнопкой. При нажатии на кнопку сообщение изменится.

Сохраните index.html  файл и откройте его в браузере. Вы увидите начальное сообщение «Hello Vue.js!». При нажатии кнопки сообщение изменится на «Сообщение успешно изменено!».

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