ElementUI引入到vue项目开发

明知山

发布于 2020-09-03 10:18:50

6020

发布于 2020-09-03 10:18:50

文章被收录于专栏：前端开发随笔

假设我们已经创建了vue项目了 这里是Element官方文档https://element.eleme.cn/#/zh-CN/component/installation 第一步使用终端安装Element

 npm i element-ui -S

第二步在main.js里引入Element

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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-carousel indicator-position="outside">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
    
}
</script>

<style>
 .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

ok 完成

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/07/22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

component