初学Vue+Element——Element使用

0 引言

前端的开发模式为MVVM(Model-View-ViewModel),而Vue侧重于VM开发,主要用于数据绑定到视图的,而ElementUI则侧重于V开发的前端框架,主要用于开发美观的页面的。

1 ElementUI介绍

Element:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页。

Element 提供了很多组件(组成网页的部件)供我们使用。例如 超链接、按钮、图片、表格等等。如下图所示就是我们开发的页面和ElementUI提供的效果对比:可以发现ElementUI提供的各式各样好看的按钮

ElementUI的学习方式和我们之前的学习方式不太一样,对于ElementUI,我们作为一个后台开发者,只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中,并且做一些修改即可 。其官网地址:Element - The world's most popular Vue UI framework,我们主要学习的是ElementUI中提供的常用组件。

2 快速入门

2.1 安装ElementUI的组件库,打开Vue项目所在目录,进入控制台命令行,然后输入

html 复制代码
npm install element-ui

然后我们需要在main.js这个入口js文件中引入ElementUI的组件库,其代码如下:

html 复制代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

具体操作如图所示:

然后我们需要按照vue项目的开发规范,在src/views目录下创建一个vue组件文件,注意组件名称后缀是.vue,并且在组件文件中编写之前介绍过的基本组件语法,代码如下:

html 复制代码
<template>

</template>

<script>
export default {

}
</script>

<style>

</style>

最后我们只需要去ElementUI的官网,找到组件库,然后找到按钮组件,抄写代码即可,具体操作如下图所示:

然后找到按钮的代码,如下图所示:

紧接着我们复制组件代码到我们的vue组件文件中,操作如下图所示:

最后,我们需要在默认访问的根组件src/App.vue中引入我们自定义的组件,具体操作步骤如下:

然后App.vue组件中的具体代码如下,代码是我们通过上述步骤引入element-view组件时自动生成的

html 复制代码
<template>
  <div id="app">
    <!-- {{message}} -->
    <element-view></element-view>
  </div>
</template>

<script>
import ElementView from './views/Element/ElementView.vue'
export default {
  components: { ElementView },
  data(){
    return {
      "message":"hello world"
    }
  }
}
</script>
<style>

</style>

然后运行我们的vue项目,浏览器直接访问之前的7000端口,展示效果如下图所示:

到此,我们ElementUI的入门程序编写成功

相关推荐
刺客_Andy17 分钟前
React 第四十三节 Router中 useBlocker 的使用详解及案例注意事项
前端·react.js
摸着石头过河的石头18 分钟前
函数的超能力:JavaScript高阶函数完全指南
前端·javascript
汤姆Tom18 分钟前
写这么多年CSS,都不知道什么是容器查询?
前端·css·面试
进击的二向箔21 分钟前
Vue 3 深度解析:Composition API 如何改变前端开发方式
前端
golang学习记24 分钟前
从0死磕全栈之Next.js 表单开发终极指南:使用 Server Actions 构建高效、安全、现代化的表单
前端
纯爱掌门人24 分钟前
我把前端踩坑经验总结成28条“涨薪秘籍”,老板夸同事赞,新手照着做准没错
前端·程序员·代码规范
LuckySusu26 分钟前
【vue篇】Vue 模板编译全解析:从 Template 到 DOM 的奇妙旅程
前端·vue.js
LuckySusu26 分钟前
【vue篇】Vue 响应式更新揭秘:数据变了,DOM 为何不立即刷新?
前端·vue.js
LuckySusu27 分钟前
【vue篇】Vue 事件修饰符完全指南:精准控制事件流
前端·vue.js
62696029 分钟前
前端页面出现问题ResizeObserver loop completed with undelivered notifications.
前端