Создаем первое приложение в 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 содержит свой собственный файл 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
Наше приложение будет работать на localhost:8080
И вот предварительный просмотр браузера:
Заключение
Получилось! Мы создали наше самое первое приложение Vue. Чтобы продолжить эксперимент, вы можете изменить файлы приложения по своему усмотрению.