npm install phoon-ui --save-dev
Get the latest version fromunpkg.com/phoon-ui and import JavaScript and CSS file in your page.
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/phoon-ui/lib/theme-chalk/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/phoon-ui/lib/index.js"></script>
You can import Phoon entirely, or just import what you need. Let's start with fully import.
import Vue from 'vue';
import PhoonUI from 'phoon-ui';
import 'phoon-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(PhoonUI);
new Vue({
el: '#app',
render: h => h(App)
});
The above imports Phoon entirely. Note that CSS file needs to be imported separately.
With the help of babel-plugin-component, we can import components we actually need, making the project smaller than otherwise.
First, install babel-plugin-component
:
npm install babel-plugin-component -D
Then edit .babelrc:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "phoon-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
Next, if you need Button , edit main.js
:
import Vue from 'vue';
import { Button, Select } from 'phoon-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
/* or
* Vue.use(Button)
*/
new Vue({
el: '#app',
render: h => h(App)
});
Full example (Component list reference components.json)
IE / Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
IE9, IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Detailed changes for each release are documented in the notes
We have collected some questions