Создаем первое приложение в 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. Чтобы продолжить эксперимент, вы можете изменить файлы приложения по своему усмотрению.