一、介紹

一套Vue.js 2.0 的桌面端UI框架。

二、準備工作

node環境；
安裝全局vue-cli腳手架；
初始化一個vue項目；

vue init webpack vue-element-demo

三、使用步驟

目錄結構

3.1.1 安裝 elementUI

npm install element-ui -S

3.1.2 代碼修改

1 .eslintignore文件中加入了，忽略檢查（正常開發還是要放開的，此處是測試使用，代碼檢查紅字提示太麻煩，就先給忽略了）

*.vue
*.js

2.暫時刪除了路由相關代碼

3.1.3 main.js引入element-ui

import ElementUI from 'element-ui' //element-ui的全部組件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI

main.js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

import ElementUI from 'element-ui' //element-ui的全部組件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使用elementUI

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

3.1.4 創建Test.vue，并在app中引入

創建Test.vue，從element官網部分代碼；
Test.vue文件

<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <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 index="2-4">
          <template slot="title">選項4</template>
          <el-menu-item index="2-4-1">選項1</el-menu-item>
          <el-menu-item index="2-4-2">選項2</el-menu-item>
          <el-menu-item index="2-4-3">選項3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">訂單管理</a></el-menu-item>
    </el-menu>
  </div>
</template>

<script>
    export default {
        name: "Test",
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1'
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped>

</style>

App.vue文件

<template>
  <div id="app">
    <Test></Test>
  </div>
</template>

<script>
    import Test from './components/Test.vue'

    export default {
        name: 'App',
        components: {
            Test,
        }
    }
</script>

<style>
</style>

3.1.6 啟動項目

npm run dev

3.1.6 頁面效果