HeyUIを使用した簡単なインストール

Vue.js環境が必要です。事前にインストールしておく必要があります。私は前回のブログでそれを述べました。

HeyUIリファレンスドキュメント:https://www.heyui.top/component/quickstart

  • サポート環境

    最新のブラウザとIE9以上。

  • 対応

    HeyUIはVue.js 2.xバージョンをサポートしています

インストール手順:

  • heyuiをインストールする

    cnpm install heyui --save-dev
    
  • 少ないインストール

    cnpm install less --save-dev
    
  • ローダーを減らす

    cnmp install less-loader --save-dev
    

注:Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。 必要です

インストールを使用する必要がある場合は、グローバルに構成します。

  • グローバルでのスタイル参照main.jsレーン
// main.js

// 引入 HeyUI
import HeyUI from 'heyui'
vue.use(HeyUI)

// 导入 css 和 js 样式,全局
require("heyui/themes/index.css");
import "heyui/themes/index.less";
  • 同時に、HeyUIにはMessage、Loadding、およびその他の呼び出し可能なグローバルメソッドがあるため、HeyUIをグローバル参照として設定することもできます。
new Vue({
  el: '#app',
  router,
  render: h => h(App),      // 新增
  components: { App },
  template: '<App/>'
});

オンデマンドでも使用できます

プラグインによって、babel-plugin-importファイルサイズを小さくするために、アセンブリ需要負荷に達成することができます。

npm install babel-plugin-import --save-dev

スタイルを選択してコードをコピーするだけです。

ここに画像の説明を挿入

ここに画像の説明を挿入

効果が出ているのがわかり、操作方法や見方、公式ドキュメントがわかります。

HeyUIには強力な管理者もいます。参照ドキュメントに接続してください:https ://heyui.github.io/heyui-admin-docs/

125件の元の記事を公開 260のような 120,000以上の訪問

おすすめ

転載: blog.csdn.net/weixin_44685869/article/details/105463086