Framework7 v4: Быстрый старт(Core, Vue, React)

08.02.2019


Вышла новая, уже четвертая версия замечательного фреймворка для создания мобильных приложений в среде Apache Cordova. На самом деле применений этому фреймворку гораздо больше. Framework 7 можно использовать и для создания PWA приложений и для создания сайтов. Для более полной информации обратитесь к документации. В этой статье мы рассмотрим только быстрый старт.

Не важно, собираетесь лы вы работать на ванильном JavaScript, или использовать React, или Vue, самый быстрый и удобный способ начать работу с Framework7 это Framework7 Command-Line Interface (CLI).

Будем надеятся, что Node.JS у вас уже установлен, так как ставить бы будем с помощью менеджера пакетов NPM. Если же Node.JS не устатовлен, то сейчас самое время его установить

Все действия будут проделаны на ОС Windows, но и в Linux у вас проблем возникнуть не должно.

Устанавливаем глобально Framework7 Command-Line Interface (CLI):

npm install -g framework7-cli

Создаем каталог для экспериментов(я создал D:\f7-test)

Переходим в него, Запускаем командную строку или PowerShell

Создаем приложение командой:

framework7 create

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

Первый вопрос “Какой тип приложения мы будем создавать”. Для простоты выберем Simple web app:

PS D:\f7-test> framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? (Use arrow keys)
> Simple web app
  PWA (Progressive Web App)
  Cordova app (target native iOS and Android)
  Cordova + Simple web app
  Cordova + PWA (Progressive Web App)

Следующий вопрос - Название приложения, можно просто нажать [Enter] или ввести название:

PS D:\f7-test> framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Simple web app
? App (project) name: (My App)

Дальше наши пути немного расходятся, в зависимости от выбранной библиотеки, сначала мы выберем вариант Framework7 Core, затем Framework7 with Vue.js, а затем Framework7 with React.


Вариант Framework7 Core

Выбираем Framework7 Core:

PS D:\f7-test> framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Simple web app
? App (project) name: My App
? What type of framework do you prefer? (Use arrow keys)
> Framework7 Core
  Framework7 with Vue.js
  Framework7 with React

Выбираем Стартовый шаблон(я выбрал наиболее простой Single View):

PS D:\f7-test> framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Simple web app
? App (project) name: My App
? What type of framework do you prefer? Framework7 Core
? Choose starter template: (Use arrow keys)
> Single View
  Tabbed Views (Tabs)
  Split View (Split Panel)

Будем ли мы использовать bandler(я выбрал нет, но это зависит от ваших потребностей):

PS D:\f7-test> framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Simple web app
? App (project) name: My App
? What type of framework do you prefer? Framework7 Core
? Choose starter template: Single View
? Should we setup project with bundler? (Use arrow keys)
> No bundler
  Webpack (recommended)

И напоследок вопрос про цветовую схему:

PS D:\f7-test> framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Simple web app
? App (project) name: My App
? What type of framework do you prefer? Framework7 Core
? Choose starter template: Single View
? Should we setup project with bundler? No bundler
? Do you want to specify custom theme color? (Use arrow keys)
> No, use default color theme
  Yes, i want to specify my brand color

На этом создание проекта Framework7 Core закончено. Ниже представлен файл package.json:

{
  "name": "my-app",
  "private": true,
  "version": "1.0.0",
  "description": "My App",
  "repository": "",
  "license": "UNLICENSED",
  "framework7": {
    "cwd": "D:\\f7-test",
    "type": [
      "web"
    ],
    "name": "My App",
    "framework": "core",
    "template": "single-view",
    "bundler": false,
    "customColor": false
  },
  "scripts": {
    "serve": "http-server ./www/ -o -c 1 -a localhost -p 8080",
    "start": "npm run serve"
  },
  "browserslist": [
    "Android >= 5",
    "IOS >= 9.3",
    "Edge >= 15",
    "Safari >= 9.1",
    "Chrome >= 49",
    "Firefox >= 31",
    "Samsung >= 5"
  ],
  "dependencies": {
    "dom7": "^2.1.2",
    "framework7": "^4.0.0",
    "framework7-icons": "^2.2.0",
    "template7": "^1.4.1"
  },
  "devDependencies": {
    "http-server": "^0.11.1"
  }
}

Вариант Framework7 with Vue.js

Если мы выберем Framework7 with Vue.js:

PS D:\f7-test> framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Simple web app
? App (project) name: My App
? What type of framework do you prefer?
  Framework7 Core
> Framework7 with Vue.js
  Framework7 with React

Выбираем стартовый шаблон(я выбрал Single View):

  PS D:\f7-test> framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Simple web app
? App (project) name: My App
? What type of framework do you prefer? Framework7 with Vue.js
? Choose starter template: (Use arrow keys)
> Single View
  Tabbed Views (Tabs)
  Split View (Split Panel)

Затем отвечаем на вопрос “Будем ли мы использовать препроцессор CSS”. Я выбрал No, i am good with CSS - то есть без препроцессора:

PS D:\f7-test> framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Simple web app
? App (project) name: My App
? What type of framework do you prefer? Framework7 with Vue.js
? Choose starter template: Single View
? Do you want to setup CSS Pre-Processor (Use arrow keys)
> No, i am good with CSS
  Less
  Stylus
  SCSS (SASS)

Ну и напоследок мы выбираем либо цветовую тему по умолчанию, либо мы будем использовать цвета нашего бренда(я выбрал по умолчанию):

PS D:\f7-test> framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Simple web app
? App (project) name: My App
? What type of framework do you prefer? Framework7 with Vue.js
? Choose starter template: Single View
? Do you want to setup CSS Pre-Processor No, i am good with CSS
? Do you want to specify custom theme color? (Use arrow keys)
> No, use default color theme
  Yes, i want to specify my brand color

Дожидаемся окончания установки всех зависимостей… и наш проект готов!

i Next steps:
  - 🔥 Run "npm start" to run development server
  - 🔧 Run "npm run build-prod" to build web app for production
  - 📖 Visit documentation at https://framework7.io/docs/
  - 📖 Check README.md in project root folder with further instructions

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

npm start

Откроется браузер и мы сможем увидеть результат наших трудов.

С помощью framework7 create мы установили все нужные зависимости, убедиться в этом вы можете, если откроете файл package.json

{
  "name": "my-app",
  "private": true,
  "version": "1.0.0",
  "description": "My App",
  "repository": "",
  "license": "UNLICENSED",
  "framework7": {
    "cwd": "D:\\f7-test",
    "type": [
      "web"
    ],
    "name": "My App",
    "framework": "vue",
    "template": "single-view",
    "cssPreProcessor": false,
    "customColor": false,
    "bundler": "webpack"
  },
  "scripts": {
    "build-prod": "cross-env NODE_ENV=production node ./build/build.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
    "start": "npm run dev"
  },
  "browserslist": [
    "Android >= 5",
    "IOS >= 9.3",
    "Edge >= 15",
    "Safari >= 9.1",
    "Chrome >= 49",
    "Firefox >= 31",
    "Samsung >= 5"
  ],
  "dependencies": {
    "dom7": "^2.1.2",
    "framework7": "^4.0.0",
    "framework7-icons": "^2.2.0",
    "framework7-vue": "^4.0.0",
    "template7": "^1.4.1",
    "vue": "^2.6.3"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/runtime": "^7.3.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-vue-jsx": "^4.0.1",
    "chalk": "^2.4.2",
    "copy-webpack-plugin": "^4.6.0",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "ora": "^3.0.0",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.5.0",
    "rimraf": "^2.6.3",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.1.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^15.6.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.3",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  }
}

Вариант Framework7 with React

Если мы выберем Framework7 with React

PS D:\f7-test> framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Simple web app
? App (project) name: My App
? What type of framework do you prefer?
  Framework7 Core
  Framework7 with Vue.js
> Framework7 with React

то наши дальнейшие действия будут такие: Выбираем стартовый шаблон(я выбрал Single View):

PS D:\f7-test> framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Simple web app
? App (project) name: My App
? What type of framework do you prefer? Framework7 with React
? Choose starter template: (Use arrow keys)
> Single View
  Tabbed Views (Tabs)
  Split View (Split Panel)

Затем отвечаем на вопрос “Будем ли мы использовать препроцессор CSS”. Я выбрал No, i am good with CSS - то есть без препроцессора:

PS D:\f7-test> framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Simple web app
? App (project) name: My App
? What type of framework do you prefer? Framework7 with React
? Choose starter template: Single View
? Do you want to setup CSS Pre-Processor (Use arrow keys)
> No, i am good with CSS
  Less
  Stylus
  SCSS (SASS)

Ну и напоследок мы выбираем либо цветовую тему по умолчанию, либо мы будем использовать цвета нашего бренда(я выбрал по умолчанию):

PS D:\f7-test> framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Simple web app
? App (project) name: My App
? What type of framework do you prefer? Framework7 with React
? Choose starter template: Single View
? Do you want to setup CSS Pre-Processor No, i am good with CSS
? Do you want to specify custom theme color? (Use arrow keys)
> No, use default color theme
  Yes, i want to specify my brand color

Дожидаемся окончания установки всех зависимостей… и наш проект готов!

i Next steps:
  - 🔥 Run "npm start" to run development server
  - 🔧 Run "npm run build-prod" to build web app for production
  - 📖 Visit documentation at https://framework7.io/docs/
  - 📖 Check README.md in project root folder with further instructions

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

npm start

Откроется браузер и мы сможем увидеть результат наших трудов.

С помощью framework7 create мы установили все нужные зависимости, убедиться в этом вы можете, если откроете файл package.json

{
  "name": "my-app",
  "private": true,
  "version": "1.0.0",
  "description": "My App",
  "repository": "",
  "license": "UNLICENSED",
  "framework7": {
    "cwd": "D:\\f7-test",
    "type": [
      "web"
    ],
    "name": "My App",
    "framework": "react",
    "template": "single-view",
    "cssPreProcessor": false,
    "customColor": false,
    "bundler": "webpack"
  },
  "scripts": {
    "build-prod": "cross-env NODE_ENV=production node ./build/build.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
    "start": "npm run dev"
  },
  "browserslist": [
    "Android >= 5",
    "IOS >= 9.3",
    "Edge >= 15",
    "Safari >= 9.1",
    "Chrome >= 49",
    "Firefox >= 31",
    "Samsung >= 5"
  ],
  "dependencies": {
    "dom7": "^2.1.2",
    "framework7": "^4.0.0",
    "framework7-icons": "^2.2.0",
    "framework7-react": "^4.0.0",
    "prop-types": "^15.6.2",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "template7": "^1.4.1"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.3.1",
    "babel-loader": "^8.0.5",
    "chalk": "^2.4.2",
    "copy-webpack-plugin": "^4.6.0",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "ora": "^3.0.0",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.5.0",
    "rimraf": "^2.6.3",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.1.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  }
}

В статье показаны лишь самые простые варианты, вам могут и скорее всего потребуются более сложные варианты, но путь вам указан, а как по нему идти - решать вам.