使用Visual Studio Code引入Element UI（详细小白版）

最新推荐文章于 2024-09-09 23:46:31 发布
最新推荐文章于 2024-09-09 23:46:31 发布
阅读量3.3k 收藏 16
点赞数 3
文章标签： vscode visual studio code elementui npm vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ava_jpp/article/details/125173433
版权
本文详细介绍了如何在Visual Studio Code中创建并配置Vue项目，使用Element UI库。从新建文件夹开始，逐步讲解了安装Vue、Element UI、创建项目、运行项目以及解决可能出现的问题，最后展示了如何添加Button组件和实现对话框功能。
摘要由CSDN通过智能技术生成

首先在桌面上新建一个文件夹，使用Visual Studio Code打开该文件夹，然后执行下面的操作

1.安装node.js

网址:nodejs.cn

下载好之后进行安装，安装完成之后在编译器中输入node -v 查看是否安装成功

如果出现node.js的版本号就表示安装成功，也可在cmd上打印node -v 两者是一样的

2.同时通过安装包安装node.js时会自带npm的环境，在控制台输入

npm -v

如果出现npm的版本号就表示安装成功

3.通过镜像安装cnpm来代替的npm 这样我们下载依赖的时候速度就会快很多

 npm install -g cnpm --registry=https://registry.npmmirror.com

等待镜像安装完成后再控制台输入

4.安装yarn 在控制台输入

npm install -g yarn

等待下载完成后在控制台输入

yarn

 如果出现以下格式就代表安装成功

最低0.47元/天 解锁文章
Jip-Ao
关注
VSCode搭建Vue Element Admin的项目环境
04-11
VSCode搭建Vue Element Admin的项目环境 版本： node：v18.20.2 npm:：10.5.0 git：2.19.1 vue-element-admin：https://panjiachen.gitee.io/vue-element-admin-site/zh/
VSCode前端Vue项目引入Element-ui组件，三步简单操作即可
weixin_45755709的博客
12-17 3130
VSCode前端Vue项目引入Element-ui组件，三步简单操作即可
【快速解决】搭建VUE+VScode+elementUI开发环境，Vue环境配置
VLOKL的博客
09-09 1323
【快速解决】搭建VUE+VScode+elementUI开发环境，Vue环境配置
VScode搭建element-ui环境
Leeyy
07-12 1678
从项目中找到报错的文件，发现server并无缺失，当鼠标悬停时出现上图提示选项，点击运行脚本后，正常运行显示和第一次一样的结果和网址。报错 应该是我再shell里选错了，vue3不能和element-UI一起使用。不要留有尾空格，这里不是代码逻辑出问题，而是不符合这个 Eslint 的规范。本文采用的解决方法，在命令后面加上 -legacy-peer-deps。错误点1：指令输入错误，没有server，是serve依赖。再次从vscode中运行时，发出错误声明，缺失sever。想要退出，ctr+c。
VSCODE VUE3 element-ui plaus 环境搭建
清流弯弯
07-06 4428
最近学习针灸，突然想搭建一个针灸学习网站，因此，重新学习了下 VUE3、elementui-plus,如果要做的话，就用这个先搭建本地网站试试。前提，安装好了 node.js vscode。
VScode使用element-ui插件准备
热门推荐
流楚丶格念的博客
05-16 1万+
文章目录插件1、Chinese(Simplified) Language Pack for Visual Stidio Code 中文汉化包2、Auto Close Tag 自动闭合标签3、Auto Rename Tag 尾部闭合标签同步修改4、Bracket Pair Colorizer 用不同颜色高亮显示匹配的括号5、Highlight Matching Tag 高亮显示匹配标签6、Vscode-element-helper7、live server Vscode-热更新插件8、Browser Prev
手把手教你搭建VUE+VScode+elementUI开发环境
wdyan297的博客
05-16 1万+
通过详细的步骤描述和截图说明，手把手教前端新手搭建VUE+VScode+elementUI开发环境。
element-ui 2.15.14版本
10-09
此外，描述中还提到可以使用 VS Code（Visual Studio Code）配合 Live Server 扩展来访问应用。VS Code 是一个强大的源代码编辑器，支持多种编程语言，而 Live Server 是一个扩展，能启动一个本地开发服务器并提供...
这样配置，让你的VS Code好用到飞起！
02-17
VS Code，全称Visual Studio Code，是一款由微软开发的免费、开源的代码编辑器，深受开发者喜爱。本文将详细介绍如何通过配置和安装插件，让VS Code的使用体验大幅提升。 首先，对于非英语母语的用户，可以安装...
vue的创建和element-ui组件导入开发（推荐vscode打开本资源）
03-25
在本文中，我们将深入探讨Vue的创建过程以及如何集成Element-UI组件库进行开发，假设我们正在使用Visual Studio Code（VSCode）作为开发工具。 一、Vue项目的初始化 1. 安装Node.js：Vue.js的开发需要Node.js环境，...
DelphiWebMVC+vue+element-ui开发事例.zip
05-29
4. **VSCode**：Visual Studio Code是Microsoft推出的免费且开源的代码编辑器，支持多种语言，拥有丰富的插件系统。在这个项目中，VSCode用于编写前端Vue.js代码，同时也可能用于编写Delphi的后端代码，提供了一体化...
详解如何在vue项目中引入elementUI组件
01-21
前提：已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一下初始后的demo，如果没有问题则进行安装elementUI npm run dev 安装 elementUI npm i element-ui -S 引入elementUI 在main.js中引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 测试 下面我们来测试一下 在创建header.
通过Vue+node.js+Element-UI+MySql实现超市管理系统.rar
12-16
本文旨在设计一个超市后台管理系统，运用Visual Studio Code编辑器和Vue-cli工具完成超市后台管理系统为超市管理员用户提供一个方便快捷的管理平台，其主要功能模块含有用户登陆模块，用户管理模块，权限管理模块，...
vscode创建vue+ElementUI项目
郝南过的博客
11-09 2975
vscode创建vue+ElementUI项目
vscode使用npm安装element-UI并添加router路由
qq_40452641的博客
01-09 1153
可以看到多了一行elementui就代表安装成功了。要启动welcome.vue还需要配置他的启动路径。要启动还要添加他的路由。这一步顺便装个axios方便以后写请求用。安装完成后需要启用elementUI。这里就以welcome.vue为例。安装完成后在目录结构打开下图文件。在main.js中配置一下启动项。最后配置welcome的路由路径。在他给的路径后面加上路由路径。vscode控制台输入指令。这里在官方文档根据提示安装。在main.js中添加路由。安装完成后加一个前端拦截器。下面是项目常用的结构。
VScode引入element-ui组件的步骤
m0_64450406的博客
08-04 568
如果在vue项目中引入element-ui失败，很可能是node.js版本匹配的问题，建议下载一个nvm管理node.js版本nvm安装步骤：我是参考这篇文章的非常详细。
【前端vue】二、element-ui组件库（引入到vue中）
qq_37449606的博客
04-08 288
2.elementui相当于一个库，封装好的内容，我们引入到vue项目中，就可用库中的内容。（2）将element-ui组件中的代码复制到HomeView.vue中。（1）先启动项目:到最后一层文件夹vuetest01→。2.vscode中打开终端，进入到最后一层的文件夹。下载依赖：npm i element-ui -S。3.注意下面操作过程中一定要保存：ctrl+s。3.main.js中引入element-ui。1.需要在搭建好的vue的基础上（可参考。依赖中多了element-ui。
在vs code 学习下载与使用element-ui
xw_009的博客
05-12 5147
中文官方文档看起来就很舒服 了解过一点bootstrap,希望接下来学习可以顺畅！ 1.安装
使用Visual Studio Code引入Element UI全局引用与按需引用对比
ava_jpp的博客
06-08 1394
首先参考之前文章Visual Studio Code引入Element UI（详细小白版）https://blog.csdn.net/ava_jpp/article/details/125173433?spm=1001.2014.3001.5501创建好项目后，在控制台输入 进入到这个项目路径下，后在控制台输入 这里的也等于当出现以下格式，代表依赖下载成功接下来点开我们项目中里的文件来引入 首先，输入以下代码来引入以及的样式文件 接下来将全局注入到项目中，输入以下代码 整体请参考下图 然后
如何在visualstudiocode中引入element
最新发布
09-12
在Visual Studio Code（VS Code）中引入Element UI可以通过以下步骤完成： 1. 安装Node.js和npm（如果尚未安装）： - 访问Node.js官网下载并安装Node.js。npm通常会与Node.js一起安装。 2. 创建或打开项目： - 如果你已经有了一个Vue项目，确保它包含在你的工作区中。如果没有，可以通过Vue CLI创建一个新的Vue项目： ```bash npm install -g @vue/cli vue create my-project cd my-project ``` 3. 安装Element UI： - 在项目根目录下，通过npm安装Element UI： ```bash npm i element-ui -S ``` - 或者使用yarn进行安装： ```bash yarn add element-ui ``` 4. 在Vue项目中引入Element UI： - 打开`main.js`或`main.ts`文件（取决于你的项目配置）并在文件顶部导入Element UI： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; ``` - 接着，在Vue实例中使用Element UI： ```javascript Vue.use(ElementUI); ``` 5. 使用Element UI组件： - 现在你可以直接在任何组件中使用Element UI的组件了。 确保在进行以上步骤之前，你的VS Code项目已经打开，并且你已经通过命令行进入项目目录。如果你是Vue新手，可能需要先学习一些基础知识，比如什么是Vue CLI、npm或yarn是什么，以及如何在VS Code中运行和构建Vue项目。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值