Mint UI入门系列教程

时间  2021-08-14
标签 css 前端 vue node webpack git github web ajax vue-router 栏目 CSS 繁體版
原文   原文链接

Vue移动端框架Mint UI教程-搭建环境引入框架（一）css

今天具体说一说比较经常使用的；Mint UI框架的按钮组件，Mint UI是 饿了么团队开发基于vue .js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，可以知足平常的移动端开发须要前端

 
5640239-dd963ff0f5224453.png
 

1：安装node

端开发框架和环境都是须要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载https://nodejs.org/en/，安装完成以后，打开cmd开始输入命令。（我用的是win10系统，因此须要管理员权限，右键点击以管理员身份运行cmd），否则会出现不少报错。vue

 
5640239-a687e02083fdc125
image

2：查看node的版本号

下载好node以后，以管理员身份打开cmd管理工具，，输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功。node

输入命令： node -v
 
5640239-075d348454599e48
image

3：安装淘宝npm镜像

因为npm是国外的，使用起来比较慢，咱们这里使用淘宝的cnpm镜像来安装vue.
淘宝的cnpm命令管理工具能够代替默认的npm管理工具。webpack

输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
 
5640239-3a5d06d80bc5e4cb
 

4：安装全局vue-cli脚手架

淘宝镜像安装成功以后，咱们就能够全局vue-cli脚手架，输入命令：cnpm install --global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；git

输入命令：cnpm install --global vue-cli
 
5640239-7cc6d92afcb6c6ee
 

5：开始进入主题，初始化一个vue项目

我这里是在d盘里面新建一个项目，先用d:的命令，回车键进入d盘；回车键默认建立项目信息。github

vue init webpack mint
 
5640239-f2d5199d33842270.png
 

出现这样的提示，初始化成功web


 
5640239-a852b9f569febc5c.png
 

打开d盘，能够看到刚才初始化的项目ajax


 
5640239-9e9f82c6d0038301.png
 

运行初始化demo，输入命令npm run dev；运行一下初始后的demo，弹出访问地址，若是没有问题则进行安装Mint UI；准备好好以后，开始引入饿了么Mint UI组件。vue-router

cd mint
npm run dev
 
5640239-b26cd03f633c4cc9.png
 
 
5640239-965bdd61ecb33eea.png
 
 
5640239-f699cf0c4deb6b6a.png
 

6：安装 Mint UI

npm install mint-ui -S

快捷键ctrl+c,终止批处理操 做吗(Y/N)，从上一步退出来，再输入命令npm install mint-ui -S
成功安装组件显示以下


 
5640239-854a722b695bb20f.png
 
7：而后在项目中的main.js文件引入全部组件
// 引入所有组件
import Vue from 'vue'; 
import Mint from 'mint-ui'; 
Vue.use(Mint);
 
5640239-2bf6ef23396344b5.png
 

8：在App.vue中写代码

 
5640239-882a7ff4585e971b.png
  
<template>
 <div id="app">
 <mt-button @click.native="handleClick">按钮</mt-button>
</div>
</template>
 
<script>
export default{
 el: '#app',
 methods: {
  handleClick: function() {
   this.$toast('Hello world!');
  }
 }
}
</script>
 
<style>
</style>

9：再次运行，组件中的效果以下：

输入命令：

npm run dev

在浏览器里面，咱们能够看到
http://localhost:8080/#/
demo内容显示以下：

 
5640239-af2431c19c1135dc.png
 

 
5640239-a322c70fe89c2aec.png
 

Vue移动端框架Mint UI教程-底部导航栏（二）

接着上一篇：Vue移动端框架Mint UI教程-搭建环境引入框架，开始来写代码：

1：在components里面新建一个vue文件，将底部的Tab抽取出来成为一个组件使用。


 
5640239-b842505cf389900c.png
 

2：app.vue代码
打开app.vue，引入组件，写相关代码

<script>
  import Footer from './components/FooterBar.vue'
  export default {
    name: 'app',
    components: {
      'footer-bar': Footer
    },
    computed: {}
  }
</script>
 
5640239-7d98ecb6f6dfc3f7.png
 

3：在pages里面新建三个页面
接下来就是编写三个tabbar对应的 路由出口界面，而且配置到路由对象中。（main.vue,my.vue,tool.vue）


 
5640239-668bd444b6b8b300.png
 

4：打开index.js文件
将这三个界面配置到router文件夹下的index.js中去：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../pages/main.vue'
import Tool from '../pages/tool.vue'

import My from '../pages/my.vue'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/", component: Main
    },
    {
      path: '/main', component: Main
    }, {
      path: '/tool', component: Tool
    }, {
      path: '/my', component: My
    }
  ]
})
 
5640239-199553fd69845ea7.png
 

5：接着咱们修改项目的main.js文件，将路由和其余组件也都引入进来使用。
没有则不须要

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.config.productionTip = false

// 引入所有组件 

Vue.use(Mint);

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})
 
5640239-e9ebf3026a5790d5.png
 

6：代码写好以后，来查看一下效果，嗯，底部导航栏完成


 
5640239-e93e2a1319fd7fbb.gif
 

Vue移动端框架Mint UI教程-组件的使用（三）

前面两节说到，从搭建环境，引入Mint框架，到实现一个页面导航跳转；
而后就是开始写每一个页面的代码，Mint UI存在必有道理，基于vue2.0mint-ui组件的使用


 
5640239-a4b08d3733184bd1.png
 
 
5640239-893430196c1bdff2.png
  
<template>
  <div>
    <gheader :examplename="examplename"></gheader>
    <ul>
      <li><mt-button size="large" @click="ToastA">默认Toast</mt-button></li>
      <li><mt-button size="large" @click="ToastB">带Icon标志的Toast</mt-button></li>
      <li><mt-button size="large" @click="ToastC">自定义位置Toast</mt-button></li>
    </ul> 
    <gfooter></gfooter> 
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
  name: 'Toast',
  data(){
    return {
      examplename: "Toast"
    }
  },
  mounted(){

  },
  methods:{
    ToastA(){
      Toast('默认Toast');
    },
    ToastB(){
      Toast({
        message: '操做成功',
        iconClass: 'fa fa-check fa-2x'
      });
    },
    ToastC(){
      Toast({
        message: '自定义位置',
        position: 'bottom',
        duration: 5000
      });
    }
  }
}
</script>
<style scoped>
  ul {
    padding-left: 10px;
    padding-top: 20px;
    padding-right: 10px;
  }
  li {
    margin: 20px 0;
   list-style: none;
  }
</style>

效果以下：

 
5640239-3fe93ff5d33fb0e6.png
 

Vue移动端框架Mint UI教程-跳转新页面(四)

前三节写了vue的移动端框架的入门篇章，今天接着写，今天写的教程其实很简单，在以前的基础上，新建一个界面，而且进行跳转新页面。

1：首先，在pages底下新建一个新的页面fa.vue


 
5640239-d9be015f8d214667.png
 

在页面里面写一些代码

<template>
  <div id="index">
    我是新页面
  </div>
</template>
<style scoped>
  #index{
    display: flex;
    justify-content: center;
    margin-top: 100px;
  }
</style>
<script>
  export default{}
</script>

2：打开index.js文件
将这个新的界面配置到router文件夹下的index.js中去：

import Fa from '../pages/fa.vue'
{
      path: '/fa', component: Fa
  }
 
5640239-8e6b08302c8e166d.png
 

3：在当前的页面里面写跳转方法

<li><mt-button size="large" @click="go">测试跳转</mt-button></li>

methods: {
go() {
this.$router.push('/fa');//要跳转的界面
},}
 
5640239-5f0331fa1b3261e7.png
 

4：点击测试：能够看到实现的效果。


 
5640239-4fde1f70dce9db43.gif
 

Vue移动端框架Mint UI教程-调用模拟json数据(五)
1：安装
npm install vue-resource

 
5640239-9ae54979c8e2a605.png
 
 
5640239-dcf32513703a4934.png
 

2：打开main.js
注册

import VueResource from 'vue-resource'
Vue.use(VueResource)
 
5640239-51a314d6f4bec268.png
 

3：在项目里面建立一个json文件

 
5640239-b805a86f48192dd0.png
 

4：json文件的内容

{
    "seller": {
        "name": "我是王小婷",
        "description": "前端开发工程师",
        "supports": [
            {
                "type": 0,
                "description": "日更博客打卡"
            }, {
                "type": 1,
                "description": "90后前端妹子"
            }
        ]
    }
}

5：打开build文件底下的webpack.dev.conf.js
写入代码

const express = require('express') 
const app = express() 
var appData = require('../data.json') //加载本地数据文件 
var seller = appData.seller //获取对应的本地数据 
var goods = appData.goods 
var ratings = appData.ratings 
var apiRoutes = express.Router() 
app.use('/api', apiRoutes)
 
5640239-6f6deff78e24e096.png
 

找到 devServer: {}，写入如下代码

before(app) { app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
      }),
 
5640239-cc0f80eb9f4eef30.png
 

6：OK，这个时候，能够在浏览器输入咱们的服务接口
http://localhost:8080/api/seller
是能够看到json文件的数据格式的

 
5640239-0dc2263f27285a09.png
 

 

7:如今要在控制台查看，在当前要查看的页面写出代码

created () { this.$http.get('http://localhost:8080/api/seller').then((response) => {
         console.log(response)
       })
     }
 
5640239-6290f8e368f0fbc4.png
 

8：npm run dev 运行项目


 
5640239-57561b445b4d723f.png
 

9：在浏览器里面输入http://localhost:8080
打开项目
注意8080端口要和my.vue里面打印的端口保持一致
调出控制台，能够看见，接口数据已经显示在控制台了

 
5640239-1b05ac8093038a61.png
 

 

10：接口数据怎么显示在界面
请看下一章

Vue移动端框架Mint UI教程-数据渲染到页面（六）
1：接上一节，打开my.vue界面，编写代码


 
5640239-901903d05969b3ce.png
 

拿到res.data以后，要赋值给page实例里面的data
因此在data里面设置一个默认的空数组


 
5640239-4e93e51ef2b28005.png
 

2：响应正确的时候回调，把数据存放到data中


 
5640239-b055601a77065e1f.png
 

3：数据渲染


 
5640239-866698537e61e6ce.png
 

json数据


 
5640239-b2a7503aecd3b774.png
 

4：在页面显示以下


 
5640239-6a202ca0be7ac1da.png
 

Vue移动端框架Mint UI教程-接口跨域问题（七）

本身写了一个json数据，放在服务器上，如今要经过vue项目调用数据

http://www.intmote.com/test.json

 
5640239-904629a473035c81.png
 

 

我如今要调用

在调用接口数据的时候的时候
会出现这样的报错

Access to XMLHttpRequest at 'http://www.intmote.com/test.json' from origin
'http://localhost:8080' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.
 
5640239-fade0683ffe1f990.png
 

这个时候，是遇到了跨域的问题； 因为接口跨域问题，所以不能直接经过ajax请求访问

查看本身的代码，直接把json接口写在请求里


 
5640239-59122398635bba6d.png
图片.png

解决办法：设置代理，利用proxyTable属性实现跨域请求

1：打开build/webpack.dev.conf.js，配置代理proxyTable属性以下：经过vue-cli提供给的代理（proxy）进行配置便可，

proxyTable: {
  '/api': {
    target: 'http://www.intmote.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''  
    }
  }
},
 
5640239-5cf44ff21b2a5895.png
图片.png

2：回到当前页面,个人页面是my.vue,修改请求路径

created() {
            this.$http.get('/api/test.json').then((response) => {

                console.log(response.data)
                //响应正确回调
                this.nameList = response.body; //把数据存放到data中
            })
        },
 
5640239-f11a802f617d62c8.png
 

3：从新启动项目

 
5640239-e7dbc3b162330728.png
 

4：这个时候能够看到，跨域问题解决
json里面的数据也显示在了页面里面

 
5640239-38dbcc01e3eb21c1.png
 

以上教程的demo:
github访问连接：https://github.com/wangxiaoting666/mint-demo

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程