Vue 初学随笔（2）-elemnet-UI

使用element-ui

先安装环境

npm install element-ui -S

在main.js 载入element-ui 样式

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。按照引入 Element 的方式，具体操作如下：

import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });

为了减少项目体积 element-ui 可以按需引用！！可以查看详细的api文档

 Element-UI

1.加载本地图片失败，不能直接给路径，需要require

url: require('./image/logo.jpeg'),

element 导航栏el-menu router 页面传参

<el-menu
                style="border-bottom:0;"
                class="el-menu-demo flex"
                mode="horizontal"
                text-color="#fff"
                background-color="#018b43"
                active-text-color="#ea0c20"
                router //这里
                :default-active="$route.path" // 这里
              >
<el-menu-item
                  v-for="item in items"
                  :key="item.id"
                  :index="item.url"  // 这里
    >
        <span slot="title">{{ item.name }}</span>
 </el-menu-item>

如果需要传参数

<el-menu-item
                  v-for="item in items"
                  :key="item.id"
                  :index="item.url"
                  :route="{ path: item.url, query: { name: item.id } }" // 这里是加的
                >
                  <span slot="title">{{ item.name }}</span>
                </el-menu-item>