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)
blank

相关推荐

  • js替换换行符

    js替换换行符将换行符去掉.replace(/\\r\\n/g,”);

  • PAT备考经验&相关信息[通俗易懂]

    在9月8号下午的PAT考试中,我幸运的拿到了满分,用时1小时45分钟,排名第五,算是成功迈出了转专业的第一步。按照惯例应该嘚瑟一波,然而身边并没有人考这个,转念一想,不如把考试日志和备考经验教训记录下来,以期看见此文的后来者能少走一些弯路,更加高效的刷题学习(虽然可能并没有人能看到 _(:△」∠)_)。当然,在科班大佬面前我只是个尚未入门的弱鸡,因此这篇经验主要针对有意转行/业余爱好编程/基…

  • linux查看定时任务的命令_linux添加定时任务执行脚本

    linux查看定时任务的命令_linux添加定时任务执行脚本linux查看定时任务

    2022年10月23日
  • python保留小数位数_结果保留两位小数

    python保留小数位数_结果保留两位小数介绍3中方法:1、round(a,2)2、print(‘%.2f’%(a/b))3、format(a,’.2f’)

  • Python 爬虫和数据分析实战

    Python 爬虫和数据分析实战课程介绍本课程是Python爬虫和数据分析项目实战课程,主要分3部分:第1部分是Python爬虫,主要使用Urllib3和BeautifulSoup抓取天猫商城和京东商城胸罩销售数据,并保存到SQLite数据库中;第2部分是对抓取的胸罩销售数据进行数据清洗,主要是去除空数据,让数据格式更规范;第3半部分利用Pandas对数据进行分析,以及使用M…

  • 如何使用cmd进入MySQL

    如何使用cmd进入MySQL同时按下键盘上的win徽标+R,选择cmd,回车键打开cmd,在命令行中输入mysql-uroot-p切记只有这句话“mysql-uroot-p”,p后面没有分号“;”,否则就会报出以下错误,即提醒使用者不要在cmd命令行中输入密码,这种做法是不安全的。正确示例:C:\Users\hemiao>mysql-uroot-pEnterpassword:******WelcometotheMySQLmonitor.Commandsendwith;or

发表回复

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

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