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 и шаблоны начальных приложений:

P.S.

И не забывайте, что если вам нравится Framework7, вы можете поддержать проект, сделав пожертвование или сделав взнос на Patreon: https://www.patreon.com/framework7