[Vue]Vue3.0+Element Plus搭建项目

已于 2023-07-04 18:18:01 修改
阅读量1.8k 收藏 4
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2021-01-29 12:00:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iChangebaobao/article/details/113252973
版权

Vue3.0 ElementPlus vue-cli升级 项目初始化 组件库
关键词由CSDN通过智能技术生成

Vue3.0+Element Plus搭建项目

一、升级 vue-cli

首先在终端输入以下命令，查看脚手架版本

vue -V

在这里插入图片描述
本次使用用 vue-cli@4.5以上的版本，执行以下命令进行升级

npm install -g @vue/cli

在这里插入图片描述

二、新建vue3.0项目

vue3.0中文官网

装好后终端 cd 至你的项目目录，执行下面命令新建vue3.0项目

vue create vue3-project

在这里插入图片描述
选最后一个，自定义
在这里插入图片描述
在这里插入图片描述
创建成功，根据提示进入项目目录，执行以下命令即可运行项目

npm run serve

在这里插入图片描述
在这里插入图片描述
目录结构长这样
在这里插入图片描述

三、安装Element Plus

Element Plus官网

在终端执行以下命令，安装Element Plus

cnpm install element-plus --save

在官网上查看使用，剩下的就可以愉快地进行后续开发了

iChangebaobao
关注
专栏目录
Vue3 +Elementplus的学习 （用vite构建项目）
gao7009的博客
08-19 464
2.放置项目中经常会用到的插件和CSS样式。1、main.js文件是入口文件，主要作用初始化vue实例。例如（用于的基本信息）
Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3框架！
最新发布
qq_33546296的博客
06-03 1007
/ 此处的id很重要name: ''}),getters: {},},actions: {},// 登录// 调用接口，做逻辑处理})setup() {// $patch 修改 store 中的数据name: '名称被修改了,nameLength也改变了'})return {userStore,updateName},})
vue-admin-template-plus:带有Vue 3.0和Element Plus的Vue元素管理模板
05-19
vue-admin-template-plus 这是一个极简的 vue admin 管理后台。它只包含了 Vue 3.0 & Element Plus & axios & iconfont & permission control & lint，这些搭建后台必要的东西。 目前版本基于 vue-cli + Vue 3.0 + Element Plus 进行构建，参考 做了简单的升级适配 Vue 3.0 和 Element Plus，所以绝大部分还是 的味道。 相关文档 Build Setup # 克隆项目 git clone https://github.com/thiszhong/vue-admin-template-plus.git # 进入项目目录 cd vue-admin-template-plus # 安装依赖 npm install # 建议不要直接使用 cnpm 安装以来
Vue3+Element plus项目搭建
qq_42365152的博客
04-27 1973
如何快速搭建Vue3示例？ 方法一：通过CDN引入 方法二：通过vite脚手架搭建 方法三：通过vue-cli脚手架搭建
vue3.0整合element-plus
weixin_42883164的博客
01-29 344
vue3.0整合element-plus
vue3.0 集成Element Plus
Jason Wang
01-14 4568
目录 前言 一、安装Element Plus 二、使用 element-plus 1.引入 element-plus 2.编写页面查看element-plus效果 三、总结 前言 按照vue后，我们需要选择一个自己喜欢的UI框架，这里我们选中Element Plus，注意一定是Element Plus，Element 并不支持vue 3.0。 Element Plus 官网地址：https://element-plus.gitee.io/zh-CN/ 一、安装Element...
Vue3与Element-plus整合及项目实战
热门推荐
sinat_30844883的博客
05-14 1万+
Element-plus简介是ElementUI的升级版，是一套基于vue2与vue3的桌面端组件库，它提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的前端页面。
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
04-03
总的来说，这套"Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版"提供了一个现代化的前端开发环境，结合高效的开发工具和强大的库，使得构建后台管理系统变得更加便捷和高效。无论是对于新手...
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
vue3+pinia+element-plus搭建的模板工程
01-04
无论您是一名经验丰富的开发者还是刚入门的新手，这个Pinia+Vue3+Element Plus+Webpack 5搭建的系统模板工程都将成为您的得力助手。 此zip解压后即可立即运行，为了保证项目依赖一致性，我将node_modules也一起上传...
超简单易用VUE3.0 + ElementPlus + typescript 后台管理框架OneEasyAdmin
06-26
平台是个超简易的入手平台,vue-elm-admin 扩展的一大堆功能统统抛弃，越庞大对新手越不友好，连我这老鸟看着多头痛,从简单做起。然后要什么在从官方DEMOCOPY模块过来！值得你拥有。 全用TS实现写的，有助于团队合作和维护;平台支持一个页面多开，例如列表打开明细，打开多个明细界面。 特点，很简单、特简单、非常简单
vue3 接入 Element Plus
大家好，我是+V
01-03 3271
Element Plus是一套为开发者、设计师和产品经理准备的基于Vue 3.0的桌面端组件库。反馈：通过界面样式和交互动效让用户清晰地感知自己的操作。当用户进行操作后，页面元素的变化会清晰地展现当前状态。效率：设计简洁直观的操作流程，使语言表达清晰且表意明确，帮助用户快速理解进而作出决策。此外，界面简单直白，减少用户记忆负担。可控：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策。用户可以自由地进行操作，包括撤销、回退和终止当前操作等。
vue3+elementPlus项目搭建
程序猿的傻白甜
06-26 3389
vue3+elementPlus项目创建
vue3.0 引入element-plus
Beloved_Jodie的博客
11-19 907
vue3.0 引入element-plus 安装element-plus npm install element-plus --save yarn add element-plus 完整导入 // main.js import { createApp } from 'vue' import ElementPlus from 'element-plus' import App from './App.vue' const app = createApp(App) // 在引入
Vue3.0项目框架搭建之三：element-plus
qq_25081445的博客
03-21 1万+
上一篇文章完成了Router4.0的集成，已经页面的切换。那么就应该开始对每个页面的内容做设计了，vue有很很多支持的第三方UI库，其中使用最广泛的就是 elementUI 。 这次 elementUI 的集成为了适配我们Vue3.0特地选择了官方对应的版本 element-plus 。 安装 首先进行依赖的安装，这里直接使用npm方式： npm install element-plus --save 然后在 main.js 中引入 element-plus组件，这里直接导入完成的组件库，如果考虑到打包后
搭建vue3.0+Element Plus项目
qq_36529240的博客
07-06 1998
一、全局安装vue-cli4.x脚手架 npm install @vue/cli -g 二创建项目 vue create 项目名字 我的项目选项 三、安装element plus npm install element-plus --save 在 main.js 中写入以下内容： /* import ElementPlus from 'element-plus'; app.use(ElementPlus) 不知道为什么引用这个方法，页面报错，意思说找不到。我用官网另一个方法做 */ import
记录Vue3+ElementPlus创建项目
cosmos16的博客
09-24 441
之前一直用的是iview,但是iview不支持vue3,所以现在换成ElementPlus来练习。 Vue3项目引入ElementPlus 我是用npm安装的，起初也是找的网上的教程。ElementPlus官方 npm install element-plus --save 安装完成后在main.js中配置 import { createApp } from 'vue' import App from './App.vue' import router from './route' import Elem
vue3.0+vue-router+element-plus初实践
kiscon的博客
11-14 2769
Vue3中文文档 Vue3.0对比Vue2.x优势 框架内部做了大量的性能优化，包括：虚拟dom，编译模板，Proxy的新数据监听，更小的打包文件等。 新增的组合式API（即Composition API），更适合大型项目的编写方式。 对TypeScript支持更好，去掉this操作，更强大的类型推导。 初始化项目 安装@vue/cli npm install @vue/cli -g 或 yarn global add @vue/cli 创建项目 vue create 项目名 可以选择V
vue3.0+element Plus表单校验
05-28
在Vue3.0中，可以使用Vue3.0官方推荐的表单校验库VeeValidate或者使用Element Plus提供的表单校验功能。 下面是一个使用Element Plus表单校验的示例： 1. 在Vue3.0项目中，首先需要先安装Element Plus组件库： ``` npm install element-plus --save ``` 2. 在需要使用表单校验的组件中，引入Element Plus的表单组件和校验规则： ```javascript <template> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'; export default { components: { ElForm, ElFormItem, ElInput, ElButton, }, setup() { const form = ref({ username: '', password: '', }); const rules = ref({ username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }, ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }, ], }); const submitForm = () => { // 表单校验 const formRef = this.$refs.form; formRef.validate((valid) => { if (valid) { // 校验通过 console.log('submit'); } else { // 校验不通过 console.log('error submit!!'); return false; } }); }; return { form, rules, submitForm, }; }, }; </script> ``` 在上面的示例中，我们使用了Element Plus的表单组件和校验规则来实现表单校验，其中： - `ElForm`：表单组件，用于包裹需要校验的表单项； - `ElFormItem`：表单项组件，用于包裹表单控件和校验规则； - `ElInput`：输入框组件，用于输入表单数据； - `ElButton`：按钮组件，用于提交表单数据； - `ref`：Vue3.0中用于获取组件实例的方法。 在`setup()`函数中，我们使用了`ref`来定义表单数据和校验规则，并且定义了一个`submitForm()`方法来提交表单数据，其中： - `validate()`：表单校验方法，用于校验表单数据是否满足校验规则； - `valid`：校验结果，如果校验通过则为`true`，否则为`false`。 总体来说，使用Element Plus的表单校验功能非常简单，只需要在需要校验的表单项中定义相应的校验规则，并在提交表单时调用`validate()`方法即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值