码迷,mamicode.com
首页 > 其他好文 > 详细

VUE的element-ui的使用

时间:2017-11-17 15:01:50      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:div   pre   rip   ges   分享图片   script   img   相关   文件中   

我们在自己的网站当中有的时候会用到element-ui的组建

1.如何安装element-ui的组件

   在命令行工具当中输入cnpm i element-ui -S, 等待安装

2.如何在vue当中使用element-ui的组件

    1.在main.js中引入element相关的js和css

          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)

技术分享图片

    2.在.vue文件中加入element-ui的按钮之类的即可。

  

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>

<script>
export default {
  name: ‘app‘
}
</script>

<style scoped>
  @import ‘../static/css/index.css‘;
</style>

 3.cnpm run dev运行即可看到相应的效果

   技术分享图片

 

VUE的element-ui的使用

标签:div   pre   rip   ges   分享图片   script   img   相关   文件中   

原文地址:http://www.cnblogs.com/yesu/p/7851206.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!