首页 > 其他分享 >element ui+vue快速入门

element ui+vue快速入门

时间:2024-06-03 16:57:39浏览次数:22  
标签:vue HelloWorld Element Vue UI ui element

Element UI 是一个用于开发 Web 应用的基于 Vue.js 的组件库。它提供了丰富的组件和友好的 API,帮助开发者快速构建现代 Web 应用。以下是 Element UI 的快速入门指南:

安装 Element UI

你可以通过 npm 或 yarn 安装 Element UI。

使用 npm 安装

npm install element-ui --save

 使用 yarn 安装

yarn add element-ui

在 Vue 项目中使用 Element UI

引入 Element UI

在你的 Vue 项目的入口文件(通常是 main.js)中引入 Element UI 和相关的样式。

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);

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

创建一个简单的页面

1. 创建 Vue 组件

在你的 src 目录中创建一个新的 Vue 组件文件,例如 HelloWorld.vue

<template>
  <div>
    <el-button type="primary">Primary Button</el-button>
    <el-input placeholder="Please input"></el-input>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
};
</script>


2. 使用组件

App.vue 中使用刚才创建的 HelloWorld 组件。

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>


运行项目

npm run serve

打开浏览器访问 http://localhost:8080,就可以看到一个element的输入框和按钮

标签:vue,HelloWorld,Element,Vue,UI,ui,element
From: https://blog.csdn.net/weixin_42097259/article/details/139346247

相关文章

  • ComfyUI 完全入门:ControlNet 使用教程
    大家好,我是每天分享AI应用的萤火君!今天继续给大家分享ComfyUI的入门必备技能:ControlNet。ControlNet提供了十几种生成图片的控制方式,有的可以控制画面的结构,有的可以控制人物的姿势,还有的可以控制图片的画风,这对于提高AI绘画的质量特别有用;基于ControlNet的能力,炼丹师们可......
  • 「AntV」X6 自定义vue节点(vue3)
    官方文档本篇文档只讲解vue3中如何使用,vue2的可以参考下官方文档安装插件@antv/x6-vue-shape添加vue组件既然使用vue节点,那么我们就需要准备一个vue的组件,这个组件就是节点的一些样式,根据你们的ui自行写代码即可<template><div>节点名称</div><div>节点描述</div>......
  • Vue 3 中实现引导页
     Vue 3中实现引导页五秒后自动进入首页,并在进入首页时检查用户ID的逻辑使用组合式API(setup)使用VueRouter进行页面导航在首页组件中检查用户ID如果无用户ID,导航回登录页面1.设置引导页组件<template><transitionname="fade"><divv-if="showSplash">......
  • Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3框架!
    使用Vite快速搭建脚手架命令行选项直接指定项目名称和想要使用的模板,Vite+Vue项目,运行(推荐使用yarn)#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线:npminitvite@latestmy-vue-app----templatevue#yarnyarncreatevite......
  • [工具] png图片打包plist工具,手把手教你使用pngPackerGUI_V2.0
    png图片打包plist工具,手把手教你使用pngPackerGUI_V2.0此软件是在pngpacker_V1.1软件基础之后,开发的界面化操作软件,方便不太懂命令行的小白快捷上手使用。1.下载并解压缩软件,得到如下目录,双击打开pngPackerGUI.exe 2.打开pngPackerGUI之后,默认的界面如下: 3.选择目录:选......
  • Vue3简单项目流程分享——工作室主页
    Vue3简单项目流程分享——工作室主页零、写在最前以下是项目相关的一些链接:源代码GitHub仓库(需要魔法上网):仓库网页示例(需要魔法上网):网页示例UI图(来源@设计师杨贺):MasterGo主页补充:由于时间关系,该网页没有适配手机端,最佳展示效果为网页端1440p宽度。如果你想要运行源代码:......
  • 微软官方开源免费的Blazor UI组件库 - Fluent UI Blazor
    前言今天大姚给大家分享一个由微软官方开源(MITLicense)、免费的BlazorUI组件库:FluentUIBlazor。全面的ASP.NETCoreBlazor简介和快速入门FluentUIBlazor介绍FluentUIBlazor是一个基于Blazor的组件库,提供了一系列的UI组件以及FluentUI的设计系统。该库可以帮助开发......
  • 学习unigui【27】像pg的jsonb一样编辑json。
    varI:Integer;CurrentObject:TJSONObject;FieldName:string;Pair:TJSONPair;functionCreateJSONValueForVariant(constaValue:Variant):TJSONValue;begincaseVarType(aValue)ofvarInteger:Result:=TJSONNumber.Create(Integer(aVal......
  • vue3异步组件
    vue2//定义一个异步组件constAsyncComponent=()=>({//需要加载的组件(应该是一个Promise)component:import('./MyComponent.vue'),//加载中应当渲染的组件loading:LoadingComponent,//出错时渲染的组件error:ErrorComponent,//渲染loadin......
  • vue-elementui中el-table跨页选择和v-if导致列错乱/选择框无法显示
    在vue-elementui中使用el-table,当type="selection"的时候,分页数据进行不同页跳转选择需要这种功能的时候我们需要在el-table的标签上为每个el-table-column都创建一个id;所以就用到了row-key="id"这个属性;然后我们就需要在el-table-column为type="selection"添加一个属性reserve......