vue使用ElementUI
    		       		warning:
    		            这篇文章距离上次修改已过433天,其中的内容可能已经有所变动。
    		        
        		                
                在Vue项目中使用ElementUI,首先需要安装ElementUI:
npm install element-ui --save然后在Vue项目中引入和使用ElementUI:
- 完整引入(在
main.js或app.js中): 
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
 
Vue.use(ElementUI)
 
new Vue({
  el: '#app',
  render: h => h(App)
})- 按需引入(使用babel-plugin-component):
 
首先安装babel-plugin-component:
npm install babel-plugin-component -D然后配置.babelrc文件:
{
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}在main.js或app.js中按需引入ElementUI组件:
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'
 
Vue.use(Button)
Vue.use(Select)
 
new Vue({
  el: '#app',
  render: h => h(App)
})在Vue组件中使用ElementUI组件:
<template>
  <div>
    <el-button type="primary">点击我</el-button>
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      value: '',
      options: [{ label: '选项1', value: '1' }, { label: '选项2', value: '2' }]
    }
  }
}
</script>以上是在Vue项目中引入和使用ElementUI的基本步骤。
评论已关闭