Mint UI搭建环境

ゝ一纸荒年。 2022-01-29 08:43 229阅读 0赞

--------------------

*  官网：[https://mint-ui.github.io/\#!/zh-cn][https_mint-ui.github.io_zh-cn]
 *  Github: [https://github.com/ElemeFE/mint-ui/][https_github.com_ElemeFE_mint-ui]

--------------------

今天具体说一说比较常用的；Mint UI框架的按钮组件，Mint UI是 饿了么团队开发基于vue .js的移动端UI框架，它包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要

--------------------

![1240][]

### 1：安装node ###

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

![image][]

### 2：查看node的版本号 ###

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

输入命令： node -v

![image][image 1]

### 3：安装淘宝npm镜像 ###

由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.  
淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

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

![1240 1][]

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

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

输入命令：cnpm install --global vue-cli

![1240 2][]

\#\#\#\#5：开始进入主题，初始化一个vue项目  
我这里是在d盘里面新建一个项目，先用`d:`的命令，回车键进入d盘；回车键默认创建项目信息。

vue init webpack mint

![1240 3][]

出现这样的提示，初始化成功  
![1240 4][]

打开d盘，可以看到刚才初始化的项目  
![1240 5][]

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

cd mint
    npm run dev

![1240 6][]

![1240 7][]

![1240 8][]

\#\#\#\#6：安装 Mint UI

npm install mint-ui -S

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

\#\#\#\#\#7：然后在项目中的main.js文件引入所有组件

// 引入全部组件
    import Vue from 'vue'; 
    import Mint from 'mint-ui'; 
    Vue.use(Mint);

![1240 10][]

\#\#\#\#8：在App.vue中写代码

![1240 11][]

<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/\#/][http_localhost_8080]  
demo内容显示如下：

![1240 12][]  
![1240 13][]

\#\#\#\#Mint UI教程汇总：  
Vue移动端框架Mint UI教程-搭建环境引入框架（一）  
[https://www.jianshu.com/p/874e5152b3c5][https_www.jianshu.com_p_874e5152b3c5]  
Vue移动端框架Mint UI教程-底部导航栏（二）  
[https://www.jianshu.com/p/56e887cbb660][https_www.jianshu.com_p_56e887cbb660]  
Vue移动端框架Mint UI教程-组件的使用（三）  
[https://www.jianshu.com/p/5ec1e2d2f652][https_www.jianshu.com_p_5ec1e2d2f652]  
Vue移动端框架Mint UI教程-跳转新页面(四)  
[https://www.jianshu.com/p/364d0462ddb6][https_www.jianshu.com_p_364d0462ddb6]  
Vue移动端框架Mint UI教程-调用模拟json数据(五)  
[https://www.jianshu.com/p/6d3f1436b327][https_www.jianshu.com_p_6d3f1436b327]  
Vue移动端框架Mint UI教程-数据渲染到页面（六）  
[https://www.jianshu.com/p/dc532ab82d2a][https_www.jianshu.com_p_dc532ab82d2a]  
Vue移动端框架Mint UI教程-接口跨域问题（七）  
[https://www.jianshu.com/p/b28cd8290b2a][https_www.jianshu.com_p_b28cd8290b2a]

--------------------

> 原文作者：祈澈姑娘关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。

![在这里插入图片描述][20190521155851249.png]

[https_mint-ui.github.io_zh-cn]: https://mint-ui.github.io/#!/zh-cn
[https_github.com_ElemeFE_mint-ui]: https://github.com/ElemeFE/mint-ui/
[1240]: /images/20220129/e1ec8019494946828a14041d1c877b1f.png
[https_nodejs.org_en]: https://nodejs.org/en/
[image]: /images/20220129/5a866c2afc814ab6911cca0432ce17f1.png
[image 1]: /images/20220129/127480d9089547739f965caefaf6e0f6.png
[1240 1]: /images/20220129/64dc9a79a8114d5ea99fa5c98240b7b9.png
[1240 2]: /images/20220129/c8adbca569ac4adb87ad8dfcb7094170.png
[1240 3]: /images/20220129/e7bca6044d334ddf9a2fb5a9925c0599.png
[1240 4]: /images/20220129/4481bdf712294bce807ff82bc1d5ee60.png
[1240 5]: /images/20220129/abaddf9c822f46998ba29a1f3f1525f5.png
[1240 6]: /images/20220129/9abbd62510814094b3d920d689c87a9e.png
[1240 7]: /images/20220129/c1c0020e44684c7981d1b2c6b3b94101.png
[1240 8]: /images/20220129/e551bb3c226d4645b559fd66ea48393e.png
[1240 9]: /images/20220129/510407f9f65f442192924133cbe06468.png
[1240 10]: /images/20220129/1ff3f223d3c641648743ed6bc02221b2.png
[1240 11]: /images/20220129/c6e6c11d62264cd891027f04deb853b5.png
[http_localhost_8080]: http://localhost:8080/#/
[1240 12]: /images/20220129/bbe93255e8dd494fb6be1bcf0dcf92e7.png
[1240 13]: /images/20220129/fa3a6574e1964b57921f683d458b8c3c.png
[https_www.jianshu.com_p_874e5152b3c5]: https://www.jianshu.com/p/874e5152b3c5
[https_www.jianshu.com_p_56e887cbb660]: https://www.jianshu.com/p/56e887cbb660
[https_www.jianshu.com_p_5ec1e2d2f652]: https://www.jianshu.com/p/5ec1e2d2f652
[https_www.jianshu.com_p_364d0462ddb6]: https://www.jianshu.com/p/364d0462ddb6
[https_www.jianshu.com_p_6d3f1436b327]: https://www.jianshu.com/p/6d3f1436b327
[https_www.jianshu.com_p_dc532ab82d2a]: https://www.jianshu.com/p/dc532ab82d2a
[https_www.jianshu.com_p_b28cd8290b2a]: https://www.jianshu.com/p/b28cd8290b2a
[20190521155851249.png]: /images/20220129/d1c39fa148b94369be5f459662eb6106.png