AmazeUI components built with vue.js
已弃坑！AmazeUI 已经过时了！所有的 UI 框架都过时了！组件化才是未来！
我打算对这个项目进行一次大升级：不再是简单的封装 AmazeUI 的 HTML 结构，而是把 AmazeUI 的样式也封装进来，并且提供完全不依赖于 jQuery 的官方插件的组件化形式。
以下是接下来的版本（0.4.x）可能会做的事情：
- 封装 AmazeUI 的样式和 HTML 结构（可能会做一些修改）为 Vue 组件
- AmazeUI 官方插件进行 Vue 组件化
- 提供非官方的个性化组件 😉
npm install amazeui-vue
It's recommended to use vuejs + webpack + amazeui-vue !
The build-all-in-one file is in the 'dist' folder.
<body>
<!-- hello world -->
<!-- remember to add vue.js lib and amazeui styles -->
<link rel="stylesheet" href="path/to/amazeui.css">
<script src="path/to/vue.js"></script>
<!-- include amazeui-vue -->
<script src="path/to/amazeui-vue.js"></script>
<script>
// important !!! remember to use amazeui as a vuejs plugin
Vue.use(amazeuiVue);
// now you can use it as you like
</script>
</body>This repository is built to use Amaze UI as Vue.js components, without jQuery requirement.
If you are not familiar with vue.js, you can learn from the vue.js official site.
If you want to use the react version, you can find it here, it's developed by the amazeui team.
- vue.js ^1.0.7
Vue.js 1.0.0 is released! Amazeui-vue now requires vue.js@^1.0. If you are upgrading your vue.js project to 1.0 version from 0.12, this article may help you learn some important changes.
New
Now amazeui-vue use webpack-dev-server to run the examples.What you need to do is just npm run dev and then open your favourite browser and access http://localhost:9999.
And hot-reload is support too.
gridcolumncontaineramButtonbuttonGroupamFormamInputcheckboxradioamSelectpanellistmodalalertconfirmprompticonbadgepaginationarticletabtopbar
dateTimePickerslidernprogress
You must register the components before you can use amazeui-vue.
You can register the components globally or locally:vue.js: using components
amazeui-vue exports an install function so taht you can register it as a plugin for vue.js. You can do it like this:
Vue.use(require('amazeui-vue').install);and then amazeui-vue components will be registered globally, and they will be load synchronously.
If you want to use amazeui-vue as asyn components, use the install-async function:
Vue.use(require('amazeui-vue').installAsync);sync
import amButton from 'amazeui-vue/src/button/am-button.vue'; // you may need babel-loader to do it like this
// or
// var amButton = require('amazeui-vue').button;
// ...
export default {
components: {
"amButton": amButton
}
}async (with webpack)
export default {
components: {
"amButton": function(resolve) {
require(['amazeui-vue/src/button/am-button.vue'], resolve)
}
}
}