ElementUI简单入门

最新推荐文章于 2025-04-15 09:48:09 发布

想好之后再说

最新推荐文章于 2025-04-15 09:48:09 发布

阅读量691

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45415977/article/details/100067188

版权

本文介绍了前后端分离的架构模式，并详细讲解了如何使用ElementUI搭建前端环境，包括创建Vue项目、安装ElementUI及配置。同时，文章提到了Mockjs和Easymock用于接口数据模拟，便于前端独立开发和测试。最后，讨论了Axios在Vue中的应用，作为处理Ajax请求的工具。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前后端分离
很多人误以为前后端分离只是一种web应用开发模式，只要在web应用的开发期进行了前后端开发工作的分工就是前后端分离。前后端分工
其实前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。
饿了么-PC端
http://element-cn.eleme.io/#/zh-CN
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，类似于easyui一样，提供了很多的ui组件。
搭建前端环境
1.创建一个static web项目
根目录下执行vue命令
搭建脚手架

vue init webpack

看看是否能跑起来

npm run dev

2 安装 Elementui
输入指令

npm i element-ui -S

3 在main.js中写入一下内容:

import Vue from 'vue';
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI)

在 components 文件夹里新建一个vue ，

<template>
  <div class="hello">
    <!--el开头就是elementui里面的组件名称-->
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary" disabled>主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>

最低0.47元/天解锁文章