Vue3简单使用element-plus组件库
在vue3中简单使用element-plus组件库前,要配置好所需要的环境依赖,如Node.js,可以在官方中文网上下载中文网链接:Nodejs,下载最新稳定版本下载完成下一步下一步即可,安装完毕后按win+r打开cmd命令窗口输入node -v和npm -v来检查一下是否正常运行 ,当出现版本号表示可以正常运行element-plus组件库是由饿了么团队为Vue3发布的组件库,我们在开发时可以直
前言
在vue3中简单使用element-plus组件库前,要配置好所需要的环境依赖,如Node.js,可以在官方中文网上下载
中文网链接: Nodejs,下载最新稳定版本
下载完成下一步下一步即可,安装完毕后按win+r
打开cmd命令窗口输入node -v
和npm -v
来检查一下是否正常运行 ,当出现版本号表示可以正常运行
一、Vue3是什么?
vue是一种渐进式JavaScript 框架,可以快速为我们搭建前端项目框架,使用响应式数据进行渲染页面。
Vue3官方文档:Vue3官方文档
二、element-plus组件库
1.什么是element-plus组件库
element-plus组件库是由饿了么团队为Vue3发布的组件库,我们在开发时可以直接引入相关组件,其样式已经为我们设计好了,也可以自己更改。
官网:element-plus
三 创建项目并使用element-plus组件
先创建一个Vue3模板项目,在工作区使用win+r
打开cmd命令窗口,接着输入npm create vue@latest
,在下方输入项目名字,然后按下回车键
这里我们都选否,直接回车,目前还用不到。
当出现 cd vuedemo , npm install, npm run dev
表示我们已经创建完毕项目。接着我们分别输入cd vuedemo , npm install, npm run dev
这三个命令,在下方出现 http://localhost:5173/
即表示我们的项目已经跑起来了
接着在浏览器输入 http://localhost:5173/
即可查看运行效果图页面
下载element-plus组件库,在项目的根目录使用cmd窗口输入npm install element-plus --save
进行下载组件库
当出现added 23 packages in 6s
即加载成功。可以打开package.json文件夹中查看是否存在"element-plus": "^2.6.1",
在src/main.js文件中修改以下内容,来全局使用
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('#app')
我们就在默认vue组件使用最简单的ElementPlus Button按钮
因为刚才全局引入过element-plus所以可以在App.vue中按照下面这样写
<script setup>
import { ElButton } from 'element-plus'
</script>
<template>
<div class="mb-4">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</div>
<div class="mb-4">
<el-button plain>Plain</el-button>
<el-button type="primary" plain>Primary</el-button>
<el-button type="success" plain>Success</el-button>
<el-button type="info" plain>Info</el-button>
<el-button type="warning" plain>Warning</el-button>
<el-button type="danger" plain>Danger</el-button>
</div>
</template>
<style scoped></style>
再次运行查看效果如图
总结
想要创建vue+element-plus要先配置好Nodejs,所以我们要确保nodejs是正常运行的,且版本不能过低。其他element-plus组件用法一样,引入时可以自定义api去设计组件样式。
更多推荐
所有评论(0)