vue.js установка vue-cli

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

Итак, для удобства создан vue-cli, данный модуль для вебпака, позволяет нам разбивать приложения на части, использовать стили и js в одном файле, при этом избегая конфликтов при наименовании классов.

Для установки переходим в папку проекта через консоль, командой cd  путь к проекту, затем устанавливаем vue-cli:

$ npm install —global vue-cli
$ vue init webpack

После того как вы ответите на несколько вопросов, запуск вашего приложения осуществляется через:

$npm rum dev

И наше приложение доступно по адресу — http://localhost:8080/

Для начала нас интересуют файлы в папке src, например App.vue. Это точка входа в наше приложения, в нем мы регестрируем и подгружаем компоненты. В данном файле уже включен компонент helloWorld:

 


import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',
  components: {
    HelloWorld,
    inputer
  }
}

И данный компонент используется в приложении через : <HelloWorld/>

Мы можем теперь создать свой компонент в папке components, например — inputer.vue, с кодом:

<template>
<div class=»inputer-wrapper»>
<input type=»text» class=»inputer» v-model=»textInput»>
<p>{{textInput}}</p>
</div>
</template>

<style scoped>
.inputer {
width: 300px;
height: 40px;
padding-left: 15px;
padding-right: 15px;
}

 

</style>

 

<script>
export default {
name: ‘inputer’,
data() {
return {
textInput: ‘input text’
}
}
}

Заметим атрибут scoped у тега style, который сообщит сборщику что данные стили относятся только к этому компоненту, и они будут заключены в свою область видимости.

 

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

import inputer from ‘./components/inputer’;

и в разметке добавим его вывод — <inputer/>

После этого webpack соберет наше приложение, и мы увидим наш рабочий компонент.