深圳做营销型网站,刚开始的网站开发公司,一分钟做网站,苏州网站建设提供商文章目录 1.Element-ui简介2.使用HBuilderX 创建一个基于Vue3的项目 #xff08;由于是使用的基于Vue3的Element-ui#xff09;3.安装element-ui4.在项目里完全引用element-ui5.引用组件6.运行项目 1.Element-ui简介
Element#xff0c;一套为开发者、设计师和产品经理准备… 文章目录 1.Element-ui简介2.使用HBuilderX 创建一个基于Vue3的项目 由于是使用的基于Vue3的Element-ui3.安装element-ui4.在项目里完全引用element-ui5.引用组件6.运行项目 1.Element-ui简介
Element一套为开发者、设计师和产品经理准备的基于 Vue 的桌面端组件库
element-ui官网地址 https://element-plus.org/zh-CN/guide/installation.html
2.使用HBuilderX 创建一个基于Vue3的项目 由于是使用的基于Vue3的Element-ui
HBuilderX 安装 自行百度
3.安装element-ui
在HBuilderX 打开控制台界面 输入如下命令 执行安装
npm install element-plus --save4.在项目里完全引用element-ui
修改main.js文件添加如下代码
// main.ts
import { createApp } from vue
import ElementPlus from element-plus
import element-plus/dist/index.css
import App from ./App.vueconst app createApp(App)app.use(ElementPlus)
app.mount(#app)5.引用组件
这里以button 按钮为例 标签是 div classmb-4el-buttonDefault/el-buttonel-button typeprimaryPrimary/el-buttonel-button typesuccessSuccess/el-buttonel-button typeinfoInfo/el-buttonel-button typewarningWarning/el-buttonel-button typedangerDanger/el-button/div修改App.vue文件 添加一组按钮到页面上
templateimg altVue logo src./assets/logo.png /HelloWorld msgHello Vue 3 Vite /div classmb-4el-buttonDefault/el-buttonel-button typeprimaryPrimary/el-buttonel-button typesuccessSuccess/el-buttonel-button typeinfoInfo/el-buttonel-button typewarningWarning/el-buttonel-button typedangerDanger/el-button/div
/template6.运行项目
npm run dev结果如图所示
