Framework7 v4 Core 文档翻译(二)

1,085 阅读1分钟

为了能快速进入开发,这次先翻译:Framework7 Command-Line Interface

F7 CLI 是一个非常强大的工具,同时也是开发 F7 应用最为推荐的一种方式。

注:Command-Line Interface = CLI

F7 CLI 允许在创建应用的时候选择不同的变体:

  • Framework 框架选择:Framework7 Core / Framework7-Vue / Framework7-React
  • Target platform 平台选择:Web app / PWA / Cordova app(可多选
  • Starter template 开始模板选择:Single View / Tabs / Split View
  • Custom color theme 自定义颜色主题
  • Generate required icons and splash screen 图标和启动屏选择

Installation 安装

注:提示权限不足请在命令前加 sudo

首先全局安装 Cordova:

$ npm install -g cordova

然后全局安装 F7 CLI:

$ npm install -g framework7-cli

如果遇到访问错误相关的问题,使用以下命令:

$ npm install -g framework7-cli --unsafe-perm=true --allow-root

Create App 创建应用

在项目目录下,运行以下命令创建应用:

$ framework7 create

注:命令执行过程中会提问几个关于框架和模板的问题(like npm init)。

Create App User Interface 可视化创建应用

不喜欢命令行创建?可以通过可视化界面来配置:

$ framework7 create --ui

执行以上命令会在浏览器打开配置页面,默认地址为 localhost:3001。你也可以通过参数 --port 修改端口号:

$ framework7 create --ui --port 8080

Generate Assets 生成资源文件

在创建好的项目目录下会有个 assets-src 目录,里面包含了图标和启动屏的资源图片。为了生成你的图标和启动屏图片,你需要把里面的文件都替换掉(注意图片大小和格式),然后执行以下命令:

$ framework7 generate-assets

这就可以方便以后使用。

Generate Assets User Interface 可视化生成资源文件

同上,通过可视化形式配置:

$ framework7 generate-assets --ui --port 8080

Cordova APIs

要运行 Cordova 相关命令,请在项目根目录中运行以下命令:

$ framework7 cordova [..args]

例如:

$ framework7 cordova plugin add cordova-plugin-statusbar
$ framework7 cordova plugin add cordova-plugin-splashscreen
$ framework7 cordova build ios
...

附:Cordova Documentation