Начало работы с Vue.js

Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.

В этой статье мы рассмотрим, как добавить фреймворк Vue.js в наше приложение и создать наше первое приложение.

Тег сценария

Мы можем включить фреймворк Vue.js с тегом script.

Для этого мы можем написать:

<script src='https://vuejs.org/js/vue.js'></script>

перед загрузкой кода нашего приложения. По приведенному выше URL-адресу указана разрабатываемая версия, в которой есть все предупреждения, но она не уменьшена.

Чтобы включить производственную версию, мы можем написать:

<script src='https://vuejs.org/js/vue.min.js'></script>

Чтобы исправить версию до 2.6.11, мы можем написать:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Мы также можем импортировать модуль в наш браузер, если нам не нужно поддерживать Internet Explorer следующим образом:

<script type="module">   
  import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js' </script>

Файл vue.esm.browser.js уже оптимизирован для браузеров, поэтому его можно использовать, не создавая слишком много запросов.

Пример

Чтобы создать наше первое приложение, мы можем создать файл index.html следующим образом:

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script src="https://vuejs.org/js/vue.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script src="./src/index.js"></script>
  </body>
</html>

Затем в src/index.js мы можем добавить:

new Vue({
  template: "<div>{{ 'hello' }}</div>",
  el: "#app"
});

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

Компилятор Vue.js отвечает за преобразование шаблона в HTML.

В приведенном выше шаблоне 'hello' - это строка JavaScript, которая была преобразована в текст HTML при запуске компилятора Vue.

Мы указали, что в шаблоне есть div с текстом 'hello'.

Различные сборки фреймворка Vue.js

Существует несколько разных сборок фреймворка Vue.js. Они:

Полный - сборки, в которых есть компилятор и среда выполнения. Это тот, который мы использовали в приведенном выше примере.
Компилятор - код, отвечающий за компиляцию строк шаблона в функции рендеринга JavaScript.
Время выполнения - код, отвечающий за создание экземпляров Vue, рендеринг и обновление виртуальной DOM и т. Д.
UMD - модуль, который можно напрямую включить с помощью тега script. Он включает в себя среду выполнения и компилятор
CommonJS - модуль, который можно использовать со старыми сборщиками, такими как Browserify или Webpack 1.
Модуль ES - новый в версии 2.6. Он может использоваться браузерами напрямую через <script type='module'> или использоваться с такими сборщиками, как Webpack 2 или Rollup.

Среда выполнения и компилятор

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

Компилятор предназначен для компиляции шаблонов, указанных параметром template.

Это означает, что:

new Vue({
  template: "<div>{{ 'hello' }}</div>",
  el: "#app"
});

нужен компилятор и:

new Vue({
  el: "#app",
  render(h) {
    return h("div", "hello");
  }
});

не делает.

Синтаксис шаблонов станет намного удобнее, когда наши приложения станут более сложными.

Когда мы используем vue-loader или vueify, шаблоны внутри .vue файлов предварительно скомпилированы в JavaScript, поэтому нам не нужен компилятор в окончательном комплекте.

Когда нам не нужно использовать компилятор, мы должны использовать только сборку среды выполнения, поскольку она на 30% меньше.

Мы можем включать разные сборки в зависимости от используемого сборщика. Например, в Parcel мы можем написать:

"alias": {     
  "vue" : "./node_modules/vue/dist/vue.common.js"   
}

in package.json .

Vue CLI

Мы можем Vue-CLI автоматически создавать наше приложение и собирать его, поэтому нам не нужно беспокоиться о том, какие пакеты выбрать.

Чтобы установить его, мы можем запустить:

npm install -g @vue/cli

or:

yarn global add @vue/cli

Затем мы можем создать с ним проект, запустив:

vue create project

или запустите:

vue ui

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

Кроме того, мы можем запустить Vue CLI напрямую с npx, запустив:

npx vue create project

Запуск vue create представит нам мастера с различными опциями, например:

Vue CLI v3.11.0
┌───────────────────────────┐
│  Update available: 4.1.2  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Этот экран отображается, когда мы выбираем Manually Select Features. Мы можем выбрать Default, если не хотим ничего выбирать на этом экране.

Чтобы запустить пользовательский интерфейс Vue, мы можем запустить:

npx vue ui

Затем наш браузер автоматически перейдет на http: // localhost: 8000 / project / select, где мы увидим ссылку Создать для создания проекта.

Затем мы можем создать проект, щелкнув здесь «Создать новый проект» после того, как щелкнули вкладку «Создать».

Заключение

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

Для начала мы добавили Vue.js с тегом script, а затем создали новый экземпляр Vue для создания приложения.

Существуют различные сборки фреймворка Vue.js. Если нам нужны шаблоны, нам понадобится полная сборка, если она не содержит vue-loader или vueify.

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