ElementUI搭建

概述


Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组
件库.
安装 ElementUI
npm 安装
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。


在控制台输入此命令来安装ElementUI

npm i element-ui -S

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

import ElementUI from 'element-ui' ;
import 'element-ui/lib/theme-chalk/index.css' ;
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app');


具体组件使用参考 API 文档
https://element.eleme.cn/2.11/#/zh-CN

在这个网址来用来截取自己想用的组件来开发项目(“拿来主义”)

  • 7
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI 是一个基于 Vue.js 的组件库,可以帮助开发人员快速构建现代化的 Web 应用程序。下面简单介绍如何使用 Element UI 搭建一个基础的页面。 1. 安装 Element UI 首先需要安装 Element UI,可以通过 npm 或 yarn 进行安装: ``` npm i element-ui -S ``` 或者 ``` yarn add element-ui ``` 2. 引入 Element UI 在 Vue 项目的入口文件(main.js)中引入 Element UI: ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 3. 使用 Element UI 组件 在需要使用 Element UI 组件的地方引入相应组件即可。例如,在 App.vue 中使用一个 Button 组件: ```vue <template> <div> <el-button>Click me!</el-button> </div> </template> <script> export default { name: 'App' } </script> ``` 4. 自定义主题 Element UI 提供了多种主题,可以通过修改样式变量来自定义主题。具体步骤如下: 在项目根目录下创建一个名为 `theme` 的文件夹,在其中创建一个名为 `index.css` 的文件。 在 `index.css` 中编写样式变量,例如: ```css /* 修改主色调为红色 */ $--color-primary: #ff4d4f; ``` 在 `main.js` 中引入自定义主题: ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import './theme/index.css'; Vue.use(ElementUI); ``` 以上就是使用 Element UI 搭建页面的基本步骤,可以根据实际需求使用更多的 Element UI 组件和功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值