vue-cli脚手架种中引入elementUI

责编:menVScode 2018-05-10 20:22 阅读(95)

1、打开cmd,在当前目录中运行

> npm install element-ui -save
`-- element-ui@2.3.7
  +-- async-validator@1.8.2
  +-- deepmerge@1.5.2
  +-- normalize-wheel@1.0.1
  +-- resize-observer-polyfill@1.5.0
  `-- throttle-debounce@1.0.1

2、打开项目:src/main.js 添加下面三条

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)

但是发生如下报错,vue-cli构建完后  "element-ui": "^2.3.7", "vue": "^2.5.2","vue-router": "^3.0.1"。

TIM截图20180510203950

解决方法:

import 'element-ui/lib/theme-default/index.css'  改为  import 'element-ui/lib/theme-chalk/index.css';

根据 import 的路径看node_modules\_element-ui\lib这个目录下并没有 theme-default 这个文件夹,只有个 theme-chalk,所以就直接改成它,这就好了。

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

Vue.config.productionTip = false

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

例子:

<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">menVScode</el-menu-item>
      <el-submenu index="2">
        <template slot="title">JavaScript</template>
        <el-menu-item index="2-1">Vue</el-menu-item>
        <el-menu-item index="2-2">React</el-menu-item>
      </el-submenu>
      <el-menu-item index="3"><a href="http://menvscode.com" target="_blank">前端博客</a></el-menu-item>
    </el-menu>
</template>
<script>
  export default {
      name:'index',
      data(){
          return {
            activeIndex: '1',
            activeIndex2: '1'
          }
      },
      methods: {
          handleSelect(key, keyPath) {
              console.log(key, keyPath);
          }
      }
  }
</script>
标签: elementUI vue-cli vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码