20.ElementUI的使用，完整引入和按需引入

1.完整引入

1.ElementUI組件官方文檔

https://element.eleme.cn/#/zh-CN/component/installation

2.安裝

cnpm i element-ui -S

3.在main.js中引入

// element-UI 的使用
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

4.在webpack.config.js中配置字體解析代碼

,
      {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
      },

 

 

5.根據文檔直接將代碼粘貼到組件內引用即可

Home.vue

<template>
    <div>
        <h2>{{msg}}</h2>
        <br>
          <el-button type="success">成功按鈕</el-button>
    <el-button type="warning">警告按鈕</el-button>
    <el-button type="danger">危險按鈕</el-button>
    <el-button type="info">信息按鈕</el-button>
        <br>
    </div>
</template>
<script>

export default {
  name: 'home',  
  data () {
    return {
        msg:'首頁組件'
    }
  },
  methods:{
      goNew(){
        //   this.$router.push({path:'news'})
          this.$router.push({path:'vcontent/0'})
      }

  },
  components:{
  }
}
</script>
<style lang="scss" scoped>
h2{
    color: red;
}
</style>

2.按需引入