0

Framework7 - Vue - Webpack Cordova 模板

Framework7 - Vue - Webpack Cordova模板与Webpack开发服务器和热模块替换。「Framework7 - Vue - Webpack Cordova Template with Webpack Dev Server and Hot Module Replacement」

Github repo
Main metrics

Github stars Tracking Chart

Framework7 - Vue - Webpack Cordova 模板

你可以用这个模板完美地开始你的新cordova项目。

本模板使用

最低要求

  • Cordova: 6.0.0
  • Node.js: 6.5.0 (支持 ES6)

警告（针对 Linux 和 Mac OS 用户）。

对于实时重新加载，我无法找到简单的方法来做固定版本。但你可以用这种方式开发你的应用程序。

  • cordova platform add ios browser (浏览器需要在 live-reload 模式下开发。)
  • cordova run ios -- --lr (等到应用程序在你的 ios 模拟器或手机上打开，它将在发布后关闭控制台输出，所以 live-reload 将无法工作，不要关闭应用程序并进入下一步。)

特性介绍

Hooks（钩子）很聪明。它们可以为你解决一些问题。修复列表。

  • npm install 自动检查 node js 的依赖关系。
  • package.json 重命名名称变量，如果它有一个空格字符并自动保存。(npm install 时需要)
  • www 自动管理 www 文件夹。您不需要考虑 www 文件夹。你的目标总是 src 文件夹。
  • static 静态资产在实时重载时自动同步!
  • CordovaHtmlOutputPlugin 自动将 cordova.js 添加到 html 中。你不需要手动添加到你的文件中。这对 webpack 很有帮助。
  • manifest.json 有些 cordova 插件需要在根目录下添加 manifest.json。如果你将 manifest.json 文件添加到你的 src 文件夹，我们的智能钩子会自动将其复制到 www 文件夹。

Live Reload 相关

  • config.xml Live reload 在开发模式下需要 <allow-navigation href="*"/>。所以我们的智能钩子也会管理这个。你不需要考虑这个问题。
  • live-reload 自动管理 live-reload 的依赖关系。只需编写你的代码，而无需考虑依赖关系。
  • device_router.html 实时重载模式下的智能路由器。如果找不到，你可以手动写入 ip:port。
  • CordovaDeviceRouter.js 在 live-reload 模式下，你可以从多个设备连接到服务器。这个文件将正确的 cordova.js 文件注入到页面中。所以你可以同时从多个设备连接到 webpack-dev-server。
  • live-reload 自动管理 live-reload 的依赖关系。只需编写你的代码，而无需考虑依赖关系。
  • device_router.html 实时重载模式下的智能路由器。如果找不到，你可以手动写入 ip:port。
  • CordovaDeviceRouter.js 在 live-reload 模式下，你可以从多个设备连接到服务器。这个文件将正确的 cordova.js 文件注入到页面中。所以你可以同时从多个设备连接到 webpack-dev-server。

安装方法

重要提示：目前不支持 Phonegap 构建工具。我建议使用 cordova 与本模板。

本模板需要 cordova 或 phonegap，更多信息请参考 cordova 安装 或 phonegap 安装。
我们的魔力词。

哇嗷！你已经有了一个用 framework7 - vue 2 和 webpack 4 开发的全新的 cordova/phonegap 项目!

真是太棒了!

使用预定义模板进行安装

Framework v5 版本

cordova create cordova-template com.template DefaultTemplate --template git://github.com/caiobiodere/cordova-template-framework7-vue-webpack.git#master

Framework Single View v5 版本

仍在开发之中。

Framework Tabbed Views v5 版本

仍在开发之中。

Framework Split View v5 版本

仍在开发之中。

Framework v3 版本

cordova create cordova-template com.template DefaultTemplate --template git://github.com/caiobiodere/cordova-template-framework7-vue-webpack.git#feature/v3-default-template

Usage

你可以使用 cordova 的每个 phonegap 命令。您只有一个命令选项:-- --lr。它开始实时重载。

示例用法：

cordova run android -- --lr
cordova run browser -- --live-reload
phonegap run ios -- --lr

嗒嗒，这就是所有，乡亲们！

使用微软的 Cordova-Simulate

我们可以这样使用微软 Cordova-Simulate。

你可以检查。

更多信息。


（The first version translated by vz on 2020.08.26）

Main metrics

Overview
Name With Ownercaiobiodere/cordova-template-framework7-vue-webpack
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 4)
PlatformAndroid, iOS, Mac, Windows, Electron, Linux
License:Apache License 2.0
所有者活动
Created At2017-01-13 10:34:43
Pushed At2020-01-08 08:47:48
Last Commit At2020-01-08 21:46:01
Release Count23
Last Release Name2.4.3 (Posted on )
First Release Namev1.0.2 (Posted on 2017-01-16 21:56:53)
用户参与
Stargazers Count620
Watchers Count38
Fork Count153
Commits Count198
Has Issues Enabled
Issues Count174
Issue Open Count7
Pull Requests Count12
Pull Requests Open Count0
Pull Requests Close Count1
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

template logo

Framework7 - Vue - Webpack Cordova Template

You can start your new cordova project perfectly with this template.

This template uses:

Minimum Requirements

  • Cordova: 6.0.0
  • Node.js: 6.5.0 (Supports ES6)

WARNING (For Linux and Mac OS users):

For live-reload i can't find easy way to do fixed version of this. But you can develop your app with this way:

  1. cordova platform add ios browser (browser needs for development in live-reload mode.)
  2. cordova run ios -- --lr (wait till app opens in your ios emulator or phone. it will close console output after publish, so live-reload will not work. don't close the app and go to next step.)
  3. cordova run browser -- --lr (you can use live-reload in your phone-emulator and browser at same time. you can edit your files in live-reload mode now.)

Features

Hooks are smart. They can fix some problems for you. Fix list:

  • npm install Automatically checks node js dependencies.
  • package.json Renames name variable if it has a space characters and auto saves. (It needed for npm install)
  • www Automatically manages www folder. You don't need to think about www folder. Your target is always src folder.
  • static Static assets automatically sync on live reload!
  • CordovaHtmlOutputPlugin Automatically adds cordova.js to html. You don't need to add to your file manually. It's helpful for webpack.
  • manifest.json Some cordova plugins needs manifest.json in root folder. If you add manifest.json file to your src folder, our smart hooks automagically copy it to www folder!
  • config.xml Live reload needs <allow-navigation href="*"/> in development mode. So our smart hooks manages this too. You don't need to think about it.
  • live-reload Manages live-reload dependencies automatically. Just write your code, and don't think about dependencies.
  • device_router.html Smart router in live-reload mode. It searches for best available ip for connect server. if it can't find, you can write ip:port manually.
  • CordovaDeviceRouter.js In live-reload mode, you can connect to server from multiple devices. This file inject right cordova.js file to page. So you can connect to webpack-dev-server from multiple devices at same time.

Installation

IMPORTANT: Phonegap build tools not supported currently. I suggest to use cordova with this template.

This template need cordova or phonegap, for more information cordova installation or phonegap installation.

Our Magic words:

cordova create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-framework7-vue-webpack
phonegap create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-framework7-vue-webpack

boom! :boom: you have your brand new cordova / phonegap project with framework7 - vue 2 and webpack 4!

such a wow!

Installation using pre-defined templates

Framework v5 version

cordova create cordova-template com.template DefaultTemplate --template git://github.com/caiobiodere/cordova-template-framework7-vue-webpack.git#master

Framework Single View v5 version

Still under development

Framework Tabbed Views v5 version

Still under development

Framework Split View v5 version

Still under development

Framework v3 version

cordova create cordova-template com.template DefaultTemplate --template git://github.com/caiobiodere/cordova-template-framework7-vue-webpack.git#feature/v3-default-template

Usage

You can use every cordova