Учебное пособие по Vue cli с примерами с нуля — это тема, которую мы обсудим сегодня. На момент написания этой публикации у вас должны быть установлены Node.js и version> = 8 , потому что я использую @ vue/ cli 3.0. Иначе не получится. Vue также отлично подходит для сложных одностраничных приложений . Vue предоставляет реактивные и составные компоненты представления. Он использует виртуальную модель DOM . Он сохраняет фокус в основной библиотеке, включая такие задачи, как маршрутизация и глобальное управление состоянием, которые обрабатываются сопутствующими библиотеками.

Vue cli Tutorial

Сначала мы установим vue cli , а затем начнем работать над этим.

Шаг 1. Установите Vue cli.

Перейдите в свой терминал и нажмите следующую команду.

 npm install -g @ vue/cli oryarn global add @ vue/cli 

Он установит Vue cli во всем мире. Теперь, чтобы сгенерировать проект vue, введите следующую команду.

 vue create vuepro 

Он установит необходимые файлы и зависимости. После этого вам нужно запустить сервер с помощью следующей команды.

 npm serve oryarn serve 

Переключитесь на этот URL-адрес браузера: http://localhost: 8080/ Вы можете видеть, что наш проект Vue.js запущен и работает.

Шаг 2: Структура папки .

Ниже представлена ​​структура папок проекта. Помните здесь; Мы используем компоненты во Vue. Таким образом, синтаксис свойства данных отличается. В простом проекте vue мы определяем свойство данных для доступа к значениям свойств, но в этом сценарии мы используем данные как функцию, и она возвращает объект, содержащий значение.

Нашей основной проблемой является папка src. В этой папке два файла и одна папка.

1. App.vue
2. main.js
3. папка компонентов

В App.vue , все компоненты включены в этот файл. Прямо сейчас в этом файле есть один компонент под названием HelloWorld.vue. Файл HelloWorld.vue находится в папке components . Таким образом, все остальные компоненты создаются внутри папки components и включаются в файл App.vue . Инициализация Vue выполняется внутри файла main.js .

//main.jsimport Vue из 'vue'import App from' ./App.vue'Vue  .config.productionTip = falsenew Vue ({render: h => h (App)}). $ mount ('# app') 

Теперь перейдите в общую папку. В нем находится файл index.html .

Здесь наше приложение Vue работает внутри тега div идентификатора app . Экземпляр Vue связан с этим тегом div.

Шаг 3. Создайте один компонент.

Внутри компонентов , создайте один компонент под названием

//Ether.vue  
 
  {{msg}} 
 
  экспорт по умолчанию {name: 'Ethereum', props: {msg: String}}  

Выше двухсторонний — это отдельный компонент. У него есть собственные свойства и методы. Если мы хотим увидеть результат работы этого компонента, импортируйте этот компонент в файл App.vue .

//App.vuetemplate> 
   
  импортировать HelloWorld из './components/HelloWorld.vue';  импортировать эфир из './components/Ether.vue';export default {name:' app ', components: {HelloWorld, Ether}}  

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

Привязка событий в Vue.

Если мы хотим изменить значение свойства при нажатии кнопки, вы можете написать для этого следующий код.

//Ether.vue  
 
 {{price}} 
  Изменить значение  
  экспорт по умолчанию {data () {return {price: 200};  }, методы: {click () {this.price = 300;  }}}  

Итак, теперь, когда мы нажимаем кнопку, запускается событие щелчка . Событие Click вызывает функцию click () . Эта функция изменяет значение цены. Vue является реактивным, поэтому при изменении свойства оно немедленно отражает значение в dom и обновляется.

Обработка пользовательского ввода.

В папке компонентов сделайте один вызов файла

//Form.vue  
 
 
 
 Добавить пользователя 
 
  
  
  Имя   
 
  Электронная почта   
  Отправить   
  
 
 
 Меня зовут: {{name}} Мой адрес электронной почты: {{email}} 
 
 
  export default {data () {return {name: '', email: ''}}}  

Здесь у нас есть используется концепция двусторонней привязки данных.

Теперь импортируйте этот файл в A pp.vue .

//App.vue  
  
  import  Форма из './components/Form.vue';export default {components: {Form}}  

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

Вычисляемые свойства.

В компонентах , создайте один новый файл с именем

//Computed.vue  
  Увеличение   Уменьшение  
 
 {{view}} 
 
  экспорт по умолчанию {data () {return {counter: 0}}, вычислено: {view: function () {return  this.counter <0?  0: this.counter;  }}}  

Здесь мы взяли две кнопки.

1. Увеличение
2. Уменьшение

Когда значение счетчика

Импортируйте этот файл в файл App.vue .

//App.vue  
  
  import Computed from './components/Computed.vue';export default {components: {Computed}}  

Vue.js имеет множество других функций. Мы обсудим это в следующих уроках.

Учебное пособие по Vue cli с примером с нуля окончено.