1、先建立好项目,项目结构参考上一个文章。
2、cmd进入项目,安装muse-ui
npm install --save muse-ui
3、编辑page下content.vue,随便在muse官网上的组件教程代码,以下是table实例
<template>
<div>
<mu-raised-button label="unselect" @click="unselect"/>
<mu-table multiSelectable enableSelectAll ref="table">
<mu-thead>
<mu-tr>
<mu-th>ID</mu-th>
<mu-th>Name</mu-th>
<mu-th>Status</mu-th>
</mu-tr>
</mu-thead>
<mu-tbody>
<mu-tr>
<mu-td>1</mu-td>
<mu-td>John Smith</mu-td>
<mu-td>Employed</mu-td>
</mu-tr>
<mu-tr>
<mu-td>2</mu-td>
<mu-td>Randal White</mu-td>
<mu-td>Unemployed</mu-td>
</mu-tr>
<mu-tr>
<mu-td>3</mu-td>
<mu-td>Stephanie Sanders</mu-td>
<mu-td>Employed</mu-td>
</mu-tr>
<mu-tr>
<mu-td>4</mu-td>
<mu-td>Steve Brown</mu-td>
<mu-td>Employed</mu-td>
</mu-tr>
</mu-tbody>
</mu-table>
</div>
</template>
<script>
import Vue from 'vue'
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
Vue.use(MuseUI)
export default {
methods: {
unselect () {
this.$refs.table.unSelectAll()
}
}
}
</script>
4、运行
npm run dev