专栏首页前端开发随笔ElementUI引入到vue项目开发

ElementUI引入到vue项目开发

假设我们已经创建了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 完成

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue实现微信授权登录

    任我行RQ
  • Koa配置路由

    任我行RQ
  • 微信小程序获取页面高度

    任我行RQ
  • 报名正式开始丨AAAI 2020论文预讲会

    作为人工智能领域最悠久、涵盖内容最广泛的学术会议之一,历届 AAAI 都吸引了全世界的人工智能相关领域的研究者参与,会议的论文内容也丰富多彩。近年来参加 AAA...

    AI科技评论
  • OFFSET IN 使用举例

    某器件(Device)有信号RXD0-RXD15,RKLSB,RKMSB需要输入到FPGA内,同时有与数据同步的RXCLK,数据为SDR输入。如下图所示...

    sea-wind
  • 应用号是个什么鬼?腾讯为什么要推出这么多号?

    今天微信宣布将推出应用号,一时间整个朋友圈都沸腾了,有惊喜的,有慌恐的,有说风凉话的,那么大家第一反映是应用号到底是什么鬼?腾讯为什么要推出应用号?他的目的和意...

    人称T客
  • Linq Like的操作

    Like的操作,有点像in,但是,方向变了。什么意思呢。就是你给定一个字符串,去寻找数据中某个字段包含这个字符串。就是给定的字符串是某字段的子集。Sql Scr...

    逸鹏
  • 090706 T Linq 的认识

    /// <summary> /// 一个不错的Linq问题 /// </summary> private void LinqQuestion() {     J...

    用户1172223
  • 美国国际贸易署 | 2016FinTech顶级市场报告:综述和主要研究(附下载)

    大数据文摘
  • Java Review (二十五、集合----- Iterator接口)

    Iterator接口 也是 Java 集合框架的成员 , 但它与 Collection 系列 、 Map 系列 的集合不 一样 : Collection系列集合...

    三分恶

扫码关注云+社区

领取腾讯云代金券