ElementUI的使用

一、安裝

1、安裝

在項目目錄下執行

npm i element-ui -S

2、引入

在 main.js 中寫入以下內容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; #樣式文件單獨引入

Vue.use(ElementUI); #全局注冊

#ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf

此時需要在配置文件webpack.config.js中將缺少的文件后綴名補全
 test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'

二、使用

現在假設引入一個導航欄，在Vheader組件中引入導航欄代碼

<template>

    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">公司介紹</el-menu-item>
      <el-menu-item index="3" >產品管理</el-menu-item>
      <el-menu-item index="4"><a href="" target="_blank">公司文化</a></el-menu-item>
    </el-menu>

</template>

<script>
    export default {
        name: "Vheader",
      data:function () {
        return {
          // activeIndex: '1',
          activeIndex2: '3' //標題下變顏色
        }
      },

      methods:{
          //在當前組件內調用

        }
      ,

      computed:{
        //在在當前組件內調用
      }

    }
</script>

<style scoped>
  /*設置scoped，只對當前組件樣式起作用*/

</style>

此時頁面就可以顯示引入的導航了：