Mint UI入门系列教程

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

官网：https://mint-ui.github.io/#!/zh-cn Github: https://github.com/ElemeFE/mint-ui/ 今天具体说一说比较常用的；Mint UI框架的按钮组件，Mint UI是 饿了么团队开发基于vue .js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要

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

5640239-a687e02083fdc125 image

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

代码语言：javascript复制输入命令： node -v5640239-075d348454599e48 image

3：安装淘宝npm镜像由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.

淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

代码语言：javascript复制输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org5640239-3a5d06d80bc5e4cb4：安装全局vue-cli脚手架淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，输入命令：cnpm install --global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；

代码语言：javascript复制输入命令：cnpm install --global vue-cli5640239-7cc6d92afcb6c6ee5：开始进入主题，初始化一个vue项目我这里是在d盘里面新建一个项目，先用d:的命令，回车键进入d盘；回车键默认创建项目信息。

代码语言：javascript复制vue init webpack mint5640239-f2d5199d33842270.png出现这样的提示，初始化成功

5640239-a852b9f569febc5c.png打开d盘，可以看到刚才初始化的项目

5640239-9e9f82c6d0038301.png运行初始化demo，输入命令npm run dev；运行一下初始后的demo，弹出访问地址，如果没有问题则进行安装Mint UI；准备好好之后，开始引入饿了么Mint UI组件。

代码语言：javascript复制cd mint

npm run dev5640239-b26cd03f633c4cc9.png5640239-965bdd61ecb33eea.png5640239-f699cf0c4deb6b6a.png6：安装 Mint UI代码语言：javascript复制npm install mint-ui -S快捷键ctrl+c,终止批处理操 作吗(Y/N)，从上一步退出来，再输入命令npm install mint-ui -S

成功安装组件显示如下

5640239-854a722b695bb20f.png7：然后在项目中的main.js文件引入所有组件代码语言：javascript复制 // 引入全部组件

import Vue from 'vue';

import Mint from 'mint-ui';

Vue.use(Mint); 5640239-2bf6ef23396344b5.png8：在App.vue中写代码5640239-882a7ff4585e971b.png代码语言：javascript复制

9：再次运行，组件中的效果如下：输入命令：

代码语言：javascript复制npm run dev在浏览器里面，我们可以看到

http://localhost:8080/#/

demo内容显示如下：

5640239-af2431c19c1135dc.png5640239-a322c70fe89c2aec.pngVue移动端框架Mint UI教程-底部导航栏（二）

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

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

5640239-b842505cf389900c.png2：app.vue代码

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

代码语言：javascript复制5640239-7d98ecb6f6dfc3f7.png3：在pages里面新建三个页面

接下来就是编写三个tabbar对应的 路由出口界面，并且配置到路由对象中。（main.vue,my.vue,tool.vue）

5640239-668bd444b6b8b300.png4：打开index.js文件

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

代码语言：javascript复制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.png5：接着我们修改项目的main.js文件，将路由和其他组件也都引入进来使用。

没有则不需要

代码语言：javascript复制// 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: ''

})5640239-e9ebf3026a5790d5.png6：代码写好之后，来查看一下效果，嗯，底部导航栏完成

5640239-e93e2a1319fd7fbb.gifVue移动端框架Mint UI教程-组件的使用（三）

前面两节说到，从搭建环境，引入Mint框架，到实现一个页面导航跳转；

然后就是开始写每个页面的代码，Mint UI存在必有道理，基于vue2.0mint-ui组件的使用

5640239-a4b08d3733184bd1.png5640239-893430196c1bdff2.png代码语言：javascript复制

效果如下：

5640239-3fe93ff5d33fb0e6.pngVue移动端框架Mint UI教程-跳转新页面(四)

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

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

5640239-d9be015f8d214667.png在页面里面写一些代码

代码语言：javascript复制

2：打开index.js文件

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

代码语言：javascript复制import Fa from '../pages/fa.vue'

{

path: '/fa', component: Fa

}5640239-8e6b08302c8e166d.png3：在当前的页面里面写跳转方法

代码语言：javascript复制

测试跳转

methods: {

go() {

this.$router.push('/fa');//要跳转的界面

},}5640239-5f0331fa1b3261e7.png4：点击测试：可以看到实现的效果。

5640239-4fde1f70dce9db43.gifVue移动端框架Mint UI教程-调用模拟json数据(五)

1：安装

npm install vue-resource

5640239-9ae54979c8e2a605.png5640239-dcf32513703a4934.png2：打开main.js

注册

代码语言：javascript复制import VueResource from 'vue-resource'

Vue.use(VueResource)5640239-51a314d6f4bec268.png3：在项目里面创建一个json文件

5640239-b805a86f48192dd0.png4：json文件的内容

代码语言：javascript复制{

"seller": {

"name": "我是王小婷",

"description": "前端开发工程师",

"supports": [

{

"type": 0,

"description": "日更博客打卡"

}, {

"type": 1,

"description": "90后前端妹子"

}

]

}

}5：打开build文件底下的webpack.dev.conf.js

写入代码

代码语言：javascript复制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: {}，写入以下代码

代码语言：javascript复制before(app) { app.get('/api/seller', (req, res) => {

res.json({

errno: 0,

data: seller

})//接口返回json数据，上面配置的数据seller就赋值给data请求后调用

}),5640239-cc0f80eb9f4eef30.png6：OK，这个时候，可以在浏览器输入我们的服务接口

http://localhost:8080/api/seller

是可以看到json文件的数据格式的

5640239-0dc2263f27285a09.png7:现在要在控制台查看，在当前要查看的页面写出代码

代码语言：javascript复制 created () { this.$http.get('http://localhost:8080/api/seller').then((response) => {

console.log(response)

})

}5640239-6290f8e368f0fbc4.png8：npm run dev 运行项目

5640239-57561b445b4d723f.png9：在浏览器里面输入http://localhost:8080

打开项目

注意8080端口要和my.vue里面打印的端口保持一致

调出控制台，可以看见，接口数据已经显示在控制台了

5640239-1b05ac8093038a61.png10：接口数据怎么显示在界面

请看下一章

Vue移动端框架Mint UI教程-数据渲染到页面（六）

1：接上一节，打开my.vue界面，编写代码

5640239-901903d05969b3ce.png拿到res.data之后，要赋值给page实例里面的data

所以在data里面设置一个默认的空数组

5640239-4e93e51ef2b28005.png2：响应正确的时候回调，把数据存放到data中

5640239-b055601a77065e1f.png3：数据渲染

5640239-866698537e61e6ce.pngjson数据

5640239-b2a7503aecd3b774.png4：在页面显示如下

5640239-6a202ca0be7ac1da.pngVue移动端框架Mint UI教程-接口跨域问题（七）

自己写了一个json数据，放在服务器上，现在要通过vue项目调用数据

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

5640239-904629a473035c81.png我现在要调用

在调用接口数据的时候的时候

会出现这样的报错

代码语言：javascript复制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）进行配置即可，

代码语言：javascript复制proxyTable: {

'/api': {

target: 'http://www.intmote.com',

changeOrigin: true,

pathRewrite: {

'^/api': ''

}

}

},5640239-5cf44ff21b2a5895.png 图片.png

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

代码语言：javascript复制created() {

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

console.log(response.data)

//响应正确回调

this.nameList = response.body; //把数据存放到data中

})

},5640239-f11a802f617d62c8.png3：重新启动项目

5640239-e7dbc3b162330728.png4：这个时候可以看到，跨域问题解决

json里面的数据也显示在了页面里面

5640239-38dbcc01e3eb21c1.png以上教程的demo:

github访问链接：https://github.com/wangxiaoting666/mint-demo

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。

坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题