ホームページ > 記事 > ウェブフロントエンド > vue プロジェクトへの elementUI コンポーネントの導入の詳細な説明
この記事では、vue プロジェクトに elementUI コンポーネントを導入する方法を主に詳しく紹介します。編集者がそれを共有し、参考にします。エディターをフォローして見てみましょう
前提条件: Vue がインストールされています
vue を初期化します
vue init webpack itemname
初期デモを実行します
初期デモを実行します 問題がなければ、elementUI をインストールします
npm run dev
elementUI をインストールします
npm i element-ui -S
elementUIを導入します
main.jsにelementUIを導入しますimport ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
Test
テストしてみましょうheader.vueファイルを作成し、ElementUIコードの一部をコピーします<template> <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> </el-submenu> <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> </el-menu> </template> <script> export default { data() { return { activeIndex: '1', activeIndex2: '1' }; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); } } } </script>App.vue ヘッダーを導入します。 vue
<template> <p id="app"> <Header></Header> </p> </template> <script> import Header from './pages/header.vue' export default { components:{ Header, } } </script> <style> </style>効果: 以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。 関連記事:
jQueryでliタグを動的に追加し、属性を追加してイベントメソッドをバインドする方法
elementUIを使用してVueでカスタムテーマメソッドを実装する
以上がvue プロジェクトへの elementUI コンポーネントの導入の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。