Vue Element ui

最新推荐文章于 2025-08-09 21:35:33 发布

原创最新推荐文章于 2025-08-09 21:35:33 发布 · 355 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ui #前端

Vue 专栏收录该内容

55 篇文章

订阅专栏

Vue 渐进式JavaScript 框架基于Vue2的移动端项目：简单介绍使用element ui

Element ui

饿了么UED团队推出的vue前端框架

PC框架：（element UI）

中文官网

Element - The world's most popular Vue UI framework

安装

1.从0开始的话，可以通过以下命令

vue create my-app
cd my-app
vue add element

2.已有项目，通过：

npm install element-ui

创建PC入口

在src下新建PCApp.vue，结构和内容如下：

切换入口

在main.js中切换引入即可实现跳转pc入口。

修改

如何使用

完整引入

在main.js中写入以下内容：

import Vue from 'vue'
import App from './PCApp.vue' // 导入根组件
import router from './router' // 导入路由
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

部分引入

直接在入口文件PCApp.vue中引入。

示例如下：

<template>
    <div>
        PC-app
    </div>
</template>
<script>
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
Vue.use(Element)

export default {

}
</script>

使用组件

按钮

使用element ui的按钮，示例如下：

<template>
    <div>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warnning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
    </div>
</template>

绑定点击事件

在主要按钮上绑定一个点击事件。示例如下：

<template>
    <div>
        <el-button type="primary" @click="handlePrimary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warnning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
    </div>
</template>
<script>
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
Vue.use(Element)

export default {
  methods: {
    handlePrimary () {
      console.log('primary')
    }
  }
}
</script>