Framework7 v3.0.0 был выпущен 5 июля 2018 года со всей новой документацией по v3.
Вы можете спросить себя, нужно ли мне обновляться? Ответ такой же, как в руководстве по миграции v2:
Если у вас есть полностью функциональное и выпущенное приложение, созданное с использованием v1 / v2, и вы не собираетесь внедрять там новые функции, и вы довольны его производительностью и функциональностью, вам, вероятно, не нужно менять свое приложение на v3. . Но если ваше приложение все еще находится в разработке или вы собираетесь выпускать обновления для своего существующего приложения, то v3 просто необходим. В нем гораздо больше функций, меньше ошибок, и, конечно же, это основная версия / ветка, которая будет поддерживаться в будущем (включая новые функции и исправления ошибок).
В этом руководстве мы проверим, что нужно изменить в вашем приложении Framework7 v2, чтобы переключить его на v3. Если вы обновляетесь с v1, то лучше сначала следовать Руководству по миграции v2.
Обновление базовой библиотеки Framework7
Если вы используете только ванильную версию JavaScript Framework7 (без Framework7-Vue / React), то вам почти ничего не нужно делать. API вообще не изменился. Единственное изменение - это новая структура файлов проекта: папки moredist
больше нет, а все ресурсы находятся в корневой папке проекта.
До:
framework7/ - dist/ - components/ - css/ - js/ - framework7.esm.bundle.js - framework7.esm.js - framework7.less
Теперь:
framework7/ - components/ - css/ - js/ - framework7.esm.bundle.js - framework7.esm.js - framework7.less
Итак, если вы включили Framework7 с помощью npm и получили что-то вроде:
import Framework7 from 'framework7/dist/framework7.esm.bundle.js'; import Searchbar from 'framework7/dist/components/searchbar/searchbar.js';
Вам просто нужно удалить папку dist/
из путей:
import Framework7 from 'framework7/framework7.esm.bundle.js'; import Searchbar from 'framework7/components/searchbar/searchbar.js';
Это все, что вам нужно беспокоиться о переносе основной библиотеки Framework7 с v2 на v3 🎉
Обновление Framework7-Vue
Ситуация здесь немного сложнее, но она не займет много времени: мы смогли перенести несколько клиентских больших приложений Framework7-Vue примерно за час.
Вы можете проверить эти коммиты того, как мы перенесли официальные шаблоны Framework7-Vue, чтобы увидеть полную картину обновления:
1. Установка плагина Framework7-Vue
В v2 для установки и инициализации Framework7 и Framework7-Vue мы делаем следующее:
import Vue from 'vue'; import Framework7Vue from 'framework7-vue'; import Framework7 from 'framework7'; /* or bundle versions (with all components): import Framework7Vue from 'framework7-vue/dist/framework7-vue.esm.bundle'; import Framework7 from 'framework7/dist/framework7.esm.bundle'; */ // Install F7-Vue plugin/router Vue.use(Framework7Vue, Framework7); // Init App new Vue({ el: '#app', // Init Framework7 by passing parameters here framework7: { // f7 params // ... } });
В v3 нам нужно сделать это так:
import Vue from 'vue'; import Framework7Vue from 'framework7-vue'; import Framework7 from 'framework7'; /* or bundle versions (with all components): import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle'; import Framework7 from 'framework7/framework7.esm.bundle'; */ // Different F7-Vue plugin initialization Framework7.use(Framework7Vue); // Init App new Vue({ el: '#app', // No more Framework7 init here });
2. Инициализация Framework7
В framework7
корневых свойствах Vue.js больше нет параметров Framework7. Теперь F7 init переходит к новому <f7-app>
компоненту в вашем основном шаблоне приложения:
App.vue:
<template> <!-- Framework7 params are now passed here --> <f7-app :params="f7params"> <f7-statusbar></f7-statusbar> <f7-view url="/" :main="true" class="ios-edges"></f7-view> </f7-app> </template> <script> import routes from './routes'; export default { data() { return { f7params: { theme: 'auto', routes, id: 'io.framework7.testapp', }, }; }, }; </script>
3. Метод onF7Ready
onF7Ready
Метод компонента Vue для выполнения кода API, связанного с F7, был удален в пользу метода прототипа new$f7ready
, который рекомендуется использовать в ловушке mounted
:
In v2:
// Vue Page Component export default { // ... onF7Ready(f7) { f7.dialog.alert('Component mounted'); } }
In v3:
// Vue Page Component export default { // ... mounted() { this.$f7ready((f7) => { f7.dialog.alert('Component mounted'); }) } }
И это в основном все основные изменения, о которых стоит беспокоиться при переносе вашего приложения Framework7-Vue с v2 на v3.
Обновление Framework7-React
Здесь будет еще сложнее, потому что библиотеки Framework7-React v2 не было. Таким образом, для обновления Framework-React v1 до v3 потребуется переписать большую часть существующего приложения Framework7-React v1. Для начала лучше следовать официальной документации Framework7-React.
Что следующее?
Это было базовое руководство по миграции вашего приложения, созданного с помощью Framework7 v2, на v3. Конечно, есть еще много новых функций, которые выходят за рамки этого руководства. В качестве следующих шагов настоятельно рекомендуется проверить все новые документы Framework7 v3 и шаблоны начальных приложений:
- Основная документация Framework7
- Документация Framework7-Vue
- Документация Framework7-React
- Шаблоны для начинающих Framework7
- Framework7 Forum - лучшее место для получения поддержки F7.
P.S.
И не забывайте, что если вам нравится Framework7, вы можете поддержать проект, сделав пожертвование или сделав взнос на Patreon: https://www.patreon.com/framework7