zant v0.0.2
zant
A Vue.js 2.0 UI Toolkit for Web.
Install
npm install zant --save
Import zant
You can import zant entirely, or just import what you need. Let's start with fully import.
Fully import
import zant in the entry file (main.js as usual) of webpack:
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import Zant from 'zant'; // imports zant entirely
import 'zant/dist/zant.css'; // imports zant entirely. Note that CSS file needs to be imported separately.
Vue.use(VueRouter);
Vue.use(Zant);
// The routing configuration
const RouterConfig = {
routes: Routers
};
const router = new VueRouter(RouterConfig);
new Vue({
el: '#app',
router: router,
render: h => h(App)
});
The above imports zant entirely. Note that CSS file needs to be imported separately.
Import on demand(Recommended)
With the help of babel-plugin-import, we can import components we actually need, making the project smaller than otherwise.
First, install babel-plugin-component:
npm install babel-plugin-import --save-dev
Edit .babelrc to integrate babel-plugin-import.
{
"plugins": [
["import", { "libraryName": "zant", "libraryDirectory": "src/components", "style": true }]
]
}
Since component styles are written in less, you need to install less and less-loader, which helps to customize the theme.
npm install less less-loader --save-dev
Finally, you only need to import modules from zant, so you don't need to introduce styles separately.
// babel-plugin-import will help you to load JS and CSS
import { Affix } from 'zant';
The above way is equivalent to the manual way introduced below.
import Affix from 'zant/src/components/affix'; // load JS
import 'zant/src/components/affix/style'; // load LESS