Framework7 Vue 教程 入门 学习

Framework7 Vue 教程 入门 学习网上关于Framework7的博客、学习资料少之又少,所以我想把我学习Framework7Vue的入门记录一下。Framework7Framework7是一个开源免费的框架可以用来开发混合移动应用(原生和HTML混合)或者开发iOS&Android风格的WEBAPP。也可以用来作为原型开发工具,可以迅速创建一个应用的原型。Framework7最主要的功能是可以…

大家好,又见面了,我是你们的朋友全栈君。

网上关于Framework7的博客、学习资料少之又少,所以我想把我学习Framework7 Vue的入门记录一下。


Framework7

Framework7 是一个开源免费的框架可以用来开发混合移动应用(原生和HTML混合)或者开发 iOS & Android 风格的WEB APP。也可以用来作为原型开发工具,可以迅速创建一个应用的原型。

Framework7 最主要的功能是可以使用HTML、CSS和JS来开发iOS7应用。Framework7 是完全免费开源的。

Framework7 并不能兼容所有的设备。她只专注于为 iOS 和 Google Material 设计提供最好的体验。

如果你想开发 iOS 或者 Android 混合应用(Phonegap)或者你想开发 iOS 和 Google Material 风格的WEB APP,那么Framework7将会是你的首选。

首先我们进入Framework7的文档官网,https://framework7.io/vue/installation.html,注意英文文档才是最新的,中文文档则是很久没更新的旧版本。

Framework7 Vue 教程 入门 学习

我们采用手动安装(Manual Installation)的方式,首先你的电脑要有vue+webpack的开发环境,然后依次安装framework7和framework7-vue相关依赖,最后修改一下文件结构即可。


  1. 初始化一个vue应用

    vue init webpack framework7-vue-demo

     

  2. 安装framework7和framework7-vue

    npm install framework7
    npm install framework7-vue

    Framework7 Vue 教程 入门 学习

  3. 修改vue文件结构(初始化App)

     官网文档 Initialize App 这一节中的 ES Modules 有相应的指导,我们要修改的文件有index.html、main.js(my-app.js)、  app.vue。 

     首先是index.html,官网给的是这样子的

    Framework7 Vue 教程 入门 学习

     经实践发现这样子会在chrome移动端调试的时候出现缩放问题,所以我们这样子改:

     

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="default">
      <meta name="theme-color" content="#2196f3">
      <meta name="format-detection" content="telephone=no">
      <meta name="msapplication-tap-highlight" content="no">
      <title> framework7-vue </title>
    </head>
    <body>
      <div id="app"></div>
    </body>
    </html>
    

     main.js:

    import Vue from 'vue'
    import Framework7 from 'framework7/framework7.esm.bundle.js'
    import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle.js'
    import Framework7Theme from 'framework7/css/framework7.bundle.css'
    
    Framework7.use(Framework7Vue);
    import App from './app.vue';
    new Vue({
      el: '#app',
      render: (h) => h(App),
    });

     

     比官网给的多了一行导入 Framework7Theme  ,如果没有这个导入将会没有样式效果

     app.vue:

    <template>
      <f7-app :params="f7params">
        <f7-view main url="/"></f7-view>
      </f7-app>
    </template>
    <script>
      import routes from './router/index.js';
      export default {
        data() {
          return {
            f7params: {
              routes:routes,
              name: 'My App',
              id: 'com.myapp.test',
              theme: 'auto'
            }
          }
        }
      }
    </script>

     跟官网给的有一处不同即routes的导入,这个根据实际路由文件导入就好了,另外路由文件也和原vue的有所不同,查看文档的 Navigation / Router 这一节,我们将路由文件改为:

    import HelloWorld from '@/components/HelloWorld'
    export default [
    
      {
        path:'/',
        component:HelloWorld
      }
    ];
    
    

     为了查看效果,我找了文档中的一个实例 Tabbar 的实例代码替换入helleworld.vue

    <template>
      <f7-page :page-content="false">
        <f7-navbar title="Tabbar" back-link="Back">
          <f7-nav-right>
            <f7-link icon-ios="f7:reload" icon-md="material:compare_arrows" @click="isBottom = !isBottom"></f7-link>
          </f7-nav-right>
        </f7-navbar>
        <f7-toolbar tabbar :position="isBottom ? 'bottom' : 'top'">
          <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
          <f7-link tab-link="#tab-2">Tab 2</f7-link>
          <f7-link tab-link="#tab-3">Tab 3</f7-link>
        </f7-toolbar>
    
        <f7-tabs>
          <f7-tab id="tab-1" class="page-content" tab-active>
            <f7-block>
              <p>Tab 1 content</p>
              ...
            </f7-block>
          </f7-tab>
          <f7-tab id="tab-2" class="page-content">
            <f7-block>
              <p>Tab 2 content</p>
              ...
            </f7-block>
          </f7-tab>
          <f7-tab id="tab-3" class="page-content">
            <f7-block>
              <p>Tab 3 content</p>
              ...
            </f7-block>
          </f7-tab>
        </f7-tabs>
      </f7-page>
    </template>
    <script>
      export default {
        data() {
          return {
            isBottom: true,
          };
        }
      }
    </script>

     Framework7 Vue 教程 入门 学习

    可以看到framework7是正常起作用的。

  4. 至此,就可以开始学习使用framework7了。

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/136388.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • FreeLink开源呼叫中心设计思想

    FreeLink开源呼叫中心设计思想

  • .py和.ipynb的小知识

    .py和.ipynb的小知识目录1.相同点2.区别3.转换4.类比1.相同点用Python语言编写的源代码文件,其文件后缀是“.py”或“.ipynb”。用Python语言编写的源代码文件,其文件后缀是“.py”或“.ipynb”。2.区别.py:".py"文件是标准的Python源代码文件,通常情况下,使用“.py”的python源代码文件。可以用Spyder编辑并运行.py文件。也可…

    2022年10月23日
  • 测试用例编写八大要素

    测试用例编写八大要素编写测试用例的8大要素有:用例编号,所属模块,测试标题,重要级别,前置条件,测试输入,操作步骤,预期结果。以及编写测试用例时的注意事项。一、用例编号由字符和数字组合成的字符串,测试用例编号应该具有唯一性、易识别。如系统测试的用例编号格式为:产品编号-ST-系统测试项名-系统测试子项名-xxx。(备注:每个公司对于用例书写的规则不尽相同,具体细则还需要参考公司配置命名规范)二…

  • 小程序 轮播图之自动适应宽高度

    小程序 轮播图之自动适应宽高度以微信小程序为例:wxml文件:<!–1.轮播图外层容器swiper2.每一个轮播项swiper-item3.swiper标签存在默认样式1.width100%2.height150pximage存在默认宽度和高度320*2403.swiper高度无法实现由内容撑开4.先找出来原图的宽度和高度等比例给swiper定宽度和高度原图的宽度和高度750x300swiper宽度/.

  • pycharm 中文乱码_pycharm中文字体设置

    pycharm 中文乱码_pycharm中文字体设置问题:pycarm里面的中文,没有办法正常显示原因:因为Pycharm会使用系统默认的字体,所以当系统中没有这个字体的时候,他就没法显示解决办法:sudoyum-yinstallfontconfig(安装字体库)安装完成后,在/usr/share目录就可以看到fonts和fontconfig目录了寻找中文字体(可以在windows里面找,路径:C:\Windows\Fonts)cd/usr/share/fonts&&sudomakedirchinese

  • 独立成分分析 ( ICA ) 与主成分分析 ( PCA ) 的区别「建议收藏」

    独立成分分析 ( ICA ) 与主成分分析 ( PCA ) 的区别「建议收藏」1.前言参考资料:https://www.zhihu.com/question/28845451书上写的是:1.主成分分析假设源信号间彼此非相关,独立成分分析假设源信号间彼此独立。2.主成分分析认为主元之间彼此正交,样本呈高斯分布;独立成分分析则不要求样本呈高斯分布。在利用最大化信息熵的方法进行独立成分分析的时候,需要为源信号假定一个概率密度分布函数g’,进而找出使得g(Y)=g…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号