10、手把手教 Vue–Mint UI 使用

修改router

PS:转载请注明出处作者: TigerChain地址:
https://www.jianshu.com/p/db776b507065本文出自 TigerChain 简书
手把手教 Vue 系列

教程简介

npm --registry http://r.cnpmjs.org install --global vue-cli //安装vue-cli
vue init webpack <project name> //创建项目,一般情况使用默认配置就可以
cd <project name>
npm --registry http://r.cnpmjs.org install //安装package
npm run dev 

三、使用 mint-ui 仿微信界面

以上说我们说了 mint-ui
的三种引入方式,并且介绍了组件的使用,这没有什么好说的,需要什么组件看官网上有的话直接拿来用。学了就要使用,在这里我们使用
mint-ui 来仿一个微信的基本框架「使用 vue-cli + 按需加载 mint-ui
组件的方式」,所谓无图无真相,我们来看一下效果图吧

效果图

图片 1we-chat-demo.gif

大概说一下我是如何拆分组件的,具体可以看源码,注释非常清楚

图片 2wecaht-component-01

其它类似发现,我的中的条目都是通用的组件「就不一一列举了」,这个 Demo
中的组件抽到的粒度还不是最细的,大家可以自行再封装组件

源码地址:
https://github.com/githubchen001/vue-lesson/tree/master/08%E3%80%81Mint-UI%E7%9A%84%E4%BD%BF%E7%94%A8/mint-ui-wechat-demo

我是一个刚刚接触前端开发的新手,所以有必要记录如何将Bootstrap和Vue进行整合。
如果你是老手,请直接绕道而过。作为一个新手,里面的步骤,过程或者专业术语未必正确,如果你发现哪里错误了,请发邮件至ztao8607@gmail.com

、使用模块化按需引用

在上面的例子,我们只使用了 button 和 Navbar 组件,但是我们却引入了整个
mint-ui
组件,这有多么大的浪费呀「简直是一种奢侈,大材小用」,能不能我们需要什么组件再引入什么组件,实现按需加载呢「以达到减少项目体积的目的」,当然可以了,我们来看看这种方式

  • 1、使用 vue-cli 来创建一个名为 mint-ui-cli-single-import-demo 的项目

当然我们要使用 mint-ui ,我们肯定要安装 mint-ui

yarn add mint-ui
  • 2、要实现按需加载 mint-ui 组件,我们需要借助 babel-plugin-component
    组件来只引入需要组件,我们来安装一下 babel-plugin-component

yarn add install babel-plugin-component --dev
  • 3、配置 .babelrc

图片 3config-single-mint-ui-babelrc.png

我们来运行一下项目 yarn run dev 然后输入 localhost:8080
很不幸,报错了,我们看一下命令行中的错误如下,是我们要使用 ES6
的标准,却没有安装 babel-preset-es2015 ,废话不多说,我们安装一下即可

图片 4can’t-find-es2015

  • 4、安装 babel-preset-es2015

yarn add babel-preset-es2015 --dev

我们完成安装以后,再运行一下,就不会报上面的错误了

  • 5、我们来引入按钮来测试一下,我们在 main.js 引入 Button 组件

图片 5import-button-and-use

这样我们引入了 Button 并且全局注册了 Button 我们就可以在什何组件中使用
Button 了,官方说注册组件可以使用 Vue.component(Component.name,
Component) 和 Vue.use(Component) 两种方式实现,但是亲测只有
Vue.component(Component.name, Component) 这种注册方式起作用而
Vue.use(Component) 是无效的「会报错,说组件没有正确的注册」

  • 6、使用 Button 组件,我们直接在 App.vue 组件中使用 Button

图片 6button-in-appvue

  • 7、运行一把,查看结果

图片 7show-single-button-result

怎么样除了我们熟悉的 vue-cli 帮我们创建的 HelloWorld 以外,我们看到了
mint-ui 创建的两个按钮「完美显示出来了」

PS: 这里注意一下,我们如果想要给 mt-button
这种自定义组件添加点击事件,不能使用传统的 @click 而要使用 @click.native

这样我们就把按需加载 mint-ui
中的组件配置完了,不过根据路由的思想,虽然我们可以把路由配置在 main.js
中,但是为了统一管理 vue-cli 帮我们把路由配置在单独的文件中—
router/index.js 中,仿照路由的配置,我们把 mint-ui
也单独配置在一个文件夹中「方便我们管理,当然这不是必须的,你完全可以在
main.js 中去一个个按需引入组件」,这里我们创建一个 mint-ui/index.js
文件「如下所示」

图片 8add-mint-ui-indexjs

我们把引入需要的 mint-ui 组件全部配置在 mint-ui/index.js 文件中

  • 8、配置 mint-ui/index.js 文件

由于 mint-ui 是基于 vue 的,所以我们要先相入 vue ,这和 router
是一样的「这里以 Button 为例子来引入,其实就是把上面 main.js
是配置的放到 mint-ui/index.js 文件中」

# mint-ui/index.jsimport Vue from 'vue'import { Button } from 'mint-ui';Vue.component(Button.name, Button);
  • 9、修改 main.js

由于我们把 main.js 中引入 Button 的工作放在了 mint-ui/index.js
中了,所以我们现在把原有的 main.js 中引入 Button
的方法就要去掉「替换成引入 mint-ui/index.js 即可」

# main.jsimport Vue from 'vue'import App from './App'import router from './router'// import { Button } from 'mint-ui';// Vue.component(Button.name, Button);import './mint-ui/index.js'... 
  • 10、查看结果

图片 9show-single-button-result

和上面在 main.js 中引入 Button 组件是一毛一样的,所以推荐大家在使用
mint-ui 的时候建议在一个单独文件中去引入

  • 11、我们再来几个组件试试

为了方便起见,我们把原来 App.Vue 中和 HelloWorld
组件中的内容干掉「template、style、js 都把内容清空」

我们在 HelloWorld 组件中分别引入 mint-ui 的 Button、Action sheet
等「需要什么我们看文档即可,文档非常的详细」

直接在 mint-ui/index.js 引入需要的组件即可

# mint-ui/index.jsimport Vue from 'vue'import { Button,Actionsheet } from 'mint-ui';Vue.component(Button.name, Button);Vue.component(Actionsheet.name, Actionsheet);

我们可以看到除了 Button,我们又引入了
Actionsheet「依次类推,想用什么组件就在这里引入并且注册即可」,我们来看看
Actionsheet 的用法

<mt-actionsheet :actions="actions" v-model="sheetVisible"></mt-actionsheet>

actions 属性绑定一个由对象组成的数组,每个对象有 name 和 method
两个键,name 为菜单项的文本,method
为点击该菜单项的回调函数。sheetVisible
是组件默认是否显示,直接看代码「在 HelloWorld 中添加」

<template> <div > <mt-button type="primary" size="large">primary</mt-button> <mt-actionsheet :actions="actions" v-model="sheetVisible"> </mt-actionsheet> </div></template><script>export default { name: 'HelloWorld', data () { return { actions:[], // 设置为 true 默认就自动弹出 actionSheet sheetVisible:true } }, created() { this.actions = [ {name:'拍照'}, {name:'打开相册'} ] }}

没有什么好说的,和官方介绍的差不离,在这里 actions 中的 method
不是必须「但是实际情况是肯定是有的,不然 actionsheet 有个毛意义呢」

  • 12、运行一下,查看结果

图片 10use-actionsheet-demo

  • 13、我们来实现,点击按钮显示 actionsheet 并且每个 actionsheet
    中的菜单有对应的方法

图片 11add-method-to-actionsheet

我们再给 Button 添加点击事件

<mt-button type="primary" size="large" @click.native="showActionSheet"> primary</mt-button>
  • 14、运行一把看结果

图片 12show-actionsheet-result

还不错吧,这里基本就差不多了,其它的组件我们照着文档使用就可以了,没什么难的「文档非常的详细」

具体代码看:源代码

Vue官方不建议新手直接使用vue-cli,但我不这么看。
先使用cli跳过繁琐的环境配置,直接看到demo效果能增强点自信心。如果上手就被一大堆的环境配置搞乱了心情,那才是得不偿失呢。
恩. 至少我是这么认为的。

二、Mint UI 的使用方法

我们在使用 Vue.js 的时候不一定非要使用 vue-cli
来创建一个单页面应用,很可能们使用别的技术栈来搭配
Vue.js「vue只是使用它的模版,减少恶心的动态拼串」,那么我们使用 cdn
直接引入的方式是最好不过了

引入方法

<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/mint-ui@1/lib/style.css"><!-- 引入组件库 --><script src="https://unpkg.com/mint-ui@1/lib/index.js"></script>

当然我们也可以使用 yarn/npm/bower 等来安装 Mint UI 模块,然后在 html
界面中引入

这种方式其实没有什么好说的,就像我们在以前的 vue demo 中引入 vue.js
是一样的,废话不多说了,来两个例子直观感受一下吧

使用几个组件练练手

2.创建布局

图片 13本节大纲

你可以选择下载bootstrap
zip包,然后将包里面的内容放到工程的static目录中。也可以选择使用bootstrap
cdn资源,我建议使用cdn资源。

仿手机 webapp 淘宝登录界面

来张效果图看一下

  • 1、手淘 webapp 登录界面

图片 14手淘的登录界面

  • 2、使用 Mint UI 仿写的手淘 webapp 登录界面

图片 15仿写手淘的登录界面

怎么样还原度还是挺高的吧,当然这个效果不使用 Mint UI
完全可以实现「实现难度也是非常低的,这里使用 Mint UI
实现此效果有点大材小用,只是为了演示效果」

  • 3、核心代码

<div > <!-- 提醒栏 --> <div > 你需要登录才能继续仿问 关闭 </div> <div > <img src="./imgs/tblogo.png" alt="图片 16" > </div> <!-- 操作区域 --> <div > <!-- 账号 --> <mt-field :placeholder="accountPlaceholder" v-model="uname" ></mt-field> <!-- 密码 --> <mt-field v-show="isUserAccount" placeholder="请输入密码" type="password" v-model="upass" ></mt-field> <!-- 短信验证码 --> <mt-field v-show="!isUserAccount" placeholder="校验码" v-model="getCode" > 获取短信验证码 </mt-field> <!-- 免费注册块 --> <div > 免费注册 忘记密码 </div> <!-- 登录和切换登录方式块 --> <div> <mt-button size="large" @click.native="login">登录</mt-button> <mt-button size="large" type="primary" @click.native="changeLoginMethod">{{defaultAccountText}}</mt-button> </div> </div> </div>

这个没有什么好说的,完整的代码请看
https://github.com/githubchen001/vue-lesson/tree/master/08%E3%80%81Mint-UI%E7%9A%84%E4%BD%BF%E7%94%A8/usecdntaobaologin
注释非常清楚,不解释

我们使用 vue-cli 来创建的组件化项目,其实也有三种引入 Mint UI 的方式

添加css样式

四、总结

本节我们说了 mint-ui
的使用,其实不管什么组件都是类似的使用方式,还是非常 easy
的,大概总结一下

  • 使用 cdn 引入,注意配置 webpack.base.conf.js
  • 全局使用,包会非常大,效率当然不是很高
  • 按需使用–推荐使用「建议我们把使用三方组件单独配置到一个文件中,这里注意官方说单个组件可以使用
    Vue.use,亲测不可以「看了源码,确实没有实现 install
    方法」,我们只能使用 Vue.component(Component.name,Component)
    这种方式」

  • 使用了组件化开发,父子组件之间的传数据,方法等
  • 使用到了 mint-ui 的 tabs 组件,index-list 等组件
  • 本 demo
    只是为了练习,在兴趣的可以再完善「这里只是一个抛砖引玉」,并添加上我们以前讲的手把手教Vue–路由功能,实现界面跳转传参,把其它界面模仿完成

本节所有 demo
演示地址
https://githubchen001.github.io/vue-lesson/08%E3%80%81Mint-UI%E7%9A%84%E4%BD%BF%E7%94%A8/index.html

更多文章关注:手把手教Vue系列

点赞富一生「你一点赞我就更来劲了」,转发富五代,更多文章请关注我的微信公号来查阅

公众号:TigerChain

因为是从bootstrap拷贝的css样式,所以直接将css拷贝过来。

  • 1、阅读对象本篇教程适合新手阅读,老手直接略过
  • 2、教程难度初级,本人水平有限,文章内容难免会出现问题,如果有问题欢迎指出,谢谢
  • 3、Demo 地址:https://github.com/githubchen001/vue-lesson查看
    08、Mint-UI的使用

正常的话,你应该能看到一个vue的初始化页面。

一、什么是 Mint UI

当我们一听到 XX UI
就可以知道它是一个界面相关的框架,玩过前端的人至少听说过 Bootstrap「它是
Twitter 开源的一个 css/html 工具包」, 而 Mint UI
是饿了么团队开源的一款基于 Vue.js 的移动端组件库

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>testproject</title>
  <!-- 将bootstrap cdn url放到这里 -->
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="external nofollow" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>
、直接在 index.html 中引入,这个和上面的方式一样,不过有一些小区别,我们来感受一下

我们使用 vue-cli
来创建一个项目,过程就不演示了,以前说过,我们直接看核心代码

  • 1、在 index.html 中使用 cdn 引入 mint-ui 相关的 css 和 js

<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>mint-ui-demo</title> <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"> </head> <body> <!-- 先引入 Vue --> <script src="https://unpkg.com/vue@2.5.11/dist/vue.js"></script> <!-- built files will be auto injected --> <script src="https://unpkg.com/mint-ui/lib/index.js"></script> <div ></div> </body></html>

方式一,配置 externals mint-ui

  • 2、配置 webpack.base.conf.js,添加如下代码

图片 17配置
mint-ui

我们在 webpack.base.conf.js 的 module.exports 中配置
externals,externals 是把组件公开出去,供全局使用

PS:在这里我们要注意一点 externals 配置的 key:vaule 形式的,这里的
Value
好多文章中说是随意配置的,但是亲过自己亲测,这里不能随便配置,必须要和相关
js 暴漏出来的模块名字一模一样,对于 mint-ui 来说是 MINT,我们可以看一下
mint-ui.js 的源码

图片 18mint-ui部分源码

看到了吧,mint-ui 暴露出去供我们使用的是 MINT,所以 externals 的 value
一定是这个值「不能随意配置」

  • 3、修改 main.js

import MINT from 'mint-ui'Vue.use

添加以上两句,引入 mint-ui ,并且使用它

经过以上三部,我们就使用 cdn 的方式把 mint-ui 配置完了,我们来测试一下

  • 4、在 App.vue 中的模版中添加以下代码

<template> <div > <mt-button type="default">default</mt-button> <mt-button type="primary">primary</mt-button> <mt-button type="danger" >danger</mt-button> <router-view/> </div></template>
  • 5、运行查看结果

图片 19show-vue-cli-cdn-mint-ui

怎么样,完美的显示出了 mint-ui 的 Button 效果

方式二 配置 externals vue

  • 除了以上方式,我们还可以在 externals 中直接配置 vue 不用配置 mint-ui

关于 externals 可以看 webpack
官方说明:外部扩展,这里不细说了解一下即可,我们来看看如何在配置—配置方式如下

图片 20externals-config-vue

我们这时配置一下 Vue 并不配置 mint-ui

  • 同时去掉 main.js 中的 import 和 Vue.use

图片 21remove-use-mint

  • 由于我们修改了 webpack.base.conf.js 所以一定要重新启动服务,果看结果

图片 22show-vue-cli-cdn-mint-ui.png

怎么样,效果一毛一样,为什么呢?个人是这样理解的,mint-ui 是依赖于 vue
的,如果我们没有在 externals 配置 vue,只是配置了 mint-ui「这里 import
MINT from ‘mint-ui’ 都是 cdn 上的全局都一样」 没有把 vue
当全局暴露出去,那么我们在每个界面 import Vue from ‘vue’ 其实是 vue-cli
把我们下载到 node-modules 中的 vue ,而在本地 vue 使用其它
组件的时候,一般情况下我们是要 import 和 Vue.use 的「具体要看组件的 js
有没有提供这个方法」

但是如果我们在 externals 中配置了 vue ,相当于我们 import Vue from ‘vue’
都是 cdn 上的「和本地 node-modules 中的 vue 没有关系,此时的 vue 和 mint
真正的都是 cdn 上的」,此时的情况就像在 html 中直使用 cdn 直接引入 vue
再引入 mint-ui 是一样的,所以我们不必在 externals 再去配置
mint-ui,效果也能实现「个人建议如果使用的话,使用第二种方案」

<script>
export default {
 name: 'root'
}
</script>
、使用模块化全局引用

以上说了在 vue-cli 中使用 cdn 来使用 mint-ui 的两种方式,其实使用 cdn
来减小包的大小和优化速度是不错的一种选择,下在我们介绍第二种使用模块化全局引入
mint-ui

  • 1、首先我们要使用一模块我们就要安装它「cdn 除外」,使用 yarn/npm
    来安装,这里使用 yarn「好处以前在 React 中说过了,这里不过多了说」

图片 23yarn-add-mint-ui

在这里我们要注意一下,样式文件需要单独引入

  • 2、使用 mint-ui

我们打开 main.js 输入以下内容「如图中红框所示」

图片 24import-mint-js-and-css

经过以上两步配置,我们就把 mint-ui
全局配置好了,我们在任何组件中就可以使用 mint-ui 了

  • 3、测试一下

我们就来几个按钮和 Navbar 的功能,废话不多说了直接看效果图

图片 25golbal-vue-cli

基本上就是这个效果,具体代码可以看源码
https://github.com/githubchen001/vue-lesson/tree/master/08%E3%80%81Mint-UI%E7%9A%84%E4%BD%BF%E7%94%A8/mint-ui-vue-cli-global-use-demo

你可以访问bootstrap官方网站获取到最新的cdn资源地址。

正文

<template>
 <div id="root">
  <div class="container">
    <div class="masthead">
      <h3 class="text-muted">Look for it!</h3>
      <nav>
      <ul class="nav nav-justified">
        <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Projects</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Services</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Downloads</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >About</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Contact</a></li>
      </ul>
      </nav>
    </div>
  </div>
 </div>
</template>
<script>
export default {
 name: 'root'
}
</script>
<style>
body {
 padding-top: 20px;
}
.footer {
 padding-top: 40px;
 padding-bottom: 40px;
 margin-top: 40px;
 border-top: 1px solid #eee;
}
/* Main marketing message and sign up button */
.jumbotron {
 text-align: center;
 background-color: transparent;
}
.jumbotron .btn {
 padding: 14px 24px;
 font-size: 21px;
}
/* Customize the nav-justified links to be fill the entire space of the .navbar */
.nav-justified {
 background-color: #eee;
 border: 1px solid #ccc;
 border-radius: 5px;
}
.nav-justified > li > a {
 padding-top: 15px;
 padding-bottom: 15px;
 margin-bottom: 0;
 font-weight: bold;
 color: #777;
 text-align: center;
 background-color: #e5e5e5; /* Old browsers */
 background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
 background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
 background-image:   -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
 background-image:     linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
 background-repeat: repeat-x; /* Repeat the gradient */
 border-bottom: 1px solid #d5d5d5;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
 background-color: #ddd;
 background-image: none;
 -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
     box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
 border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
 border-bottom: 0;
 border-radius: 0 0 5px 5px;
}
@media (min-width: 768px) {
 .nav-justified {
  max-height: 52px;
 }
 .nav-justified > li > a {
  border-right: 1px solid #d5d5d5;
  border-left: 1px solid #fff;
 }
 .nav-justified > li:first-child > a {
  border-left: 0;
  border-radius: 5px 0 0 5px;
 }
 .nav-justified > li:last-child > a {
  border-right: 0;
  border-radius: 0 5px 5px 0;
 }
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
 /* Remove the padding we set earlier */
 .masthead,
 .marketing,
 .footer {
  padding-right: 0;
  padding-left: 0;
 }
}
</style>
<template>
 <div id="root">
  <div class="container">
    <div class="masthead">
      <h3 class="text-muted">Look for it!</h3>
      <nav>
      <ul class="nav nav-justified">
        <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Projects</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Services</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Downloads</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >About</a></li>
        <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Contact</a></li>
      </ul>
      </nav>
    </div>
  </div>
  <mfooter></mfooter>
 </div>
</template>

相关文章