首页 > 其他 > 详细

MintUi使用

时间:2019-12-09 14:25:49      阅读:77      评论:0      收藏:0      [点我收藏+]

官网地址:http://mint-ui.github.io/#!/zh-cn

中文文档:http://mint-ui.github.io/docs/#/zh-cn2

 示例展示:http://elemefe.github.io/mint-ui/#/

 如何引入vue2项目:

在public的index.html页面,用CDN的形式引入,这样可以减少vendor包的体积,当然如果不介意可以安装在本地

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <!-- MintUI -->
    <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
  </head>
  <style>
    *{
      list-style: none;
      margin:0;
      padding:0;
      text-decoration: none;
    }
    p{
      margin:0;
    }
  </style>
  <body>
    <noscript>
      <strong>We‘re sorry but officialwebsite doesn‘t work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- vue -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <!-- axios -->
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
    <!-- vuex -->
    <script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
    <!-- vue-router -->
    <script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.min.js"></script>
    <!-- MintUI -->
    <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
    <!-- jquery -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  </body>
</html>

然后再vue.config.js中配置中修改如下:

    externals: {
        ‘vue‘: ‘Vue‘,
        ‘vuex‘: ‘Vuex‘,
        ‘vue-router‘: ‘VueRouter‘,
        ‘mint-ui‘: ‘MINT‘,
        ‘Axios‘:‘axios‘
      }

修改main.js  (注释)

技术分享图片

 

 修改store.js (注释)

// import Vue from "vue";
// import Vuex from "vuex";
// Vue.use(Vuex);

修改router.js  (注释)

// import Vue from "vue";
import Router from "vue-router";
// Vue.use(Router);

如果之前安装了vue、vuex等上面通过cdn引入的文件,现在再package.json中删除对应字段,重新npm insatll安装一下,这样可以批量去掉不需要的依赖包。

之后运行一下,看看项目是否正常,看看MintUI是否成功引入

技术分享图片

 

 运行后显示的页面:

技术分享图片

 

 ok,到此vue项目中引入MintUI完毕!!如果只是引入MintUI只需要对应的把MintUI相关的做一下调整就可!!!

 

 

 

 

 

MintUi使用

原文:https://www.cnblogs.com/fqh123/p/12009989.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!