Vue.js 学习11 Mint UI基于Vue2.0的组件库

来源：互联网发布：侠客风云传优化工具编辑：程序博客网时间：2024/06/11 00:06

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

安装

npm install -g vue-clivue init webpack projectname

修改main.js

import Vue from 'vue'import MintUI from 'mint-ui'import 'mint-ui/lib/style.css'import App from './App.vue'Vue.use(MintUI)new Vue({  el: '#app',  components: { App }})

npm installnpm run devnpm run build

另外，Vue-router资料参见这里
https://router.vuejs.org/zh-cn/essentials/getting-started.html

示例：

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <title>Mint UI</title>    <link rel="stylesheet" href="//at.alicdn.com/t/font_1469597443_9221172.css">    <link href="assets/mint-ui/lib/style.css" rel="stylesheet"></head>  <body>    <!-- <script src="//unpkg.com/fastclick@1.0.6/lib/fastclick.js"></script> -->    <!-- <script type="text/javascript" src="/mint-ui/app.2ecb6ef.js"></script></body> -->    <div id="app">      <mt-button @click.native="handleClick">按钮</mt-button>    </div>  </body>  <!-- 先引入 Vue --> <script src="assets/vue.js"></script> <script src="assets/vue-router.js"></script> <!-- 引入组件库 --> <script src="assets/mint-ui/index.js"></script> <script>   new Vue({     el: '#app',     methods: {       handleClick: function() {         this.$toast('Hello world!')       }     }   }) </script></html>

阅读全文

0 0