首页 > 其他分享 >vue项目成功引入element组件的具体步骤

vue项目成功引入element组件的具体步骤

时间:2023-09-10 22:33:08浏览次数:37  
标签:vue app element 引入 plus 具体步骤 组件

1、首先要确保vue项目能够成功在浏览器访问

2、一般使用的是vue3

那么,需要注意的是,element组件在vue3里面,需要使用的是element-plus

命令:

npm install element-plus --save --legacy-peer-deps

下载完成之后,需要在main.js里面对element组件进行引入:

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'

const app=createApp(App)

app.use(ElementPlus);

然后使用npm run serve命令运行:

组件引入完成!

标签:vue,app,element,引入,plus,具体步骤,组件
From: https://www.cnblogs.com/liuzijin/p/17692146.html

相关文章

  • vue使用富文本编辑器vue-quill-editor,含拖拽图片,调整默认高度
    这两天的工作用到了vue\-quill-editor,来记录一下使用心得/踩过的坑供大家参考。1、安装npminstall vue-quill-editornpminstallquill2、引入main.js里样式也记得引入:importVueQuillEditorfrom'vue-quill-editor'import'quill/dist/quill.core.css'import'quill/dist/qu......
  • 运行vue项目一直报错的问题的解决
    问题描述(上图为网图,自己的没来得及截图)问题解决第一个原因:vue版本过低;使用下面的语句进行版本升级:[email protected]但是我试了没啥用;第二个原因:node版本过低;使用下面的语句进行版本升级:--若是已经有更高级的版本,可以直接更换:nvmlistnvmuse版本--若是没有,就自己......
  • Vue组件传值方法
    使用propsprops是用于向子组件传递数据的一种方式。父组件可以将数据传递给子组件的props属性,子组件则可以通过props来访问这些数据。父组件:<template><div><child-component:message="message"></child-component></div></template>子组件:<template><div>{......
  • Vue进阶(幺陆柒):Vue 项目调试技能
    (文章目录)一、前言在Vue项目开发过程中,当遇到应用逻辑出现错误,但又无法准确定位的时候,知晓Vue项目调试技巧至关重要。同后台项目开发一样,可以在JS实现的应用逻辑中设置断点,并进行单步、进入方法内、跳出方法等调试,从而准确定位问题根源。本文主要讲解针对JetBrains系列WebStor......
  • 用vue开发新项目的前期步骤流程
     一、git代码托管平台1)注册登录:Gitee-基于Git的代码托管和研发协作平台2)在码云上传本地已存在项目:编辑编辑3)安装git::https://git-scm.com/4)克隆码云上的项目到本地:gitclone仓库地址5)搭建项目环境6)将代码上传到gitee.com的仓库中:git的使用,查看另外一篇文章二、搭建vue项目环......
  • 在springboot项目种引入element组件
    1、保证vue的版本在3以上2、Win+R--打开命令行窗口(cmd)输入下面的命令,打开图形化界面:vueui3、打开我们创建的vue项目选择路径即可自主导入项目;4、安装element-ui的插件依赖5、查看项目中是否存在ok!......
  • 鉴于vue2使用element组件不太方便,换成vue3的具体步骤
    1、卸载原有的vue2npmuninstallvue-cli-g卸载完成!2、按照最新的下载vue3命令下载vue3npminstall-g@vue-cli下载完成!(等了大概快10分钟)......
  • Vue学习一:vue2的基本指令
    Vue是一个构建用户界面的渐进式框架。官网:https://cn.vuejs.org/。Vue可以用网上的CDN,也可以下载到本地(下载的话就是进入官网打开学习文档,点击基础里面的安装,点击里面的开发版本这几个字,建议下载开发版本,里面包含完整的警告和调试模式)1、创建Vue2实例首先将下载的vue.js引入到h......
  • Vue.js 官方脚手架 create-vue 是怎么实现的?
    Vue.js官方脚手架create-vue是怎么实现的?摘要本文共分为四个部分,系统解析了vue.js官方脚手架create-vue的实现细节。第一部分主要是一些准备工作,如源码下载、项目组织结构分析、依赖分析、功能点分析等;第二部分分析了create-vue脚手架是如何执行的,执行文件的生成细节......
  • vue3探索——5分钟快速上手大菠萝pinia
    温馨提示:本文以vue3+vite+ts举例,vite配置和ts语法侧重较少,比较适合有vuex或者vue基础的小伙伴们儿查阅。安装piniayarnyarnaddpinianpmnpminstallpiniapnpmpnpmaddpinia1-开始方式一:在main.ts中直接引入pinia在src/main.ts中引入pinia(根存储),并传递给......