sun-rice
Mobile UI elements for Vue 2.0
Demo
Tutorial
点击查看使用教程
Usage
CDN 方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sun-rice example</title>
<!-- import Vue.js -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- import stylesheet -->
<link rel="stylesheet" href="//unpkg.com/sun-rice/dist/sun-rice.css">
<!-- import sun-rice -->
<script src="//unpkg.com/sun-rice/dist/sun-rice.umd.min.js"></script></head>
<body>
<div id="app">
<s-button type="default" @click="onClick">Click me!</s-button>
</div>
<script>
new Vue({
el: '#app',
methods: {
onClick() {
this.$dialog.alert({
message: '欢迎使用sun-rice ^_^'
})
}
}
})
</script>
</body>
</html>npm 方式：
npm i sun-rice -SImport all components.
import Vue from 'vue'
import SunRice from 'sun-rice'
import 'sun-rice/dist/sun-rice.css'
Vue.use(SunRice)Or import specified component. (Use babel-plugin-component)
import { SunCell } from 'sun-rice'
Vue.component(SunCell.name, SunCell)babel-plugin-component
- Auto import css file
- Modular import component
Installation
npm i babel-plugin-component -DUsage
.babelrc
{
"plugins": [
"other-plugin",
["component", [{ "libraryName": "sun-rice", "style": true }]]
]
}Development
npm run devContribution
Please make sure to read the Contributing Guide before making a pull request.