Vue js как установить на windows

Try Vue Online

• To quickly get a taste of Vue, you can try it directly in our Playground.

• If you prefer a plain HTML setup without any build steps, you can use this JSFiddle as your starting point.

• If you are already familiar with Node.js and the concept of build tools, you can also try a complete build setup right within your browser on StackBlitz.

Creating a Vue Application

In this section we will introduce how to scaffold a Vue Single Page Application on your local machine. The created project will be using a build setup based on Vite and allow us to use Vue Single-File Components (SFCs).

Make sure you have an up-to-date version of Node.js installed, then run the following command in your command line (without the > sign):

This command will install and execute create-vue, the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

If you are unsure about an option, simply choose No by hitting enter for now. Once the project is created, follow the instructions to install dependencies and start the dev server:

> cd <your-project-name>
> npm install
> npm run dev

You should now have your first Vue project running! Note that the example components in the generated project are written using the Composition API and <script setup>, rather than the Options API. Here are some additional tips:

• The recommended IDE setup is Visual Studio Code + Volar extension. If you use other editors, check out the IDE support section.
• More tooling details, including integration with backend frameworks, are discussed in the Tooling Guide.
• To learn more about the underlying build tool Vite, check out the Vite docs.
• If you choose to use TypeScript, check out the TypeScript Usage Guide.

When you are ready to ship your app to production, run the following:

This will create a production-ready build of your app in the project’s ./dist directory. Check out the Production Deployment Guide to learn more about shipping your app to production.

Next Steps >

Using Vue from CDN

You can use Vue directly from a CDN via a script tag:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Here we are using unpkg, but you can also use any CDN that serves npm packages, for example jsdelivr or cdnjs. Of course, you can also download this file and serve it yourself.

When using Vue from a CDN, there is no «build step» involved. This makes the setup a lot simpler, and is suitable for enhancing static HTML or integrating with a backend framework. However, you won’t be able to use the Single-File Component (SFC) syntax.

Using the Global Build

The above link loads the global build of Vue, where all top-level APIs are exposed as properties on the global Vue object. Here is a full example using the global build:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

JSFiddle demo

Using the ES Module Build

Throughout the rest of the documentation, we will be primarily using ES modules syntax. Most modern browsers now support ES modules natively, so we can use Vue from a CDN via native ES modules like this:

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

Notice that we are using <script type="module">, and the imported CDN URL is pointing to the ES modules build of Vue instead.

JSFiddle demo

Enabling Import maps

In the above example, we are importing from the full CDN URL, but in the rest of the documentation you will see code like this:

import { createApp } from 'vue'

We can teach the browser where to locate the vue import by using Import Maps:

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

JSFiddle demo

You can also add entries for other dependencies to the import map — but make sure they point to the ES modules version of the library you intend to use.

Splitting Up the Modules

As we dive deeper into the guide, we may need to split our code into separate JavaScript files so that they are easier to manage. For example:

<!-- index.html -->
<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}

If you directly open the above index.html in your browser, you will find that it throws an error because ES modules cannot work over the file:// protocol. In order for this to work, you need to serve your index.html over the http:// protocol, with a local HTTP server.

To start a local HTTP server, first install Node.js and then run npx serve from the command line in the same directory where your HTML file is. You can also use any other HTTP server that can serve static files with the correct MIME types.

You may have noticed that the imported component’s template is inlined as a JavaScript string. If you are using VSCode, you can install the es6-string-html extension and prefix the strings with a /*html*/ comment to get syntax highlighting for them.

Using Composition API without a Build Step

Many of the examples for Composition API will be using the <script setup> syntax. If you intend to use Composition API without a build step, consult the usage of the setup() option.

Next Steps

If you skipped the Introduction, we strongly recommend reading it before moving on to the rest of the documentation.

# Установка

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

Есть четыре основных способа добавления Vue.js в проект:

1. Импорт CDN пакета на странице
2. Скачивание файлов JavaScript и их самостоятельный хостинг
3. Установка с использованием npm
4. Использование официального CLI для развёртывания проекта, предоставляющего продвинутые инструменты для создания современного рабочего процесса разработки фронтенда (например, горячая перезагрузка, линтинг при сохранении и многое другое).

# История изменений

Последняя версия:

Подробная история изменений для каждой версии доступна на GitHub (opens new window).

# Инструменты разработчика

На данный момент в бета-тестировании — интеграция с Vuex и Router в разработке

При использовании Vue рекомендуем установить расширение Vue Devtools (opens new window) для браузера, которое позволит легче проверять и отлаживать приложения на Vue в удобном интерфейсе.

Расширение для Chrome (opens new window)

Расширение для Firefox (opens new window)

Автономное Electron-приложение (opens new window)

# CDN

Для прототипов и в обучающих целях можно использовать последнюю версию с CDN:

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

# Скачивание и самостоятельный хостинг

Если нужно избежать использования систем сборки, но нет возможности использовать CDN в production — в таком случае можно скачать соответствующий .js файл и разместить его на собственном веб-сервере. После чего подключать его, с помощью тега <script>, точно также, как и при подключении с CDN.

Можно просматривать и скачивать файлы с CDN, например unpkg (opens new window) или jsDelivr (opens new window). Различия файлов сборок подробнее объясняются ниже, но обычно потребуется загрузить обе сборки: для разработки и для production.

# npm

npm — рекомендованный способ установки при создании больших приложений на Vue. Он прекрасно сочетается с системами сборки, такими как Webpack (opens new window) или Rollup (opens new window). Также Vue предоставляет инструменты для создания однофайловых компонентов.

# CLI

Vue предоставляет официальный CLI (opens new window) для быстрого создания каркаса одностраничных приложений (SPA). Предлагаемые шаблоны содержат всё необходимое для организации современной фронтенд-разработки. За несколько минут можно получить работающую конфигурацию с горячей перезагрузкой модулей, линтингом кода при сохранении и настроенной конфигурацией production-сборки. Подробнее в документации Vue CLI (opens new window).

Для Vue 3 требуется использовать Vue CLI v4.5, доступная в npm по имени @vue/cli. Для обновления необходимо переустановить последнюю версию @vue/cli глобально:

yarn global add @vue/cli
# ИЛИ
npm install -g @vue/cli

После установки в проекте Vue необходимо выполнить:

# Vite

Vite (opens new window) — инструмент для сборки веб-приложений, предлагающий исключительно быструю обработку кода, благодаря применяемому подходу по использованию нативных импортов ES-модулей.

Быстро развернуть проект на Vue используя Vite можно с помощью следующих команд.

Используя npm:

$ npm init @vitejs/app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

или используя Yarn:

$ yarn create @vitejs/app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

Если в имени пользователя присутствует пробел (например, «Mike Baker»), то иногда может получиться, что vite не смог успешно выполниться. В таких случаях используйте команду:

$ create-vite-app <project-name>

# Объяснение различий сборок

В папке dist/ npm-пакета (opens new window) можно обнаружить несколько различных сборок Vue.js. Рассмотрим подробнее какой файл из dist для каких случаев должен использоваться.

# Из CDN или без системы сборки

# vue(.runtime).global(.prod).js:

• Для использования напрямую, через <script src="..."> в браузере, предоставляет глобальный доступ к Vue.
• Компиляция шаблонов в браузере:
  • vue.global.js — «полная» сборка, которая включает в себя и компилятор шаблонов и runtime, поэтому поддерживает компиляцию шаблонов «на лету».
  • vue.runtime.global.js — содержит только runtime и требует чтобы шаблоны были предварительно скомпилированы на этапе сборки.
• Содержит в себе все внутренние зависимости Vue — т.е. это один файл без зависимостей от других файлов. Это означает, что необходимо импортировать всё из этого файла и этот файл только для того, чтобы убедиться в получении того же самого экземпляра кода.
• Содержит подготовленные варианты для production/разработки, кроме того сборка для production предварительно минифицирована. Используйте в production файлы *.prod.js.

# vue(.runtime).esm-browser(.prod).js:

• Для использования в нативных импортах ES-модулей (в браузере через <script type="module">).
• Предоставляет ту же компиляцию в runtime, содержит все внутренние зависимости и жёстко заданное поведение для production/разработки глобальной сборки.

# С использованием системы сборки

# vue(.runtime).esm-bundler.js:

• Для использования с системами сборки, такими как webpack, rollup и parcel.
• Определение поведения для production/разработки условиями с process.env.NODE_ENV (значение будет подменяться системой сборки)
• Нет готовых минифицированных сборок (минификация должна выполняться системой сборки, как и для всего остального кода)
• Импорт зависимостей (например, @vue/runtime-core, @vue/runtime-compiler)
  • Импортируемые зависимости также являются esm-сборками и, в свою очередь, будут импортировать свои зависимости (например, @vue/runtime-core импортирует @vue/reactivity)
  • Это означает, что можно устанавливать/импортировать зависимости по-отдельности и не оказаться в ситуации с разными экземплярами этих зависимостей, но всё равно следует убедиться, что все они разрешаются одной и той же версией.
• Компиляция шаблонов в браузере:
  • vue.runtime.esm-bundler.js (по умолчанию) — содержит только runtime и требует чтобы все шаблоны были предварительно скомпилированы. По умолчанию это точка входа для систем сборки (через поле module в package.json), потому что обычно при их применении шаблоны компилируются на этапе сборки (например, в файлах *.vue).
  • vue.esm-bundler.js — содержит компилятор шаблонов. Следует использовать когда есть система сборки, но всё равно нужна компиляция шаблонов «на лету» (например, шаблоны в DOM или в виде инлайн-строк JavaScript). Потребуется настроить систему сборки, чтобы псевдоним vue вёл к этому файлу.

# Для отрисовки на стороне сервера (SSR)

# vue.cjs(.prod).js:

• Для использования отрисовки на стороне сервера в Node.js через require().
• При сборке приложения с помощью webpack с опцией target: 'node' и корректной экстернализацией vue — это та сборка, которая будет загружена.
• Есть предварительно собранные файлы для разработки/production, но соответствующий файл будет автоматически выбираться на основе значения process.env.NODE_ENV.

# Runtime + Компилятор vs. Runtime-only

При необходимости компилировать шаблоны на клиенте (например, если передаёте строку в опцию template или монтируетесь к элементу DOM, используя его HTML в качестве шаблона) потребуется компилятор шаблонов, а с ним и подключение полной сборки:

// нужен компилятор шаблонов
Vue.createApp({
  template: '<div>{{ hi }}</div>'
})

// можно обойтись без него
Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  }
})

При использовании vue-loader шаблоны внутри файлов *.vue будут предварительно компилироваться в JavaScript на этапе сборки. Поэтому в итоговой сборке компилятор шаблонов уже не будет нужен и можно использовать более лёгкую runtime-only сборку.

Перед вами — вторая часть серии материалов, которая посвящена созданию веб-приложения Budget Manager с использованием Node.js, Vue.js и MongoDB. В первой части мы занимались сервером, а именно — подготовили основные методы RESTful API и наладили JWT-аутентификацию. Сегодня приступим к работе над клиентской частью приложения, создадим каркас фронтенда, средства для регистрации в системе и входа в неё, поговорим о маршрутах и об их защите.

Установка Vue.js и использование vue-cli

Установить Vue.js довольно просто. Мы планируем использовать vue-cli с шаблоном webpack. Обратившись к руководству по Vue, можно выяснить, что для установки vue-cli и подготовки рабочей среды используются такие команды:

# установка vue-cli
$ npm install --global vue-cli
# создание нового проекта с использованием шаблона "webpack"
$ vue init webpack my-project
# установка зависимостей
$ cd my-project
$ npm install
$ npm run dev

Продолжим работу над проектом, создав папку application в его корневой директории. Этот шаг можно и пропустить, создав папку в процессе работы с vue-cli. Если вы решите не создавать папку, тогда вам нужно дать проекту имя, выполнив команду такого вида:

vue init webpack name-of-your-project

Вот как выглядит проект после создания папки application:

Теперь перейдём в только что созданную папку с помощью интерпретатора командной строки, и, если vue-cli ещё не установлен, выполним следующую команду:

npm i --g vue-cli

Эта команда позволяет установить vue-cli глобально, поэтому неважно, в какой именно папке мы будем находиться, выполнив её.

Теперь вызовем следующую команду:

vue init webpack

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

После выполнения вышеприведённой команды и загрузки шаблона вам будет задан ряд вопросов:

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

Далее, всё ещё оставаясь в папке application, устанавливаем зависимости и запускаем проект.

npm i
npm run dev

Теперь можно полюбоваться на стандартную страницу Vue.

Очистка приложения Vue

Уберём из приложения некоторые ненужные нам стандартные элементы. Для этого надо перейти в папку application/src/assets и удалить logo.png, так как этим файлом мы пользоваться не будем. Далее, откроем файл корневого компонента App.vue из папки application/src и приведём его к виду, представленному следующим фрагментом кода:

<template>
  <div id="app">
    <v-container>
      <router-view/>
    </v-container>
  </div>
</template>
<script>
  export default {
    name: 'app'
  }
</script>

Теперь надо очистить маршруты. Для этого откроем файл index.js в папке router и приведём его к такому виду:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  routes: [
    {}
  ]
})

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

Теперь, на последнем этапе очистки стандартного приложения, удалим файл HelloWorld.vue из папки components.

Установка зависимостей

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

npm i --save axios vuetify vue-cookie

Теперь установим зависимости разработки:

npm i --save-dev sass-loader node-sass

Мы будем использовать axios для обработки HTTP-запросов. В vuetify нас интересуют визуальные компоненты и возможность пользоваться компоновкой элементов на основе сетки. Библиотеку vue-cookie будем применять для работы с куки-файлами. Пакеты sass-loader и node-sass позволят нам пользоваться SCSS.

Начало работы над фронтендом приложения

Теперь, когда все подготовительные мероприятия завершены, займёмся разработкой. Перейдём к папке components и создадим в ней папку pages, в которой создадим папку Authentication. В этой папке надо создать файл Authentication.vue, представляющий компонент, которым будем пользоваться для аутентификации. Вот что должно в итоге получиться:

В файле Authentication.vue разместим следующий код:

<template>
  <h1>Auth!</h1>
</template>
<script>
  export default {}
</script>

Расширением этого компонента займёмся позже, а пока перейдём в папку router и поработаем с маршрутами.

Для начала импортируем компонент Authentication и настроим маршрут для его использования:

import Vue from 'vue'
import Router from 'vue-router'
// Pages
import Authentication from '@/components/pages/Authentication/Authentication'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/login',
      name: 'Authentication',
      component: Authentication
    }
  ]
})

После этого, если перейти по адресу http://localhost:8080/#/login, можно увидеть пустую страницу с надписью «Auth!». Это говорит о том, что маршрут аутентификации работает.
Теперь откроем файл main.js из папки src и импортируем vuetify и vue-cookie:

import VueCookie from 'vue-cookie'
import Vuetify from 'vuetify'
import('../node_modules/vuetify/dist/vuetify.min.css')
Vue.use(VueCookie)
Vue.use(Vuetify)
Vue.config.productionTip = false

Перейдём к компоненту App.vue из папки src и займёмся стилями. Сначала нужно подготовить тег style. Разместим его сразу после закрытия тега script:

<style lang="scss">
</style>

Теперь переходим в папку src/assets и создаём в ней файл styles.scss и папку partials. В этой папке создадим два частичных шаблона, представленных файлами _variables.scss и _animations.scss. В результате должна получиться такая структура:

В файле _variables.scss зададим такие параметры:

// Colors
$background-tint: #1734C1;
$background-color: rgba(0, 0, 0, .5);

В файл _animations.css добавим описания анимаций bounceIn и slideInFromLeft:

@keyframes bounceIn {
  to {
      animation-timing-function: cubic-bezier(.215, .61, .355, 1)
  }
  0% {
      opacity: 0;
      transform: scale3d(.3, .3, .3)
  }
  20% {
      transform: scale3d(1.1, 1.1, 1.1)
  }
  40% {
      transform: scale3d(.9, .9, .9)
  }
  60% {
      opacity: 1;
      transform: scale3d(1.03, 1.03, 1.03)
  }
  80% {
      transform: scale3d(.97, .97, .97)
  }
  to {
      opacity: 1;
      transform: scaleX(1)
  }
}
@keyframes slideInFromLeft {
  from {
    transform: translateX(-2500px);
    opacity: 0
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  70% {
    transform: translateX(-20px);
  }
  90% {
    transform: translateX(10px);
  }
  to {
    transform: translateX(0);
  }
}

Импортируем частичные шаблоны в styles.scss:

@import "./partials/variables";
@import "./partials/animations";

Теперь, в папке assets, создадим папку images. Сюда можно поместить любое изображение, которое будет использоваться в качестве фона. Здесь, в репозитории, можно найти изображение, которое применяется в этом материале.

Настроим внешний вид приложения, приведя к следующему виду блок стилизации в файле App.vue:

<style lang="scss">
  @import "./assets/styles";
  body {
    background: url('./assets/images/background.jpg') no-repeat center center fixed;
    &:after {
      content: '';
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: $background-tint;
      opacity: .3;
      z-index: -1;
    }
  }
</style>

Тут мы импортируем ранее подготовленные стили scss и задаём использование фиксированного фонового изображения для приложения. Мы стремимся к тому, чтобы на любом устройстве экран приложения выглядел примерно одинаково.

В псевдоэлементе body :after мы задаём параметр background-color, записывая в него значение переменной $background-tint. Это позволит применить к фоновому изображению пурпурный цветной фильтр. Вот как выглядят разные варианты фонового изображения.

Обратите внимание на то, что всё, что касается стилизации и работы с фоном, на функционал приложения не влияет, поэтому вы вполне можете пропустить эти шаги или украсить приложение так, как вам захочется.

Масштабирование области просмотра и загрузка иконок

Благодаря этому шагу мы обеспечим правильное отображение приложения на мобильных устройствах. Кроме того, на данном этапе работы мы загрузим иконки в стиле Material Design. Для того, чтобы всё это сделать, перейдём к файлу index.html, который расположен в папке application и добавим следующее в тег head:

<meta name="viewport" content="initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">

Разработка компонента Authentication

Теперь, когда мы немного украсили приложение, избавившись, по крайней мере, от скучных белых страниц, продолжим работу над компонентом Authentication. Создадим в папке Authentication файл index.js.

Импортируем в него то, что нам понадобится и объявим константу, в которую запишем путь к API:

import Axios from 'axios'
import router from '@/router'
const BudgetManagerAPI = `http://${window.location.hostname}:3001`

Теперь создадим объект Authentication, который будет содержать нужные нам методы:

export default {
  user: { authenticated: false }
}

Мы начинаем работу над этим компонентом, объявляя объект с именем user, который хранит сведения о том, аутентифицирован ли пользователь.

Теперь напишем методы:

import Axios from 'axios'
import router from '@/router'

const BudgetManagerAPI = `http://${window.location.hostname}:3001`

export default {
  user: { authenticated: false },

  authenticate (context, credentials, redirect) {
    Axios.post(`${BudgetManagerAPI}/api/v1/auth`, credentials)
        .then(({data: {token}}) => {
          context.$cookie.set('token', token, '1D')
          context.validLogin = true
          this.user.authenticated = true

          if (redirect) router.push(redirect)
        }).catch(({response: {data}}) => {
          context.snackbar = true
          context.message = data.message
        })
  },

  signup (context, credentials, redirect) {
    Axios.post(`${BudgetManagerAPI}/api/v1/signup`, credentials)
        .then(({data: {token}}) => {
          context.$cookie.set('token', token, '1D')
          context.validSignUp = true
          this.user.authenticated = true
          
          if (redirect) router.push(redirect)
        }).catch(({response: {data}}) => {
          context.snackbar = true
          context.message = data.message
        })
  },

  checkAuthentication () {
    const token = document.cookie

    if (token) this.user.authenticated = true
    else this.user.authenticated = false
  },

  getAuthenticationHeader (context) {
    return `Bearer ${context.$cookie.get('token')}`
  }
}

В первом методе используются три аргумента:

• context: это — компонент Vue.
• credentials: тут будут имя пользователя (username) и пароль (password).
• redirect: здесь будет путь, по которому мы собираемся перенаправить пользователя.

Axios используется здесь для выполнения POST-запроса к API с передачей аргумента credentials. Затем мы деструктурируем ответ, data, так как нас здесь интересует лишь значение token, сохраняем это значение в куки-файле и задаём срок жизни этих данных, равный одному дню. Также мы устанавливаем в true переменную validLogin и значение authenticated объекта user, и, наконец, перенаправляем пользователя по пути из аргумента redirect.

В противном случае мы устанавливаем поле snackbar объекта context в true и записываем в message сообщение об ошибке.

Второй метод очень похож на первый, его мы используем для создания новой учётной записи. Разница между ним и первым методом заключается в конечной точке, с которой мы работаем.
Третий метод используется для проверки того, аутентифицирован пользователь или нет.
Последний метод позволяет возвратить заголовок Authorization.

Теперь продолжим работу над компонентом, открыв файл Authentication.vue. Тут мы будем пользоваться средствами Vuetify:

<template>
  <div class="l-auth-container">
    <div class="l-auth">
      <v-form v-model="validLogin">
        <v-text-field label="Username"
                      v-model="credentials.username"
                      prepend-icon="account_box"
                      :rules="rules"
                      required
                      color="light-blue lighten-1">
        </v-text-field>

        <v-text-field label="Password"
                      v-model="credentials.password"
                      prepend-icon="lock"
                      :rules="rules"
                      :append-icon="loginPasswordVisible ? 'visibility' : 'visibility_off'"
                      :append-icon-cb="() => (loginPasswordVisible = !loginPasswordVisible)"
                      :type="loginPasswordVisible ? 'text' : 'password'"
                      color="light-blue lighten-1"
                      required>
        </v-text-field>

        <v-btn flat color="light-blue lighten-1" @click.native="signUpVisible = true">Create account</v-btn>
        <v-btn color="light-blue lighten-1" @click.native="submitAuthentication()">Login</v-btn>
      </v-form>
    </div>

    <div class="l-signup" v-if="signUpVisible">
      <v-form v-model="validSignUp">
        <v-text-field label="Username"
                      v-model="newUser.username"
                      prepend-icon="account_box"
                      :rules="rules"
                      required
                      color="light-blue lighten-1">
        </v-text-field>

        <v-text-field label="Password"
                      v-model="newUser.password"
                      prepend-icon="lock"
                      :rules="rules"
                      :append-icon="signUpPasswordVisible ? 'visibility' : 'visibility_off'"
                      :append-icon-cb="() => (signUpPasswordVisible = !signUpPasswordVisible)"
                      :type="signUpPasswordVisible ? 'text' : 'password'"
                      color="light-blue lighten-1"
                      required>
        </v-text-field>

        <v-btn block color="light-blue lighten-1" @click.native="submitSignUp()">Sign Up</v-btn>
      </v-form>
    </div>

    <v-snackbar timeout="6000"
                bottom="bottom"
                color="red lighten-1"
                v-model="snackbar">
      {{ message }}
    </v-snackbar>
  </div>
</template>

Здесь имеется элемент div с классом l-auth-container, который выполняет роль контейнера. Следом идёт ещё один div с классом l-auth, который содержит структуру элементов для организации формы ввода, в частности, это элемент v-form, привязанный к данным переменной validLogin.

Внутри него находится пара подписанных полей ввода v-text-field, которые привязаны к данным из credentials (мы займёмся этими данными ниже). Поля снабжены иконками, взятыми из https://material.io/icons/, с ними также связаны правила по проверке ввода (и там и там — одни и те же правила, не будем усложнять проект), кроме того, оба эти поля являются обязательными.

Второе поле ввода предназначено для пароля, оно снабжено иконкой, которая указывает на то, может ли пользователь видеть вводимый пароль. У этой иконки есть коллбэк, являющийся стрелочной функцией, который позволяет переключать значение переменной loginPasswordVisible с true на false и наоборот. Если эта переменная установлена в true, то параметр type поля ввода устанавливается в text, иначе это password.

И, наконец, тут присутствуют описания кнопок, которые мы используем для создания новой учётной записи или для отправки формы с целью входа в систему.

Следующий фрагмент кода описывает структуру формы регистрации в системе, которая видна лишь в том случае, если переменная signUpVisible установлена в true. Устройство этой формы похоже на устройство формы входа в систему, тут изменены лишь несколько строк. В частности, здесь используется переменная signUpPasswordVisible вместо loginPasswordVisible и другой метод обработки щелчка по кнопке.

Далее, тут имеется панель v-snackbar, которая, в ходе аутентификации, используется для вывода сообщений.

Теперь, в том же файле Authentication.vue, опишем скрипт компонента:

<script>
  import Authentication from '@/components/pages/Authentication'
  export default {
    data () {
      return {
        snackbar: false,
        validLogin: false,
        validSignUp: false,
        signUpVisible: false,
        loginPasswordVisible: false,
        signUpPasswordVisible: false,
        rules: [ (value) => !!value || 'This field is required' ],
        credentials: {
          username: '',
          password: ''
        },
        newUser: {
          username: '',
          password: ''
        },
        message: ''
      }
    },
    methods: {
      submitAuthentication () {
        Authentication.authenticate(this, this.credentials, '/')
      },

      submitSignUp () {
        Authentication.signup(this, this.newUser, '/')
      }
    }
  }
</script>

Тут всё начинается с импорта файла index.js из папки Authentication, так как нам нужен метод authenticate, определённый внутри этого файла.

Взглянем теперь на переменные, хранящие данные компонента:

• snackbar: используется для панели сообщений.
• validLogin: используется для проверки формы входа в систему.
• validSignUp: используется для проверки формы регистрации.
• signUpVisible: используется для вывода формы регистрации (при установке в true).
• loginPasswordVisible: указывает на то, может ли пользователь видеть пароль, вводимый в форме входа в систему.
• signUpPasswordVisible: указывает на то, можно ли видеть пароль, вводимый в форме регистрации.
• rules: правила проверки данных, введённых в поля форм.
• credentials: объект, привязанный к полям ввода формы входа в систему, используемый для аутентификации пользователя.
• newUser: объект, привязанный к полям ввода формы регистрации в системе.
• message: используется для вывода сообщений в ходе аутентификации.

В этом компоненте есть пара методов. В методе submitAuthentication осуществляется вызов метода authenticate из файла Authentication, с передачей контекста, учётных данных и пути для перенаправления. Метод submitSignUp используется для вызова метода signup.

И, наконец, вот код стилизации компонента, который надо разместить в том же файле Authentication.vue (тут вы можете дать волю фантазии и сделать всё таким, как вам хочется):

<style lang="scss">
  @import "./../../../assets/styles";
.l-auth {
    background-color: $background-color;
    padding: 15px;
    margin: 45px auto;
    min-width: 272px;
    max-width: 320px;
    animation: bounceIn 1s forwards ease;
  }
.l-signup {
    background-color: $background-color;
    padding: 15px;
    margin: 45px auto;
    min-width: 272px;
    max-width: 320px;
    animation: slideInFromLeft 1s forwards ease;
  }
</style>

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

Разработка компонента Home

Перейдём в папку pages и создадим файл компонента Home.vue:

На данный момент в шаблоне этого компонента, код которого представлен ниже, будут лишь несколько текстовых сообщений:

<template>
  <div>
    <h3>Hi! this is our App's Home</h3>
    <ul>
      <li v-if="users != null" v-for="user in users">
        {{ user.username }}
      </li>
    </ul>
  </div>
</template>
<script>
  import Axios from 'axios'
  import Authentication from '@/components/pages/Authentication'
const BudgetManagerAPI = `http://${window.location.hostname}:3001`
export default {
    data () {
      return {
        users: []
      }
    },
    mounted () {
      this.getAllUsers()
    },
    methods: {
      getAllUsers (context) {
        Axios.get(`${BudgetManagerAPI}/api/v1/users`, {
          headers: {
            'Authorization': Authentication.getAuthenticationHeader(this)
          }
        }).then(({data}) => (this.users = data))
      }
    }
  }
</script>

Этот компонент является основой для домашней страницы, которой мы займёмся в следующей части этой серии. А пока выполним GET-запрос к API для получения всех зарегистрированных пользователей, используя отладочный метод API и передавая токен в заголовке запроса. Вот как это будет выглядеть:

Защита системы навигации

Откроем файл index.js из папки router. Вот к какому виду его нужно привести:

import Vue from 'vue'
import Router from 'vue-router'
import * as Auth from '@/components/pages/Authentication'
// Pages
import Home from '@/components/pages/Home'
import Authentication from '@/components/pages/Authentication/Authentication'
Vue.use(Router)
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        requiredAuth: true
      }
    },
    {
      path: '/login',
      name: 'Authentication',
      component: Authentication
    }
  ]
})
router.beforeEach((to, from, next) => {
  if (to.meta.requiredAuth) {
    if (Auth.default.user.authenticated) {
      next()
    } else {
      router.push('/login')
    }
  } else {
    next()
  }
})
export default router

Рассмотрим этот код.

import * as Auth from '@/components/pages/Authentication'

В этой строке мы импортируем файл Authentication, называя его Auth, так как компонент Authentication также был импортирован.

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        requiredAuth: true
      }
    },
    {
      path: '/login',
      name: 'Authentication',
      component: Authentication
    }
  ]
})

Тут мы даём имя объекту Router для того, чтобы позже создать защиту системы навигации. Также мы добавляем путь к компоненту Home. В параметре meta.requiredAuth будет записано true. Это означает, что если к этому компоненту попытается получить доступ неаутентифицированный пользователь, он будет перенаправлен на страницу входа в систему.

router.beforeEach((to, from, next) => {
  if (to.meta.requiredAuth) {
    if (Auth.default.user.authenticated) {
      next()
    } else {
      router.push('/login')
    }
  } else {
    next()
  }
})

Здесь мы защищаем систему навигации. А именно, регистрируем глобальный сторожевой хук, пользуясь которым перед переходом по каждому маршруту проверяем, установлен ли его параметр meta.requiredAuth в true. Если это так, мы проверяем объект пользователя из Authentication. Если пользователь не аутентифицирован, мы перенаправляем его на страницу входа в систему.

export default router

Этой командой экспортируем маршрутизатор.

Теперь откройте файл main.js в папке application. Тут мы собираемся импортировать файл Authentication и вызвать метод checkAuthentication:

import Vuetify from 'vuetify'
import Authentication from '@/components/pages/Authentication'
import('../node_modules/vuetify/dist/vuetify.min.css')
Vue.use(VueCookie)
Vue.use(Vuetify)
Vue.config.productionTip = false
Authentication.checkAuthentication()

Без этого, если пользователь перезагрузит страницу или закроет её, а потом снова откроет, он будет перенаправлен на страницу входа в систему.

Итоги

Сегодня мы рассказали о том, как создать приложение Vue.js, как разрабатывать компоненты Vue, рассмотрели выполнение HTTP-запросов и защиту маршрутов приложения. В следующей части займёмся доработкой компонента Home и продолжим развитие клиентской и серверной частей приложения.

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

От автора: существует много способов, с помощью которых производится установка Vue JS. Некоторые из них будут описаны ниже.

Использование тэга script прямо в HTML-файле

Перейдите на домашнюю страницу официального сайта VueJS //vuejs.org/v2/guide/installation.html и загрузите vue.js. Вы увидите две версии – производственную версию и версию для разработчиков. Версия для разработчиков не является минимизированной, в то время как производственная версия – минимизирована, как показано на следующем скриншоте. Версия для разработчиков предоставляет предупреждения и режим отладки во время разработки проекта.

Использование CDN

Мы можем также начать использовать файл VueJS из библиотеки CDN. по данной ссылке //unpkg.com/vue вы можете найти самую новую версию VueJS. VueJS доступен также на jsDelivr (//cdn.jsdelivr.net/npm/vue/dist/vue.js) и cdnjs (//cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js). При необходимости мы можем разместить файлы на сервере и начать работу с VueJS.

Использование NPM

Если вы имеете дело с крупномасштабными приложениями, то рекомендуется выполнять установку VueJS, используя npm-пакет. Он работает вместе с Browserify и Webpack, а также другими необходимыми инструментами, которые помогают в разработке. Ниже приведена команда установки с использованием npm.

Использование командной строки CLI

VueJS также представляет CLI для установки vue и начала работы с активацией сервера. Чтобы выполнить установку с использованием CLI, нам нужно будет установить CLI, это можно сделать при помощи следующей команды.

После этого мы можем увидеть версию CLI для VueJS. Установка может занять несколько минут.

Ниже приведена команда для создания проекта с использованием Webpack.

Чтобы приступить к работе, используйте следующую команду.

После выполнения npm run dev, запускается сервер и выдаётся url для отображения в браузере, как показано на следующем скриншоте.

Структура проекта с использованием CLI выглядит следующим образом:

Источник: //www.tutorialspoint.com/

Редакция: Команда webformyself.

Для установки JavaScript фреймворка Vue.js скачайте js-файл и подключите его тегом <script>. После этого будет зарегистрирована глобальная переменная Vue. Не используйте при разработке минифицированную версию, а только полную версию, так как предупреждения об ошибках не будут отображаться!

CDN

На CDN всегда доступна свежая версия Vue, загруженная в NPM. Исходный код NMP-пакета тоже доступен на CDN.
 

Для работы с JavaScript фреймворком Vue, удобной проверки и отладки приложений , также можно установить инструмент Vue Devtools прямо в браузер.

NPM

Рекомендуем использовать NMP при создании крупных приложений на Vue.  Его можно использовать в паре с инструментами сборки к Webpack и Browserify.

Инструменты командной строки (CLI)

Vue.js предоставляет интерпретатор командной строки (CLI) для быстрого создания каркаса одностраничных приложений. В нем есть шаблоны со всем необходимым для современной разработки.

Сборки Vue

В каталоге dist/ NPM пакета можно найти много разных сборок Vue.js.

• Полная — сборка содержит и компилятор, и runtime.
• Компилятор — код, отвечающий за компиляцию строковых шаблонов в JavaScript render-функции
• Runtime — код, отвечающий за создание экземпляров Vue, рендеринг и изменение виртуального DOM, и т.д. 
• UMD — UMD-сборки можно использовать в браузере, подключая тегом <script>
• CommonJS — сборки предназначены для использования вместе со старыми инструментами сборки: Browserify или Webpack 1.
• ES Module — сборки предназначены для использования с современными инструментами сборки: Webpack 2 или Rollup

Runtime + Компилятор vs. Runtime-only

Для компиляции шаблонов на клиенте потребуется компилятор. Например, передаавать в строку опцию template или добавить к элементу DOM, используя его HTML как шаблон.

// это требует компилятора
new Vue({
  template: '<div>{{ hi }}</div>'
})

// это нет
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

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

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

Webpack

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' для webpack 1
    }
  }
}

Rollup

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': 'vue/dist/vue.esm.js'
    })
  ]
})

Browserify

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

Режим разработки vs. режим production

В UMD-сборках определены неминифицированные файлы для разработки и минифицированные файлы для production.CommonJS и ES Module сборки предназначены для инструментов сборки, поэтому для них не предоставлены минифицированные версии. Эти сборки содержат проверки на process.env.NODE_ENV для определения режима, в котором они должны выполняться. Нужно использовать соответствующие конфигурации систем сборки для замены этих переменных окружения, для того чтобы контролировать режим запуска Vue. 

Webpack

Используйте DefinePlugin:

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

Rollup

Используйте rollup-plugin-replace:

const replace = require('rollup-plugin-replace')

rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)

Browserify

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

Сборка dev-версии

Файлы сборки в каталоге /dist на GitHub обновляются только при релизах. Чтобы использовать версию из новейшего кода с GitHub, нужно собрать проект:

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

Bower

Только UMD сборки доступны в Bower.

# последняя стабильная версия
$ bower install vue

17,529

In this tutorial, you’re going to learn how to get up and running with the Vue 3 project from scratch with step-by-step instructions.

1. Install Node.js & NPM package
2. Install Vue CLI 4.5 or higher
3. Create A Vue 3 Project
4. Run Vue 3 Web App

1. Install node.js & npm package

The first step is to install Node.js & NPM (Node Package Manager) to your computer.

You can check to see if they’re already installed by going to the Terminal/Command prompt window in your computer and running a couple of commands.

To check the installed version of node js,

node -v

If you already have it installed, make sure it’s version 10 or above. 

To check the npm, run the following command.

 npm -v

If they’re not installed you’ll get the “command not found” message or something similar when running node and npm version check commands.

In that case, you will need to install them.

So, head over to the Node.js Website in your browser – you can see two versions and I would recommend using LTS which is the more stable version and it also says recommended for most users.

Click the LTS button which then starts downloading the Node.js package file on the computer. 

Double click the package file to install it which will bring up the installer window. You can pretty much install like you would other applications.

As you can see from the introduction tab, I’m not only installing node.js but also npm – so we do not need to install them separately.

Hit Continue, Continue,

Then Agree and install, which will ask for the admin password. Once the password is entered, it’ll take a few seconds to complete the installation process.

The next step is to install Vue CLI.

2. Install Vue CLI

So, What’s Vue CLI?

Vue CLI is an official vue npm package that allows you to create a vue project quickly on your computer.

Let’s install it globally, so that you can create a vue project anywhere on the computer.

Open up the Terminal window and run the following command

npm install -g @vue/cli

It will take a few seconds to complete the installation process.

If it says that you do not have permission, just run the command again by adding sudo in front of it like so, which will ask you to enter your admin password and then you will be all set.

sudo npm install -g @vue/cli

In order to create a vue 3 project, we need a vue cli version of at least 4.5 or above.

If you’ve already installed vue cli, you can check the version using the following command.

vue --version

If you have a version lower than 4.5, you can simply upgrade it by running the command below.

npm upgrade --next

The next step is to create a vue 3 project.

3. Create A Vue 3 Project.

To do that, open up the terminal and go to the desktop by typing:

cd ~/Desktop

Then, type: 

vue create my-project-name

You will then be asked a question – which version of vue you want to use and you can pick vue 3 by moving the arrow key up and down on the keyboard and hit enter to make a selection.

This will start creating our vue 3 project with the project name as a folder name.

It will take a few seconds to create the vue 3 project and install its default dependencies.

Once it’s done, you can see the folder with the project name on your desktop.

The last step is to run the vue 3 project on the browser.

4. Run The Project

As you can see, my terminal window gives me two commands to run the project.

The first command is to go into the project folder:

CD my-project-name

To run the app, run the following command.

npm run dev

To be organized, I’m going to run the project from my Visual Studio Code editor instead of using the Terminal window.

Go to the Applications folder → Visual Studio Code

Then, File → Open → Then navigate to the project folder that we created on the desktop and hit open.

As you know, the Terminal window is integrated with Visual Studio, so I can simply open it by choosing the Terminal option from the menu bar at the top and then New Terminal which will open up a new window at the bottom of the editor.

As you can see, the terminal is already into the project so I do not have to use the first command which is

CD my-project-name

All I have to do is run the npm run serve command.

Which will start running the server on my computer and give me the localhost URL.

As you can see, I get two: one is localhost and the other one is the Network URL which is great when you want to see the project on multiple devices such as checking the project UI on your mobile phone.

Open up the browser and copy the Network URL and paste it there.

At this state, we are successfully up and running with our Vue 3 app. 🙂

Next → Ref vs Reactive Differences In #Vuejs 3 Composition API

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

Существует четыре основных способа добавления Vue.js в проект:

1. Импортируйте его как пакет CDN на страницу
2. Загрузите файлы JavaScript и разместите их самостоятельно
3. Установите его с помощью npm
4. Используйте официальный интерфейс командной строки для формирования проекта, который предоставляет настройки сборки с включенными батареями для современного рабочего процесса внешнего интерфейса (например, горячая перезагрузка, lint-on-save и многое другое)

Информация о выпуске

Latest version:

Подробные примечания к выпуску для каждой версии доступны на GitHub (открывается в новом окне) .

В настоящее время находится в стадии бета-версии-интеграция Vuex и Router все еще WIP

При использовании Vue мы также рекомендуем установить Vue Devtools (открывается в новом окне) в вашем браузере, что позволит вам проверять и отлаживать свои приложения Vue в более удобном интерфейсе.

Получите расширение для Chrome (открывается новое окно)

Получить аддон для Firefox (открывается новое окно)

Получите отдельное приложение Electron (откроется новое окно)

CDN

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

<script src="https://unpkg.com/vue@next"></script>

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

Скачать и самостоятельно разместить

Если вы не хотите использовать инструменты сборки, но не можете использовать CDN в производственной среде, вы можете загрузить соответствующий файл .js и разместить его на своем собственном веб-сервере. Затем вы можете включить его с помощью <script> , как и в случае с CDN.

Файлы можно просматривать и загружать с CDN, например unpkg (открывается в новом окне) или jsDelivr (открывается в новом окне) . Различные файлы будут объяснены позже, но, как правило, вам нужно загрузить как сборку для разработки, так и производственную сборку.

npm

npm — рекомендуемый метод установки при создании крупномасштабных приложений с помощью Vue. Он прекрасно сочетается с такими сборщиками модулей, как webpack (открывается в новом окне) или Rollup (открывается в новом окне) .

Vue также предоставляет сопутствующие инструменты для создания однофайловых компонентов (SFC). Если вы хотите использовать SFC, вам также необходимо установить @vue/compiler-sfc :

$ npm install -D @vue/compiler-sfc

Если вы переходите из Vue 2, обратите внимание, что @vue/compiler-sfc заменяет vue-template-compiler .

В дополнение к @vue/compiler-sfc вам также понадобится подходящий загрузчик SFC или плагин для выбранного вами сборщика. Дополнительную информацию см. В документации SFC .

В большинстве случаев предпочтительным способом создания webpack-сборки с минимальной конфигурацией является использование Vue CLI.

CLI

Vue предоставляет официальный интерфейс командной строки (открывается в новом окне) для быстрого создания амбициозных одностраничных приложений. Он предоставляет настройки сборки с включенными батареями для современного рабочего процесса. Подготовка к работе со сборками с горячей перезагрузкой, сохранением с сохранением и готовыми к работе сборками занимает всего несколько минут. Дополнительные сведения см. В документации Vue CLI (открывается в новом окне) .

Для Vue 3 вы должны использовать Vue CLI v4.5, доступный на npm как @vue/cli . Для обновления вам необходимо переустановить последнюю версию @vue/cli глобально:

yarn global add @vue/cli

npm install -g @vue/cli

Затем в проектах Vue выполните

Vite

Vite (открывается в новом окне) — это инструмент сборки веб-разработки, который позволяет молниеносно обслуживать код благодаря собственному подходу к импорту модуля ES.

Проекты Vue можно быстро настроить с помощью Vite,выполнив следующие команды в терминале.

With npm:

$ npm init vite@latest <project-name> --template vue


$ npm init vite@latest <project-name> -- --template vue

$ cd <project-name>
$ npm install
$ npm run dev

Или с пряжей:

$ yarn create vite <project-name> --template vue
$ cd <project-name>
$ yarn
$ yarn dev

Объяснение различных зданий

В каталоге dist/ пакета npm (открывается в новом окне) вы найдете множество различных сборок Vue.js. Вот обзор того, какой файл dist следует использовать в зависимости от варианта использования.

Из CDN или без бандлера

vue(.runtime).global(.prod).js:

• Для прямого использования через <script src="..."> в браузере предоставляет глобальный файл Vue.
• Компиляция шаблонов в браузере:
  • vue.global.js — это «полная» сборка, которая включает в себя как компилятор, так и среду выполнения, поэтому он поддерживает компиляцию шаблонов на лету.
  • vue.runtime.global.js содержит только среду выполнения и требует предварительной компиляции шаблонов на этапе сборки.
• Содержит все внутренние пакеты ядра Vue-т.е.это один файл,не имеющий зависимостей от других файлов.Это означает,что вы должны импортировать все из этого файла и только из этого файла,чтобы гарантировать,что вы получите один и тот же экземпляр кода.
• Содержит жестко запрограммированные ветки prod / dev, а сборка prod предварительно минифицирована. Используйте файлы *.prod.js для производства.

vue(.runtime).esm-browser(.prod).js:

• Для использования через импорт собственных модулей ES (в браузере через <script type="module"> ).
• Использует ту же компиляцию во время выполнения,инкрустацию зависимостей и жестко закодированное поведение prod/dev,что и глобальная сборка.

С бандлером

vue(.runtime).esm-bundler.js:

• Для использования с такими webpack , как webpack , rollup и parcel .
• Оставляет ветки prod / dev с process.env.NODE_ENV guards (необходимо заменить на Bundler)
• Не поставляет минифицированные сборки (это необходимо сделать вместе с остальным кодом после сборки)
• Импортирует зависимости (например, @vue/runtime-core , @vue/runtime-compiler )
  • Импортированные зависимости также являются сборками esm-bundler и в свою очередь импортируют свои зависимости (например,@vue/runtime-core импортирует @vue/reactivity).
  • Это означает, что вы можете установить / импортировать эти зависимости по отдельности, не создавая разных экземпляров этих зависимостей, но вы должны убедиться, что все они соответствуют одной и той же версии.
• Компиляция шаблонов в браузере:
  • vue.runtime.esm-bundler.js (по умолчанию) предназначен только для среды выполнения и требует предварительной компиляции всех шаблонов. Это запись по умолчанию для сборщиков (через поле модуля в package.json ), потому что при использовании сборщика шаблоны обычно предварительно компилируются (например, в файлах *.vue ).
  • vue.esm-bundler.js : включает компилятор среды выполнения. Используйте это, если вы используете сборщик, но все же хотите компиляцию шаблона времени выполнения (например, шаблоны в DOM или шаблоны через встроенные строки JavaScript). Вам нужно будет настроить свой сборщик на псевдоним vue для этого файла.

Для рендеринга на стороне сервера

vue.cjs(.prod).js:

• Для использования в рендеринге на стороне сервера Node.js через require() .
• Если вы связываете свое приложение с webpack с target: 'node' и правильно экстернализируете vue , это сборка, которая будет загружена.
• Файлы dev / prod созданы заранее, но соответствующий файл требуется автоматически на основе process.env.NODE_ENV .

Runtime+Compiler против Runtime-only

Если вам нужно компилировать шаблоны на клиенте (например,передавать строку в опцию шаблона или монтировать элемент,используя его in-DOM HTML в качестве шаблона),вам понадобится компилятор и,следовательно,полная сборка:

Vue.createApp({
  template: '<div>{{ hi }}</div>'
})


Vue.createApp({
  render() {
    return Vue.h('div', {}, this.hi)
  }
})

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