Precisamos ter um ambiente Vue.js, para ser instalado com antecedência, estudantes que precisam dele. Eu mencionei isso no meu último blog.
Documentação de referência HeyUI: https://www.heyui.top/component/quickstart
-
Ambiente de suporte
Navegador moderno e IE9 e superior.
-
Compatível
HeyUI suporta a versão Vue.js 2.x
Etapas de instalação:
-
Instale heyui
cnpm install heyui --save-dev -
Instale menos
cnpm install less --save-dev -
Instale menos carregador
cnmp install less-loader --save-dev
注：Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。 É uma necessidade
Depois que a instalação precisar ser usada, iremos configurá-la globalmente.
- Estilo de referência no mundial
main.jspista
// main.js
// 引入 HeyUI
import HeyUI from 'heyui'
vue.use(HeyUI)
// 导入 css 和 js 样式，全局
require("heyui/themes/index.css");
import "heyui/themes/index.less";
- Ao mesmo tempo, o HeyUI também pode ser definido como uma referência global, porque o HeyUI possui Message, Loadding e outros métodos globais que podem ser chamados.
new Vue({
el: '#app',
router,
render: h => h(App), // 新增
components: { App },
template: '<App/>'
});
Também podemos usá-lo sob demanda
Por meio de encaixe babel-plugin-importpode ser obtida aquando do carregamento demanda de montagem, para reduzir o tamanho do ficheiro.
npm install babel-plugin-import --save-dev
Basta escolher um estilo e copiar o código.
Você pode ver que o efeito é alcançado e como operá-lo ou observá-lo, o documento oficial.
HeyUI também tem um administrador poderoso, conecte-se ao documento de referência: https://heyui.github.io/heyui-admin-docs/
