Автор оригинала: Fabio Pacific.
Что такое Vue.js?
Vue.js – это прогрессивный JavaScript Frontend Framework, написанная Evan You. Это один из самых мощных и простых для изучения Framework, и у него более 9,5 млн. Загрузки в месяц.
В сентябре 2020 года было выпущено Vue 3 Core. Новый выпуск Vue.js представляет некоторые крутые новые функции, но и некоторые изменения в нарушении.
Почему я должен мигрировать в Vue3?
Поскольку технологическая отрасль развивается, так что делают библиотеки, языки и рамки. При каждом выпуске ошибки фиксированы и введены новые функции. И часто с любым серьезным выпуском вашего рабочего процесса усиливается. Новые функции могут дать вам возможность делать то, что было утомительно раньше.
Vue 3 все еще относительно новое. Вам не нужно перенести все свои проекты, но с течением времени поддержка версии 2 может закончиться. Из-за этого хорошая идея узнать шаги, которые вам нужно принять, чтобы перенести свои проекты.
В этом руководстве я буду проходить вас через основные шаги, вам нужно будет следовать за миграцией. Мы возьмем простой проект и мигрируйте его в VUE 3.
Проект, который мы будем использовать, намеренно прост, и поэтому любой может следовать. Более сложный ваш проект, тем более тщательно вы захотите планировать миграцию.
вступление
Новая версия Vue.js приходит с несколькими разбитыми изменениями и новыми функциями. Кроме того, популярные библиотеки, такие как Vue Router, были обновлены для поддержки новой Vue-версии.
Если вы уже знаете Vue 2, основы довольно одинаковы. Но прежде чем вы сможете перенести проект в VUE 3, есть изменения, которые необходимо учитывать.
В зависимости от размера проекта, который вы хотите мигрировать, убедитесь, что все изменения, введенные в новом выпуске, чтобы ваше приложение все еще будет работать после миграции.
Для этого учебника я буду простым и показывать вам, как мигрировать проект Vue.js, который в настоящее время использует Vue 2 CDN.
Я беру проект из книги, которую я написал для FreeCodeCamp, которую вы можете найти здесь.
В этом проекте мы использовали Vue Router, поэтому мы также посмотрим на изменения Vue Router в этой статье.
Что вам нужно следовать вместе с этой статьей
Следует следовать вам понадобиться базовые знания Vue.js и vue роутера. Если у вас нет этого. Затем я предлагаю вам начать с проверки моей книги, доступной на FreeCodeCamp.
Вы также можете найти плейлист с полным 8-часовым курсом, доступным бесплатно на моем YouTube Channel Отказ
Что мы рассмотрим в этой статье
Этот учебник организован на три главных глава. Во-первых, мы посмотрим на изменения в Vue.js v3.x, а затем быстрый обзор Vue Router V4.x. И, наконец, мы начнем планировать миграцию реального проекта.
- Vue v3.x Обзор
- нарушение изменений
- Vue Router V4.x Обзор
- нарушение изменений
- Портфолио Проекта Миграция
- Клонировать репо
- Обновление скриптов CDN
- Обновить экземпляр Vue
- Обновить экземпляр VUE маршрутизатора
Вот видео версия этой статьи, если вы хотите следовать здесь:
Наблюдение за видео, поможет вам усилить ваше обучение при чтении шагов ниже. Здесь вы можете найти окончательный Репозиторий для проекта.
Vue v3.x Обзор
Vue 3 вводит несколько новых функций и кучу нарушения изменений. Давайте посмотрим, как эти изменения будут влиять на наше приложение и рассмотрит их перед миграцией.
Vue v3.x нарушение изменений
В Vue 3 разрыв изменения в основном падают на семь категорий:
- Global API (Отвечает за то, как Vue ведет себя) – очень вероятно, что вы хотите посмотреть на эти изменения.
- Директивы шаблонов (Изменения, сделанные на то, насколько V-директивами работают) – очень вероятно, что вы хотите посмотреть эти изменения.
- Компоненты (Изменения на то, как работает компоненты) – если ваше приложение использует компоненты, очень вероятно, что вы хотите посмотреть на эти изменения
- Функция визуализации (позволяет создавать элементы HTML программно)
- Пользовательские элементы (говорит Vue о создании пользовательских элементов HTML)
- Незначительные изменения (они могут не повлиять на вас, но вы все равно хотите посмотреть на них)
- Удалены API (вещи, которые больше не доступны в Vue 3)
Среди всех изменений есть некоторые из них, что любое приложение будет использовать, как глобальные API и компоненты. Таким образом, вам нужно будет принять их во внимание, если вы хотите начать использовать новый релиз Vue.
И стоит упомянуть следующие дополнительные изменения:
- То, как вы создаете приложения Vue и экземпляры компонентов, изменились (глобальные API)
- Вы всегда должны объявить опцию данных как функцию (незначительное изменение)
- Изменение приоритета при использовании V-IF и V-для на одном элементе (шаблон ddrectives)
- Вы должны объявить опцию излучения для составных событий (компоненты)
Для полного списка изменений вы можете отправиться на документация
Давайте посмотрим на некоторые из этих изменений более подробно сейчас.
Как создавать экземпляры приложений и компонентов в Vue 3
Vue 3, как вы создаете приложение, изменилось. Приложение Vue теперь использует новый .reateApp. () Способ создания экземпляров приложений.
Приложение Vue теперь считается корневым компонентом, поэтому вы определяете его параметры данных, также изменились.
Корневой элемент HTML не изменился, поэтому внутри файла index.html вы все равно посмотрите что-то подобное:
Внутри файла JavaScript есть важное изменение, которое нужно понять: вы больше не будете использовать Новый Vue () Чтобы создать новый экземпляр приложения, но вместо этого вы будете использовать новый метод под названием CreateApp () :
// Vue 3 syntax
const app = Vue.createApp({
// options object
})
app.mounth('#app') // Vue Instance - Root component
// Vue 2 syntax
const app = new Vue({
// options object
el: '#app'
})
Как определить компонент в Vue 3
Чтобы определить компонент в Vue 3, вы больше не используете Vue.component () Отказ Вместо этого вы сейчас используете корневой компонент приложения, например:
/* Vue 3 syntax */
const app = Vue.createApp({
// options here
})
app.component('componenet-name', {
// component code here
})
/* Vue 2 syntax*/
Vue.component('component-name', {
// component code here
})
Как использовать объект параметров данных в Vue 3
Учитывая, что основной экземпляр приложения теперь считается корневым компонентом, вы больше не можете указывать свойство данных в качестве объекта. Вместо этого вам необходимо определить его как функцию, которая возвращает, как вы обычно делаете в компонентах.
// Vue 3
const app = Vue.createApp({
// options object
data(){
return {
message: 'hi there'
}
}
})
app.mounth('#app') // Vue Instance - Root component
// Vue 2 syntax
const app = new Vue({
// options object
el: '#app'
data: {
message: 'hi there'
}
})
Изменение приоритета для V-IF/V-для Vue 3
В Vue 2, если вы использовали оба директива на одном и том же элементе, V-для Директивы будет иметь приоритет над V-если. Но в Vue 3 V-если всегда имеет приоритет.
Однако использование обеих директив не отличная идея. Обязательно посетите документацию здесь Узнать больше.
Как использовать свойство Emits на составных мероприятиях в Vue 3 (нарушение изменений/новой функции)
Похож на реквизит Собственность, теперь в Vue 3 есть также излучает Свойство, которое компонент может использовать для объявления событий, которые он может излучать на родительский компонент.
Я настоятельно рекомендую использовать это свойство, чтобы не удалось излучать события дважды в компонентах, которые необходимо повторно выделять местные события, такие как событие Click.
Вот пример от официальной документации:
{{ text }}
Свойство Emits также может принять объект.
Я не буду углучиться в это еще, но я буду решать каждую из функций/изменений в выделенной серии видео рано или поздно, я обещаю.
Vue Router V4.x Обзор
С новым выпуском Vue.js у нас также есть новая версия Vue Router. Новый выпуск V4.X имеет некоторые изменения, которые вам нужно будет рассмотреть, если вы хотите перенести проект на новый релиз Vue.
Vue Mar Router V4 Изменения
Особенно упомянуты два нарушения изменения, поскольку они находятся в основании приложения Vuue Router. Вам нужно будет знать о них, чтобы мигрировать ваше приложение позже.
- Экземпляр Vue маршрутизатора изменился
- Theres новый вариант истории
Полный список изменений доступен здесь Отказ
Давайте посмотрим на эти два изменения в глубине.
Экземпляр Vue Router 4 изменился
Чтобы создать новый экземпляр Vue Router, вы больше не используете конструктор функции Vueruter.
Вот Vuue Router V.3x документация Таким образом, вы можете сравнить.
Код изменения из этого:
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
routes // short for `routes: routes`
})
// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
router
}).$mount('#app')
К этому:
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = VueRouter.createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: VueRouter.createWebHashHistory(), // <-- this is a new property and it is mandatory!
routes, // short for `routes: routes`
})
// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)
app.mount('#app')
В вышеупомянутом коде для создания нового экземпляра Vue маршрутизатора теперь приходится использовать объект Vuerooter и вызовите Createrouter () метод.
Кроме того, недвижимость новой истории обязательна – История: vuerouter.createwebhashhistory () Отказ Вы должны определить его или получить ошибку консоли.
Далее вы создадите экземпляр VUE, используя CreateApp () метод и используйте переменную приложение позвонить в .использовать () метод. Вы передаете экземпляр маршрутизатора там, который вы создали на предыдущем шаге.
Наконец, вы можете установить элемент корня DOM в экземпляре приложения, используя app.mount ('# приложение') Отказ
Вы можете прочитать Vue Router V4.x Документация Больше подробностей.
Как мигрировать портфолио проекта от Vue 2 до Vue 3
Вы можете увидеть, как это сделать в видео на YouTube Если вы хотели бы следовать.
Учитывая все вышеперечисленное, и после тщательного обзора разбитых изменений, давайте постараемся обновить одну из наших проектов, мой Vuue курс. Я буду использовать портфель, последний проект курса.
Нам нужно:
- Клонировать репо
- Обновите скрипты CDN
- Обновите экземпляр VUE
- Обновите экземпляр Vue Router
Чтобы перенести наше приложение в VUE 3, мы обязательно должны обновлять следующее:
- Экземпляр приложения Vue
- Экземпляр Vue-маршрутизатора
- Ссылки CDN
Давайте сделаем это шаг за шагом.
Клонировать репозиторий проекта
Во-первых, убедитесь, что вы клонируете репо в текущей папке:
git clone https://bitbucket.org/fbhood/vue-folio/src/master/ vue-folio
Поскольку наш проект по-прежнему использует CDN, следующий шаг – обновить его ссылки.
Обновите CDN проекта
В нашем проекте мы используем как Vue CDN, так и Vue Router CDN, поэтому давайте обновим их оба.
Откройте файл index.html и замените это:
с этим:
Обновите код
Теперь, если вы откроете проект с помощью Live Server и откройте инспектор, вы заметите, что приложение не отображается, и в консоли есть два ошибки. Оба кажутся связанными с Vue Router:
You are running a development build of Vue.
Make sure to use the production build (*.prod.js) when deploying for production.
Uncaught TypeError: window.Vue.use is not a function
at vue-router.js:1832
at vue-router.js:9
at vue-router.js:10
Uncaught ReferenceError: VueRouter is not defined
at main.js:185
Vue роутер?! Почему?
Ну, помните, что когда Vue был переписан, его библиотеки должны были обновить свои кодовые базы тоже. Так что не забывайте эти изменения, связанные с Vue-маршрутизатором, так как наша приложение использует его.
Сначала обновим основной экземпляр VUE, чтобы использовать новый синтаксис. Тогда мы посмотрим, какие изменения нам нужно сделать так, чтобы работает Vue Router.
Обновите этот код в файле main.js из этого:
// create and mount the Vue instance
const app = new Vue({
router
}).$mount('#app')
к этому:
// create and mount the Vue instance
const app = Vue.createApp({
router
})
app.mount('#app')
Vue маршрутизатор 4 изменения
Выше мы увидели новый синтаксис для определения компонента экземпляра CORT VUE. Но теперь, поскольку мы используем маршрутизатор Vue, нам нужно учитывать его Пересматривать изменения тоже.
Путь Vue Mar Router создается изменилось
Это изменилось с этого:
// create the router instance
const router = new VueRouter({
routes
})
к этому:
// create the router instance
const router = VueRouter.createRouter({
// Provide the history implementation to use. We are using the hash history for simplicity here.
history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
})
Код выше сделки с двумя основными изменениями: Новый Vuerouter () был заменен Vuerouter.createrouter () и новый История Вариант теперь заменяет Режим .
Посетите Документация Для Vue маршрутизатора 4, чтобы узнать больше.
Наконец, давайте сделаем наше приложение, что мы используем Vue Router. Если мы введем экземпляр маршрутизатора в приложении VUE, теперь нам нужно проинструктировать его использовать Vue Router, используйте .использовать () Способ сделать это и пройти к нему экземпляр маршрутизатора.
Изменение из этого:
// create and mount the Vue instance
const app = Vue.createApp({
router
})
app.mount('#app')
к этому:
// create and mount the Vue instance
const app = Vue.createApp({})
app.use(router)
app.mount('#app')
И там у вас есть!
Заключение
Это на самом деле не имеет значения, насколько сложна ваше VUE-приложение – если вы хотите мигрировать в новый главный выпуск, вам все равно нужно будет планировать для него, прочитайте заметки выпуска и перейдите по всем изменениям, чтобы убедиться, что вы понимаете Что будет сломаться.
Чем более сложный приложение и более тщательно, что вы должны спланировать свою миграцию.
Для нашего простого приложения это все, что есть. Но это не всегда так. Так что будьте готовы и планируйте заранее.
Если вам понравилось это руководство, пожалуйста, поделитесь статьей и не забудьте подписаться на мой YouTube Channel Отказ Спасибо за прочтение!
Оригинал: “https://www.freecodecamp.org/news/migrate-from-vue2-to-vue3-with-example-project/”