小白级选手vue项目中引入element-ui的过程记录

1、在一个已经创建好的vue项目的基础上进行

2、引入前的准备

　　2.1、 安装 loader 模块：
 

    cnpm install style-loader -D
    cnpm install css-loader -D
    cnpm install file-loader -D

　　2.2、 安装 Element-UI 模块
 

 cnpm install element-ui --save 

　　2.3、 修改 webpack.base.conf.js 的配置

 {       
     test: /\\\\\\\\.css$/,       
     loader: "style!css"   
 },   
 {       
     test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,       
     loader: "file"   
 }     

3、在.src/main.js中引入element-ui

      import ElementUI from 'element-ui'
      import 'element-ui/lib/theme-default/index.css'    //这里的着色部分的文件名要根据npm install下载的依赖文件中的element-ui文件下去查找（node_modules中）
      Vue.use(ElementUI)

4、创建一个header.vue的文件

<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>

5、在App.vue中引入header.vue

<template>
 <div id="app">
  <Header></Header>
 </div>
</template>
 
<script>
import Header from './pages/header.vue'
 
export default {
 components:{
  Header,
 }
}
</script>
 
<style>
 
</style>

然后就可以npm run dev了