小白级选手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的文件

 1 <template>
 2   <el-menu
 3    :default-active="activeIndex2"
 4    class="el-menu-demo"
 5    mode="horizontal"
 6    @select="handleSelect"
 7    background-color="#545c64"
 8    text-color="#fff"
 9    active-text-color="#ffd04b">
10    <el-menu-item index="1">处理中心</el-menu-item>
11    <el-submenu index="2">
12     <template slot="title">我的工作台</template>
13     <el-menu-item index="2-1">选项1</el-menu-item>
14     <el-menu-item index="2-2">选项2</el-menu-item>
15     <el-menu-item index="2-3">选项3</el-menu-item>
16    </el-submenu>
17    <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
18   </el-menu>
19 </template>
20  
21 <script>
22  export default {
23   data() {
24    return {
25     activeIndex: '1',
26     activeIndex2: '1'
27    };
28   },
29   methods: {
30    handleSelect(key, keyPath) {
31     console.log(key, keyPath);
32    }
33   }
34  }
35 </script>

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

 1 <template>
 2  <div id="app">
 3   <Header></Header>
 4  </div>
 5 </template>
 6  
 7 <script>
 8 import Header from './pages/header.vue'
 9  
10 export default {
11  components:{
12   Header,
13  }
14 }
15 </script>
16  
17 <style>
18  
19 </style>

然后就可以npm run dev了

 

posted @ 2018-10-11 14:26  T&Y  阅读(560)  评论(0编辑  收藏  举报