1. 程式人生 > >VUE的element-ui的使用

VUE的element-ui的使用

out default 使用 efault com clas temp 引入 sco

我們在自己的網站當中有的時候會用到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的使用