We need to have a Vue.js environment, to be installed in advance, students who need it. I mentioned it in my last blog.
HeyUI reference documentation: https://www.heyui.top/component/quickstart
-
Support environment
Modern browser and IE9 and above.
-
compatible
HeyUI supports Vue.js 2.x version
installation steps:
-
Install heyui
cnpm install heyui --save-dev -
Install less
cnpm install less --save-dev -
Install less-loader
cnmp install less-loader --save-dev
注：Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。 Is a necessity
After the installation needs to be used, we will configure it globally.
- Style reference in the global
main.jsLane
// main.js
// 引入 HeyUI
import HeyUI from 'heyui'
vue.use(HeyUI)
// 导入 css 和 js 样式，全局
require("heyui/themes/index.css");
import "heyui/themes/index.less";
- At the same time, HeyUI can also be set as a global reference, because HeyUI has Message, Loadding and other global methods that can be called.
new Vue({
el: '#app',
router,
render: h => h(App), // 新增
components: { App },
template: '<App/>'
});
We can also use it on demand
By means of plug-in babel-plugin-importmay be achieved on demand loading assembly, to reduce the file size.
npm install babel-plugin-import --save-dev
Just choose a style and copy the code.
You can see that the effect is achieved, and how to operate it or watch it, the official document.
HeyUI also has a powerful admin, connect to the reference document: https://heyui.github.io/heyui-admin-docs/
