vue-cli2按需引入element-ui步骤及出现的问题

步骤1:前提安装了node、webpack、vue-cli脚手架(已用脚手架创建项目)

步骤2：按element-ui官网在终端切换到项目根目录执行npm i element-ui、npm install babel-plugin-component -D

步骤3：在src文件夹下创建plugins/element.js文件,并在element.js文件中输入如下代码

%KP)M24ZQQF~KJIXQWE$FNI.png

//在element.js文件中输入如下代码
import Vue from 'vue'
import { Button } from 'element-ui'
Vue.use(Button)

步骤4：在main.js引入步骤3的element.js文件

import Vue from 'vue'
import App from './App'
import router from './router'
//引入的element.js
import './plugins/element.js'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

步骤5：在 .babelrc 文件中配置如下内容

  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2",
    ["es2015", { "modules": false }]
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime",
    ["component", 
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]]
}

步骤6：在需要用element-ui组件的地方引入相应组件代码即可

<template>
<!--引入的按钮组件  -->
  <div>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
     
    }
  }
}
</script>


<style scoped>

</style>

步骤7：在切换到项目根目录的终端执行 npm run dev

要是如下图片错误，则在终端执行 npm install babel-preset-es2015 --save-dev，后再执行 npm run dev

![$3E9HR%WTVOBN6HJP%OSHP.png

效果图:

$%76_$%FYWJ%D8%B{AAJ%2PQ.png$

vue-cli2创建的项目中按需引入element-ui步骤及遇到的问题和解决办法

vue-cli2按需引入element-ui步骤及出现的问题