Создайте свое первое приложение с помощью Vue.js

• Первый пример
  • Смотрите на Codepen
• Второй пример: приложение Vue CLI по умолчанию
  • Используйте интерфейс командной строки Vue локально
  • Используйте песочницу Кода
  • Структура файлов
  • Структура файлов
  • src/main.js
  • src/Приложение.vue
  • src/компоненты/HelloWorld.vue
  • Запустите приложение

Если вы никогда не создавали Vue.js приложение, я собираюсь провести вас через задачу его создания и понимания того, как оно работает.

Первый пример

Сначала я приведу самый простой пример использования Vue.

Вы создаете HTML-файл, который содержит

  
    

      
{{ hello }}
    
    
    
  

и вы открываете его в браузере. Это ваше первое приложение Vue! На странице должно отображаться сообщение “Привет, мир!”.

Я помещаю теги скрипта в конец тела, чтобы они выполнялись по порядку после загрузки DOM.

Что делает этот код, мы создаем экземпляр нового приложения Vue, связанного с элементом #example в качестве его шаблона (обычно он определяется с помощью селектора CSS, но вы также можете передать элемент HTMLElement).

Затем он связывает этот шаблон с объектом данные . Это специальный объект, в котором хранятся данные, которые мы хотим, чтобы Vue отображал.

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

Смотрите на Codepen

Вы можете увидеть этот пример на Codepen: Вы можете увидеть этот пример на Codepen:

Codepen немного отличается от использования обычного HTML-файла, и вам нужно настроить его так, чтобы он указывал на расположение библиотеки Vue в настройках пера:

Второй пример: приложение Vue CLI по умолчанию

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

Что такое интерфейс командной строки Vue? Это утилита командной строки, которая помогает ускорить разработку, создавая для вас каркас приложения с образцом приложения на месте.

Есть два способа получить это приложение.

Используйте интерфейс командной строки Vue локально

Первый – установить интерфейс командной строки Vue на свой компьютер и выполнить команду

vue create 

Используйте песочницу Кода

Более простой способ, без необходимости что-либо устанавливать, – это перейти в https://codesandbox.io/s/vue .

Code Sandbox – это классный редактор кода, который позволяет создавать приложения в облаке, что позволяет использовать любой пакет npm, а также легко интегрироваться с Zeit Сейчас для простого развертывания и GitHub для управления версиями.

Эта ссылка, которую я разместил выше, открывает приложение Vue CLI по умолчанию.

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

Структура файлов

Рядом с package.json , который содержит конфигурацию, это файлы, содержащиеся в исходной структуре проекта:

• Рядом с
• package.json
• , который содержит конфигурацию, это файлы, содержащиеся в исходной структуре проекта:
• src/Приложение.vue
• src/main.js

src/компоненты/HelloWorld.vue

В index.html файл – это основной файл приложения.

В теле он включает в себя всего один простой элемент: . Это элемент, который приложение Vue будет использовать для присоединения к DOM.

src/main.js

Это основные файлы JavaScript, которые управляют нашим приложением.

Сначала мы импортируем библиотеку Vue и компонент приложения из App.vue .

Мы установили тип производства в значение false, просто чтобы избежать вывода Vue типа ” вы находитесь в режиме разработки ” в консоли.

Затем мы создадим экземпляр Vue, назначив его элементу DOM, определяемому #app , который мы определили в index.html , и мы говорим ему использовать компонент приложения.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: ''
})

src/Приложение.vue

App.vue представляет собой компонент из одного файла. Он содержит 3 фрагмента кода: HTML, CSS и JavaScript.

Поначалу это может показаться странным, но компоненты с одним файлом – отличный способ создания автономных компонентов, которые содержат все необходимое в одном файле.

У нас есть разметка, JavaScript, который будет взаимодействовать с ней, и стиль, который к ней применяется, который может быть ограничен или нет. В этом случае он не ограничен, и он просто выводит тот CSS, который применяется к странице как обычный CSS.

Интересная часть заключается в теге script .

Мы импортируем компонент из файла components/HelloWorld.vue , который мы опишем позже.

На этот компонент будет сделана ссылка в нашем компоненте. Это зависимость. Мы собираемся вывести этот код:

из этого компонента, который вы видите, ссылается на компонент HelloWorld. Vue автоматически вставит этот компонент в этот заполнитель.

src/компоненты/HelloWorld.vue

Вот компонент HelloWorld, который входит в состав компонента приложения.

Этот компонент выводит набор ссылок вместе с сообщением.

Помните, выше мы говорили о CSS в App.vue, который не был ограничен? Компонент HelloWorld имеет область действия CSS.

Вы можете легко определить это, посмотрев на стиль тег. Если у него есть атрибут область действия , то он ограничен: <область действия стиля>

Это означает, что сгенерированный CSS будет нацелен на компонент однозначно, через класс, который прозрачно применяется Vue. Вам не нужно беспокоиться об этом, и вы знаете, что CSS не будет просачиваться в другие части страницы.

Сообщение, выводимое компонентом, хранится в свойстве data экземпляра Vue и выводится в шаблоне как {{msg}} .

Все, что хранится в данных , доступно непосредственно в шаблоне через его собственное имя. Нам не нужно было говорить данные.msg , просто msg .

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

Песочница кода обладает отличной функцией предварительного просмотра. Вы можете запустить приложение и отредактировать что-либо в исходном коде, чтобы это немедленно отразилось в предварительном просмотре.

Оригинал: “https://flaviocopes.com/vue-first-app/”