Создаем первое приложение в Vue.js

С момента своего запуска Vue.js становится все популярнее. В качестве модульной инфраструктуры веб-интерфейса Vue.js приобрел очень лояльную и широкую пользовательскую базу среди разработчиков JavaScript.

Таким образом, все больше и больше разработчиков сейчас обращаются к Vue.js – он давно зарекомендовал себя как третье по популярности имя в мире веб-разработки, после Angular и React.

Итак, как начать работу с Vue.js? Как мы можем создать наше самое первое приложение Vue.js?

В этой статье мы будем создавать наше первое приложение Vue.js. Так что без дальнейших церемоний, давайте начнем.

Создаем наше первое приложение Vue.js

Наше приложение будет не большим, а простым одностраничным сайтом, на котором будут ссылки на другие страницы.

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

Установка довольно проста. Вот как это сделать через npm:

npm install -g @vue/cli

В качестве альтернативы мы также можем использовать Yarn:

yarn global add @vue/cli

Как только мы установим и настроим Vue CLI в нашей системе, мы сможем использовать команду vue из терминала. Чтобы создать новое приложение, давайте запустим следующую команду:

vue create my_first_app

Приведенная выше команда создаст наше первое приложение и его структуру – my_first_app

Создаем первое приложение в VUE.JS

Понимание структуры приложения

Каждое приложение Vue.js содержит свой собственный файл package.json, почти как любое другое приложение JavaScript. Этот файл содержит список зависимостей и другую важную информацию для успешной настройки приложения.

Помимо этого, наше приложение также будет иметь файл index.html прямо в пути ./public. Этот файл, предназначенный для использования в качестве отправной точки приложения, будет содержать простой элемент, который Vue.js может использовать для присоединения к DOM.

Вот как выглядит наш файл index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>This is my First Vue App</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but my_first_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Однако наиболее важные файлы находятся в пути ./src.

Файл src/main.js

Для начала у нас есть файл src/main.js, который, как следует из названия, является основным файлом JavaScript для нашего приложения. В этом файле мы импортируем библиотеку Vue и компонент приложения. Кроме того, мы создадим здесь экземпляр Vue, а затем назначим элементу DOM, который мы уже определили в файле index.html.

Вот как должен выглядеть файл src/main.js:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Файл src/App.vue

Другим важным файлом в пути ./src является файл src/App.vue. Этот конкретный файл является Отдельным Файловым Компонентом с автономной природой. Он включает в себя некоторую разметку, а также JavaScript и немного CSS.

В файле src/App.vue мы импортируем компонент из файла ./src/components/HelloWorld.vue. Вот как выглядит наш файл App.vue:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Hello World, meet Buddy!"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

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

Файл src/components/HelloWorld.vue

Компонент HelloWorld, как указано выше, используется для вывода набора ссылок и специального сообщения. Это то, что будет обслуживать само одностраничное приложение.

Файл HelloWorld.vue состоит из HTML, CSS и JavaScript. Однако весь CSS, упомянутый здесь, ограничен (в отличие от файла App.vue).

Вот как выглядит наш компонент src / components / HelloWorld.vue:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For more info on how Buddy can help you launch killer apps,<br>
      check out the
      <a href="http://buddy.works" target="_blank" rel="noopener">Buddy homepage</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://buddy.works/pricing" target="_blank" rel="noopener">Pricing</a></li>
      <li><a href="https://buddy.works/knowledge" target="_blank" rel="noopener">Docs</a></li>
      <li><a href="https://buddy.works/help" target="_blank" rel="noopener">Support</a></li>
      <li><a href="https://app.buddy.works/sign-up" target="_blank" rel="noopener">Free Trial</a></li>
      <li><a href="https://buddy.works/blog" target="_blank" rel="noopener">Blog</a></li>
    </ul>
    <h3>Social Media</h3>
    <ul>
      <li><a href="https://www.facebook.com/gitbuddy" target="_blank" rel="noopener">Facebook</a></li>
      <li><a href="https://twitter.com/buddygit" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://www.linkedin.com/company/10293199" target="_blank" rel="noopener">LinkedIn</a></li>
      <li><a href="#" target="_blank" rel="noopener">Email</a></li>
      <li><a href="https://github.com/buddy-works" target="_blank" rel="noopener">GitHub</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Запуск приложения

Теперь, когда мы поняли структуру путей и файлов, давайте попробуем запустить наше приложение. Обратите внимание, что мы изменили элементы мультимедиа, хранящиеся в пути ./assets.

Чтобы запустить наше приложение, нам просто нужно перейти в путь приложения и затем выполнить следующую команду:

npm run serve

Создаем первое приложение в VUE.JS

Наше приложение будет работать на localhost:8080

И вот предварительный просмотр браузера:

Создаем первое приложение в VUE.JS

Заключение

Получилось! Мы создали наше самое первое приложение Vue. Чтобы продолжить эксперимент, вы можете изменить файлы приложения по своему усмотрению.