【Vue3 ElementUI开发环境搭建】

原创 已于 2024-12-04 16:48:02 修改 · 1.8k 阅读 · 16
于 2024-12-04 16:45:28 首次发布

VUE搭建关系系统

1. 安装vue脚手架工具

npm install -g @vue/cli

执行命令后等他跑一下
安装VUE脚手架过程
没有直接的错误提示信息就当正确安装了吧。

2. 使用脚手架创建项目

vue create demo01

其中demo01指的是要创建的工程名称。执行命令之后会进入工程创建导航

2.1 选择VUE版本

VUE版本选择
目前先选择Vue3尝试下，虽然我也搞不来Vue3。但是不要虚，反正搞不来就想办法，搞了说不定就搞得来了啦。
选了之后他就各种嘎嘎一顿操作，应该是从网上下周各种库文件.
下载依赖包
然后居然就一口气执行完了，导航结束
创建VUE3结束

2.2 启动demo

根据提示，进入工程目录，后执行

npm run serve

启动服务
使用浏览器访问提示的URL地址http://172.16.17.1:8080/
在这里插入图片描述

2.3 vue工程搭建完的目录

标签
#elementui #前端 #javascript
最低0.47元/天 解锁文章
Vue3 + Element-UI 搭建一个后台管理系统框架模板
三拾的博客
04-25 7037
本文将介绍如何基于Vue3和element-ui搭建一个后台管理系统框架模板。我们将详细讲解代码流程，并提供详细的说明。本文介绍了如何基于Vue3和Element-ui搭建一个后台管理系统框架模板。我们从创建Vue3项目、安装和配置Element-ui、封装Axios、创建路由、创建页面和创建菜单等方面进行了详细的讲解。希望本文能够帮助读者更好地理解Vue3和Element-ui的使用方法，以及如何构建后台管理系统框架模板。
Vue3 + Element UI 自定义表单、表格、分页全局组件：高性能可配置方案
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
03-19 1334
在现代企业级应用中，后台管理系统通常需要大量复用的表单、表格与分页组件。如果每个页面都重复编写这些组件，不仅会导致代码冗余，还会影响开发效率和项目维护。为此，我们可以将这些功能封装成全局组件，通过动态配置和参数传递实现灵活定制，同时结合性能优化策略，确保组件在高并发场景下依然流畅高效。本文将从项目结构、组件设计、代码实现与注释、性能优化策略等方面，详细讲解如何使用 Vue3 与 Element UI 构建高性能、可复用的全局组件库。
别再被坑了！Vue3 + Element Plus里el-tabs切换导致ECharts图表变形，这几种修复方案实测有效
最新发布
weixin_32864847的博客
06-02 367
本文详细解析了Vue3 + Element Plus中el-tabs切换导致ECharts图表变形的常见问题，提供了多种基于Composition API的解决方案，包括watch监听、动态加载组件和ResizeObserver等技术。文章还分享了Element Plus特有的lazy属性和自定义过渡效果，帮助开发者高效解决图表渲染问题，提升应用性能。
【Vue3】引入 element-ui 组件库
qq_39921135的博客
06-16 913
使用的时候任何事情都不需要做，也不需要import。这个就是我们第二步配置的按需导入的强大之处。我们不需要去关心用哪个组件，它一旦发现你用了，它会帮助你提前注册的。正常情况下的components需要导入注册才能使用，但是使用了这个插件之后，直接在页面中使用组件即可，无需导入。**彩蛋：**默认 components 下的文件也会被自动注册~组件名字都是使用test-demo这种形式。一个是自动引入，另一个是组件注册。
Vue3项目中引入ElementUI使用详解
蓑笠翁
06-18 4万+
Vue3项目中引入 ElementUI详解，ElementPlus引入使用。
【vue】vue3使用element ui
努力变好
08-03 3万+
element-ui支持vue2版本，当用vue3安装element-ui的时候会报错，这就需要安装element-plus版本来用到vue3项目中。
Vue3 + ElementUI 环境搭建
JJJ
12-30 1504
Vue3 + ElementUI 环境搭建 1 安装 Node.js 官网下载，直接无脑安装。 安装好之后可以用以下命令检查是否安装成功。 # 检查 node 版本 node -V # 检查 npm 版本 npm -V 1.1 安装 Node.js 淘宝镜像加速器（cnpm） # -g 表示全局安装 # --save （简写：-S） 表示安装到当前项目下，即安装到项目的 node_modules 文件夹中 `npm install cnpm -g` 2 安装 Vue-Cli Vue 提供了一个官方的
JavaWeb——Vue
mxyjsu2021的博客
04-30 2189
Vue.js是一个流行的前端JavaScript框架，用于构建单页应用程序和可重用组件。Vue.js的设计目标是提供一种简单的方法来构建Web应用程序，同时尽可能地灵活和高效。Vue.js也被称为MVVM(Model-View-ViewModel)框架，因为它将应用程序的状态和行为分离成模型(model)、视图(view)和视图模型(viewmodel)的组件。官网：Vue.js修改变量的值，标签值自动变化；反过来，修改标签的值，变量的值也跟着更新，这就是双向绑定。
[软件设计]vue+threejs+elementUI+larvel+mysql开发企业内网3D模型库(一)
AsiWorld的博客
05-24 610
使用技术 前端:vue3+three.js 后端:php 数据库:mysql5.6 服务器软件:apache 服务器系统:centos8.0
移动应用开发vue.js起步（二）搭建前后端框架
自己记录用的博客
05-16 514
搭建前后端框架一、查看node安装二、全局安装vue-cli三、建立vue-cli项目四、安装element ui 一、查看node安装 C:\Users\Administrator>node -v v12.16.1 二、全局安装vue-cli 在命令行中运行命令 npm install -g @vue/cli 查询版本 vue --version @vue/cli 4.2.3 三、建立vue-cli项目 参考这个简书 https://www.jianshu.com/p/5e13bc2eb97c
从零开始搭建自己的VueJS2.0+ElementUI单页面网站（一、环境搭建）
热门推荐
天降风云的博客
05-26 9万+
前言VueJS可以说是近些年来最火的前端框架之一，越来越多的网站开始使用vuejs作为前端框架，vuejs轻量、简单的特性使得前端开发变得更加简易，而基于vuejs的前端组件库也越来越多。我们今天使用的ElementUI，是饿了么团队开发的一款基于vuejs的前端组件库，也是众多vuejs组件库里面比较优秀的一款。这里要说一下我们构建网站所需要用到的一些东西： NodeJS（npm） Webstor
手把手教你搭建VUE+VScode+elementUI开发环境
wdyan297的博客
05-16 1万+
通过详细的步骤描述和截图说明，手把手教前端新手搭建VUE+VScode+elementUI开发环境。
vue.js开发环境搭建
星空之旅1995
01-10 2012
vue.js开发环境搭建 1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖  在cmd里直接输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，回车，等待安装..
从零开始搭建自己的VueJS2.0+ElementUI单页面网站（二、编写导航页）
天降风云的博客
05-28 3万+
从零开始搭建自己的Vuejs2.0+ElementUI单页面网站之使用vue-router编写导航页面
从零开始搭建自己的VueJS2.0+ElementUI单页面网站（三、组件编写及通信）
天降风云的博客
10-23 1万+
前言本文是本系列的第三篇文章。在前两篇文章中我们介绍了关于搭建vue+elementUI开发环境的方法和编写导航页的方法。关于前两篇文章的内容，若读者有些记不清楚，可以点击下方链接快速查看： 从零开始搭建自己的VueJS2.0+ElementUI单页面网站（一、环境搭建） 从零开始搭建自己的VueJS2.0+ElementUI单页面网站（二、编写导航页）
Vue整合ElementUI
越努力越幸运的博客
10-09 2万+
Vue整合ElementUI 首先说一个事儿，要用ElementUI，最好是用Vue的脚手架先搭建好项目再用，如果直接在HTML中通过导入在线的vue、axios、elementUI的依赖，然后直接用的话。。。。会很麻烦，而且布局可能也会跟官网给你的不太一样。（这雷我先踩了，不信的小伙伴也大可以自己去试一下，毕竟也有可能是本人智力问题嘿嘿嘿） ok，废话不多说，我们直接从vue怎么整合ElementUI说起。 首先，我们通过vue-cli创建我们Vue的脚手架。（不知道怎么下载vue-cli和搭建的，可以看
搭建VUE+ElementUI开发环境以及路由页面
weixin_72007869的博客
02-24 1438
本文章会说明如何搭建VUE环境并创建一个测试项目启动，以及安装编辑器vscode并通过编辑器引入element-ui，再路由一个页面测试element-ui是否可用。
使用Vite搭建Vue3+ElementUI-Plus项目过程
胡海龙
05-06 1万+
本文主要记录使用VIte搭建一个Vue3+ElementUI-Plus，以及集成Vue Router的过程。本次搭建过程的Nodejs版本为 V16.14.2 创建项目 初始化项目 使用vite创建一个vite+vue的项目 npm init vite@latest my-vue-app -- --template vue 注意：npm7+后面需要多添加的双横杠 my-vue-app是项目的名称，可以根据自己的需要修改，后面--template vue表示创建一个vue模板项目。 添加依赖并运行 然后.
Vue2.0+ElementUI+PageHelper实现的表格分页
天降风云的博客
04-19 6万+
Vue2.0+ElementUI+PageHelper实现的表格分页
Vue+elementui搭建开发环境
qq_37949984的博客
06-06 550
Vue+elementui搭建开发环境 1.检查本地是否安装node： node -v 如果没有安装从node官网上下载相应的node，安装成功即可。 2.检查本地npm版本：npm -v，如果版本太低可以通过： npm install -g npm 进行升级 3.全局安装webpack： npm install webpack -g 4.安装vue脚手架： npm install vue-c...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值