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教程