Много людей работают на Vue 2 и опасаются по разным причинам переходить на Vue 3. Многие думают попробовать Vue впервые, и не знают с какой версии начать. В этой статье мы попробуем рассказать как просто начать работать с VueJS 3 и Composition API.
Еще один вопрос , который часто вызывает беспокойство - стоит ли заодно начать использовать TypeScript? Или это усложнит задачу освоения Vue 3?
Но есть но - не все сопутствующие инструменты разработчика уже готовы, и не все сторонние библиотеки и плагины уже поддерживают Composition API и TypeScript.
Хорошо то, что Vue Devtools Plugin для Хрома для третьей версии Vue уже есть и вполне рабочий, хотя может быть команда Vue еще будет его допиливать.
Процесс установки Vue 3 и TypeScript
Далее переходим в каталог проекта, и запускаем npm run serve (встроеный Dev сервер).
В браузере по адресу - мы увидим пустой проект с логотипом Vue, это то, что нам и нужно.
Встроенный Dev сервер Vue очень удобен для работы, так как все изменения в вашем коде он отображает на лету. А вот при публикации, мы будем копировать наши готовые скрипты уже на реальный сервер, ну это уже другая статья.
Если у вас новый проект, начинаем с нуля. А если у вас уже есть проект написанный на Vue2 - копируете компоненты в проект, может кое-где и кое- что надо будет поменять, но ваш проект написанный на чистом JS и на Vue 2 должен заработать и в данной конфигурации. Вы можете не менять старые компоненты, использующие Options API, они будут работать. Новые уже начинайте писать на Vue 3 и TypeScript.
Если же вы начинаете Vue с нуля, то лучше даже и не писать на старом Options API, хотя знать его нужно, если хотите читать старый код.
Лучший источник информации https://v3.vuejs.org/guide/introduction.html. Vue славится своей понятной и ясной документацией, и затруднений быть не должно. Там же кстати есть и Гайд по миграции с версии 2 на 3.
Важная концепция - ref и reactive - описана в статье Vue 3 Composition API: Ref или Reactive. И есть еще масса статей. Это основа реактивности Vue, и то что делает его крутым.
Для изучения рекомендую сайт - https://vueuse.org изучая примеры с него можно многому научиться, тем более, что там уже много кода на ТС.
Недавно появился новый синтаксический сахар - <script setup>. Он уменьшает boilerplate, т.е. приходится писать меньше конструкций. Но новичкам, лучше пока не усложнять себе понимание и его не использовать, на мой взгляд. Я по крайней мере не спешу, мне без него кажется наглядней, да и там возникают свои сложности. В будущем можно и перейти.
vue.config.js
Раздел devServer/proxy как раз и нужен, чтобы описать куда обращаться за данными с бэкенда.
Таким образом мы видим веб страницу по адресу Dev сервера, а запросы шлем через прокси на сервер бэкенда.
.eslintrc.js
Тут обратите внимание на правило - vue3-essential, eslint:recommended, typescript/recommended.
Теперь после того, как вы сохраняете файл, форматирование произойдет автоматически. А если все написано правильно ваше IDE порадует вас зеленой птичкой, означающей, что в файле нет ошибок.
Лично я стараюсь не отходить от рекомендованных настроек, и как можно меньше делать исключений, которые можно создавать и в этих файлах, и в файлах с кодом. Если разработчики Vue и TS рекомендуют, я им верю.
Теперь ваше IDE будет вам помогать писать на TypeScript.
Некоторые индивидуальные предпочтения можно записать в конфигурации prettier:
.prettierrc
Мне удобней так, а вы решайте сами. Но главное, чтобы вся команда придерживалась одинаковых настроек.
Что же касается удобного отображения состояния в Vue Devtools Plugin, то конечно мы лишаемся некоторого удобства в плане работы с actions, но видеть состояние мы можем в информации о компоненте. Так что мы ни чего не теряем, ведь actions у нас и не будет.
<script lang=“ts">
Дальше просто, пишете как обычно, на ECMAScript 2015+. Наш линтер и преттиер будут иногда сообщать об ошибках. Внимательно их читаем, потом читаем документацию ТС или советы со StackOverflow и модифицируем код, чтобы ошибок не было.
И еще, вам часто будут советовать поставить тип any. Никогда этого не делайте. Во первых применяя any, вы расписываетесь в собственной слабости, а во вторых теряете преимущества, которые дает ТС. По моему опыту довольно большого проекта, ни разу не пришлось использовать any, всегда находилось решение.
Иногда линтер и преттиер не ругаются, а браузер и Дев сервер могут ругаться , такие ошибки тоже внимательно изучаем. Это другой тип ошибок - ошибки компиляции ли транспиляции, не знаю точно. Постепенно вы поймете как их избегать.
А если вам нужно использовать код написанный на JS? Не проблема, используйте. Для этого в файле tsconfig.json надо указать "allowJs": true.
Если в компоненте интенсивно используется библиотека на JS, то в крайнем случае можно и сам компонент оставить на JS. Такой компонент будет без проблем работать в проекте, наряду с компонентами на TS.
Постепенно у вас появится набор своих, сложных типов, и вы их сможете собрать в отдельные файлы и каталоги. Обычно использование типа не сложно.
Объявляем:
export interface MyComplexType {
typeKey1: number
typeKey2: string
}
И применяем:
const myFunction = (arg: MyComplexType) => { …. }
но в случае со свойствами компонента, нужна будет такая конструкция
props: {
myComplexData: {
type: Object as PropType<MyComplexType>,
required: true
}
},
конечно вверху надо будет включить PropType:
import { defineComponent, PropType} from 'vue'
Еще очень важно понимать, что ТС не работает в runtime. Поэтому проверка типа несколько усложняется:
Например:
export const phonesRule = (phoneList: Array<string> | unknown): boolean => {
if (!Array.isArray(phoneList)) return false
const goodList = phoneList.filter(item => checkPhone(item))
return goodList.length === phoneList.length
}
if (estate && typeof estate=== 'object') {
const estateType = (estate as Estate).type
if (estateType === 0) return false
}
return true
}
Еще важный аспект - можно находить уже готовые типы.
Например код метода:
const fileChanged = (e) => { ... }
вызовет ошибку, так как тип события e не определен. Вам надо либо самому создать такой тип, либо найти уже описанный. В моем случае, мне подошел тип EventData из используемой мной библиотеки xstate:
import { EventData } from 'xstate'
и
const fileChanged = (e: EventData) => { ... }
начал работать без ошибки.
Еще очень важная концепция - enum. Советую разобраться и применять.
В целом нужно не бояться ТС, вполне по силам любому разобраться. Но это интересно и полезно. Конечно все что тут изложено касательно TS изложено новичком в TypeScript, в прошлом году я его еще не знал, так что за неточности прошу прощения;
package.jsonnpm list
В целом мне хватает таких сторонних библиотек: axios, vue-i18n, vuelidate и xstate.
Ну с axios все понятно, обращение к серверу. Библиотека старая и проверенная, может и не на TS, но это не мешает ее использовать в проекте на TypeScript.
vue-i18n - это библиотека для локализации, а так как мы не в Англии, нам без нее никуда - https://github.com/intlify/vue-i18n-next
vuelidate - библиотека для валидация форм, навороченная, и концептуально правильно спроектированная - https://github.com/vuelidate/vuelidate
xstate - библиотека для работы с конечными автоматами. Если вы разберетесь как с ней работать, вы серьезно упростите свою работу - https://xstate.js.org. У меня есть статья на эту тему - Используем XSTATE для VueJS.
Все эти три библиотеки - vue-i18n, vuelidate и xstate поддерживают Composition API, и TypeScript. Их постоянно обновляют и дополняют. Их всех я очень активно использую, и могу заверить, что глюков в них почти нет, работают они надежно и сюрпризов не подкидывают.
А что касается CSS библиотек, то не могу их рекомендовать, так как обхожусь без них. Надеюсь найдется автор, который сможет сделать по ним статью.
На этом я закругляюсь, надеюсь, что эта информация поможет кому-нибудь.
habr.com
Еще один вопрос , который часто вызывает беспокойство - стоит ли заодно начать использовать TypeScript? Или это усложнит задачу освоения Vue 3?
А почему Vue?
Для тех опытных программистов, которые только хотят заняться фронтендом, для новичков, для опытных фронтэндеров из других фреймворков это главный вопрос. На этот вопрос отвечает ключевое слово - реактивность. Реактивность - это глоток свежего воздуха, революционная концепция сделавшая работу веб разработчика по настоящему удобной. А Vue - реактивный фреймворк. Но почему именно Vue, ведь есть еще Angular и React? А потому, что Vue вышел последним, с учетом все ошибок и достижений Ангулара и Реакта. Понятно, что если вы идете в проект уже написанный, например, на Реакте, то вам нужен Реакт. В случае же если вы начинаете новый проект лучшим выбором является Vue. Он шустрый, он оптимально написан, он легко изучается, он гармоничен наконец. Раньше, до версии Vue 3, Реакт мог бы поспорить с Vue в плане технологичности, но с выходом Composition API и новой концепции реактивности во Vue 3 это перестало иметь место.Готов ли Vue 3 для использования в работающих проектах?
Ответ - да. Не обязательно ждать официального объявления о выходе окончательного релиза. Текущая, на момент написания, версия 3.1.5, ведет себя стабильно и отлично работает у многих людей в уже запущенных проектах.Но есть но - не все сопутствующие инструменты разработчика уже готовы, и не все сторонние библиотеки и плагины уже поддерживают Composition API и TypeScript.
Хорошо то, что Vue Devtools Plugin для Хрома для третьей версии Vue уже есть и вполне рабочий, хотя может быть команда Vue еще будет его допиливать.
Нужен ли TypeScript?
Ответ - да. Как реактивность когда-то стала лучшим помощником веб разработчика, так и TS стал лучшим (конечно есть альтернативы) помощником программиста на JavaScript. TypeScript делает ваш код более стабильным, предсказуемым и качественным. Некоторые даже утверждают, что использование TypeScript позволяет сократить количество тестов, или даже делает их не нужными. Да, чтобы перейти на TypeScript, надо будет затратить определенные усилия, но это окупится. Некоторые утверждают, что применение TypeScript залог здорового и спокойного сна. Я с этим согласен.Как начать?
Замечательный инструмент Vue CLI решает все проблемы.Процесс установки Vue 3 и TypeScript
Далее переходим в каталог проекта, и запускаем npm run serve (встроеный Dev сервер).
В браузере по адресу - мы увидим пустой проект с логотипом Vue, это то, что нам и нужно.
Встроенный Dev сервер Vue очень удобен для работы, так как все изменения в вашем коде он отображает на лету. А вот при публикации, мы будем копировать наши готовые скрипты уже на реальный сервер, ну это уже другая статья.
Если у вас новый проект, начинаем с нуля. А если у вас уже есть проект написанный на Vue2 - копируете компоненты в проект, может кое-где и кое- что надо будет поменять, но ваш проект написанный на чистом JS и на Vue 2 должен заработать и в данной конфигурации. Вы можете не менять старые компоненты, использующие Options API, они будут работать. Новые уже начинайте писать на Vue 3 и TypeScript.
Переход на Composition API
Это все очень просто, и на этот счет масса статей. Важно понять, что Composition API позволяет вывести часть логики в отдельные модули. Компоненты у вас не будут раздуваться, и легче будет следовать принципу - один компонент - одна функциональная обязанность. Код станет суше. А переход не сложен.Если же вы начинаете Vue с нуля, то лучше даже и не писать на старом Options API, хотя знать его нужно, если хотите читать старый код.
Лучший источник информации https://v3.vuejs.org/guide/introduction.html. Vue славится своей понятной и ясной документацией, и затруднений быть не должно. Там же кстати есть и Гайд по миграции с версии 2 на 3.
Важная концепция - ref и reactive - описана в статье Vue 3 Composition API: Ref или Reactive. И есть еще масса статей. Это основа реактивности Vue, и то что делает его крутым.
Для изучения рекомендую сайт - https://vueuse.org изучая примеры с него можно многому научиться, тем более, что там уже много кода на ТС.
Недавно появился новый синтаксический сахар - <script setup>. Он уменьшает boilerplate, т.е. приходится писать меньше конструкций. Но новичкам, лучше пока не усложнять себе понимание и его не использовать, на мой взгляд. Я по крайней мере не спешу, мне без него кажется наглядней, да и там возникают свои сложности. В будущем можно и перейти.
А как же быть с запросами к бэкенду?
Это не сложно, если у вас уже есть запущенный сервер с бэкендом. Помните мы указывали, что будем хранить конфигурации в отдельных файлах (In dedicated config files). Вот такой отдельный файл - vue.config.jsvue.config.js
Раздел devServer/proxy как раз и нужен, чтобы описать куда обращаться за данными с бэкенда.
Таким образом мы видим веб страницу по адресу Dev сервера, а запросы шлем через прокси на сервер бэкенда.
Форматирование с поддержкой TS
Vue CLI уже создал для нас два файла:.eslintrc.js
Тут обратите внимание на правило - vue3-essential, eslint:recommended, typescript/recommended.
Теперь после того, как вы сохраняете файл, форматирование произойдет автоматически. А если все написано правильно ваше IDE порадует вас зеленой птичкой, означающей, что в файле нет ошибок.
Лично я стараюсь не отходить от рекомендованных настроек, и как можно меньше делать исключений, которые можно создавать и в этих файлах, и в файлах с кодом. Если разработчики Vue и TS рекомендуют, я им верю.
Теперь ваше IDE будет вам помогать писать на TypeScript.
Некоторые индивидуальные предпочтения можно записать в конфигурации prettier:
.prettierrc
Мне удобней так, а вы решайте сами. Но главное, чтобы вся команда придерживалась одинаковых настроек.
А как же VUEX
А что касается Vuex, то он не нужен. Создаете свои модули, включаете их в нужные компоненты, как описано моей статье VueJS 3: Глобальное состояние с помощью Composition API. В этой статье я еще осторожно писал, что подход без Vuex возможен, сейчас я уже точно могу сказать, что он вполне проверен на практике и гораздо удобнее. Любые данные состояния приложения отлично хранятся в модулях.Что же касается удобного отображения состояния в Vue Devtools Plugin, то конечно мы лишаемся некоторого удобства в плане работы с actions, но видеть состояние мы можем в информации о компоненте. Так что мы ни чего не теряем, ведь actions у нас и не будет.
TypeScript - это не страшно
Чтобы начать писать на ТС достаточно в тег скрипт компонентов включить lang=“ts”, вот так:<script lang=“ts">
Дальше просто, пишете как обычно, на ECMAScript 2015+. Наш линтер и преттиер будут иногда сообщать об ошибках. Внимательно их читаем, потом читаем документацию ТС или советы со StackOverflow и модифицируем код, чтобы ошибок не было.
И еще, вам часто будут советовать поставить тип any. Никогда этого не делайте. Во первых применяя any, вы расписываетесь в собственной слабости, а во вторых теряете преимущества, которые дает ТС. По моему опыту довольно большого проекта, ни разу не пришлось использовать any, всегда находилось решение.
Иногда линтер и преттиер не ругаются, а браузер и Дев сервер могут ругаться , такие ошибки тоже внимательно изучаем. Это другой тип ошибок - ошибки компиляции ли транспиляции, не знаю точно. Постепенно вы поймете как их избегать.
А если вам нужно использовать код написанный на JS? Не проблема, используйте. Для этого в файле tsconfig.json надо указать "allowJs": true.
Если в компоненте интенсивно используется библиотека на JS, то в крайнем случае можно и сам компонент оставить на JS. Такой компонент будет без проблем работать в проекте, наряду с компонентами на TS.
Постепенно у вас появится набор своих, сложных типов, и вы их сможете собрать в отдельные файлы и каталоги. Обычно использование типа не сложно.
Объявляем:
export interface MyComplexType {
typeKey1: number
typeKey2: string
}
И применяем:
const myFunction = (arg: MyComplexType) => { …. }
но в случае со свойствами компонента, нужна будет такая конструкция
props: {
myComplexData: {
type: Object as PropType<MyComplexType>,
required: true
}
},
конечно вверху надо будет включить PropType:
import { defineComponent, PropType} from 'vue'
Еще очень важно понимать, что ТС не работает в runtime. Поэтому проверка типа несколько усложняется:
Например:
export const phonesRule = (phoneList: Array<string> | unknown): boolean => {
if (!Array.isArray(phoneList)) return false
const goodList = phoneList.filter(item => checkPhone(item))
return goodList.length === phoneList.length
}
- мы не можем обратиться к аргументу функции без предварительной проверки, что он массив.
if (estate && typeof estate=== 'object') {
const estateType = (estate as Estate).type
if (estateType === 0) return false
}
return true
}
- мы обязаны проверить, что аргумент - объект, а еще стоит проверить есть ли нужный ключ у объекта, но тут мы точно знаем, что если он объект, то такой ключ будет.
Еще важный аспект - можно находить уже готовые типы.
Например код метода:
const fileChanged = (e) => { ... }
вызовет ошибку, так как тип события e не определен. Вам надо либо самому создать такой тип, либо найти уже описанный. В моем случае, мне подошел тип EventData из используемой мной библиотеки xstate:
import { EventData } from 'xstate'
и
const fileChanged = (e: EventData) => { ... }
начал работать без ошибки.
Еще очень важная концепция - enum. Советую разобраться и применять.
В целом нужно не бояться ТС, вполне по силам любому разобраться. Но это интересно и полезно. Конечно все что тут изложено касательно TS изложено новичком в TypeScript, в прошлом году я его еще не знал, так что за неточности прошу прощения;
Пример рабочего стека
Ниже я приведу набор плагинов / библиотек, которые поддерживают Composition API, TypeScript и которые работают с Vue последней версии и которых использую я:package.jsonnpm list
В целом мне хватает таких сторонних библиотек: axios, vue-i18n, vuelidate и xstate.
Ну с axios все понятно, обращение к серверу. Библиотека старая и проверенная, может и не на TS, но это не мешает ее использовать в проекте на TypeScript.
vue-i18n - это библиотека для локализации, а так как мы не в Англии, нам без нее никуда - https://github.com/intlify/vue-i18n-next
vuelidate - библиотека для валидация форм, навороченная, и концептуально правильно спроектированная - https://github.com/vuelidate/vuelidate
xstate - библиотека для работы с конечными автоматами. Если вы разберетесь как с ней работать, вы серьезно упростите свою работу - https://xstate.js.org. У меня есть статья на эту тему - Используем XSTATE для VueJS.
Все эти три библиотеки - vue-i18n, vuelidate и xstate поддерживают Composition API, и TypeScript. Их постоянно обновляют и дополняют. Их всех я очень активно использую, и могу заверить, что глюков в них почти нет, работают они надежно и сюрпризов не подкидывают.
А что касается CSS библиотек, то не могу их рекомендовать, так как обхожусь без них. Надеюсь найдется автор, который сможет сделать по ним статью.
На этом я закругляюсь, надеюсь, что эта информация поможет кому-нибудь.
Перейти на VueJS 3, Composition API и TypeScript?
Много людей работают на Vue 2 и опасаются по разным причинам переходить на Vue 3. Многие думают попробовать Vue впервые, и не знают с какой версии начать. В этой статье мы попробуем рассказать как...
habr.com