0
点赞
收藏
分享

微信扫一扫

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

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

安装

npm install -g vue-cli
vue 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 install
npm run dev
npm 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 条评论