vue不用脚手架直接引用elementui组件（完整全过程）

最新推荐文章于 2024-05-17 11:40:43 发布
最新推荐文章于 2024-05-17 11:40:43 发布
阅读量1.8k 收藏 5
点赞数 3
分类专栏： 前端框架 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56047419/article/details/125375082
版权

1.创建vue普通模式

 

2.普通vue张什么样?

 

3.怎么导入elementui组件？（需要这两个文件的可以私我）

把 elementUI.css 和 elementUI.js 分别复制粘贴到css文件夹和js文件夹

然后在index.html中导入

 

4.怎么用？

直接在elementui组件库里找到想要的直接扒 想用哪个扒哪个

 

 

 

团团kobebryant
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue学习之Vue结合 ElementUI 组件库搭建Web工程项目
07-12
经过整个，目前实现了登录的表单验证功能，主页显示功能，路由转发功能，以及VueX,，提供给大家进行交流和学习用
详解如何在vue项目中引入elementUI组件
08-28
主要介绍了详解如何在vue项目中引入elementUI组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
不使用脚手架构建vue项目
达拉崩巴斑得贝迪卜多比鲁翁_
07-21 1839
不使用vuecli脚手架搭建vue项目
Vue引入并使用Element-UI组件库的两种方式
见证自己学习,成长的记录
01-10 1万+
在开发的时候，虽然我们可以自己写css或者js甚至一些动画特效，但是也有很多开源的组件库帮我们写好了。我们只需要下载并引入即可。vue和element-ui在开发中是比较般配的，也是我们开发中用的很多的，下面就介绍下如何在eue项目中引入element-ui组件库其他的组件库使用也是和上述步骤大同小异的。
非脚手架搭建自己的vue
weixin_41619400的博客
08-28 406
1、创建项目文件夹xxx 2、cd到xxx下: cmd 回车 3、xxx下运行 npm init 回车 最终生成 package.json 4、你怕吗install --save dev webpack 5、新建 文件夹src 下新建App.vue main.js index.html components文件夹 6、根目录西安新建 webpack.config.js 7、安装依赖报 npm install --save XXX > npm...
没有搭建脚手架时vue组件的使用
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
12-15 5101
没有搭建脚手架时vue组件的使用 全局组件 //全局组件 第一种声名方式 var s = Vue.extend({ template: "<h6>全局组件 第一种声名方式</h6>" }) Vue.component("hello", s); //前台标签调用 <hello></hello> //全局组件 第二种声明方式 Vue.compon.....
vue.js 加element ui不用 vue-cli 脚手架 直接导入 vue和 element包 形式
qq_43634411的博客
11-22 2627
项目的基本项目结构! sreen.js var vm = new Vue({ el: '#screen', // 引入初始化数据 data: components, // 引入方法 methods: interactions, // 引入 加载时需要 调用的方法 mounted: function () { } }); components 下的index.js 文件（全局初始化 的一些参数） // 定义一个全局变量 var components = {};
抛开脚手架搭建vue工程
u011134727的博客
08-28 1828
本期分享了vue如何快速搭建一个工程化的项目，并且是非常的轻量级的。安装对应的依赖，依赖分为三步骤，核心依赖库，构建工具库，.vue文件的编译库在每个文件编写对应的配置，即可完成一个轻量级的vue脚手架的搭建当然，有的同学会问这个从哪里来的，那就请看这里吧。...
HTML如何使用Vue3、Element-plus、Axios
Kou_No_DIO的博客
08-09 1330
有时候我们写一个网页的时候，不想使用脚手架去搭建，因为太笨重，但又想使用vue3去实现，怎么办？
vue不用脚手架封装组件的方法
weixin_45301448的博客
02-29 5142
第一中： 创建一个vue实例 <div id="app"> // mycom2 就是引入封装的公共组件 <mycom2></mycom2> </div> <!-- 定义再外面的 vue 模板组件而且是一个公共的组件 --> <template id="tmp1"> <div> ...
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)
03-01
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在...
vue3+ElementUI 图片素材管理组件
10-21
vue3+ElementUI 图片素材管理组件
vue中使用elementUI组件手动上传图片功能
10-15
Vue是一套构建用户界面的框架， 开发只需要关注视图层， 它不仅易于上手，还便于与第三方库或既有项目的整合。这篇文章主要介绍了vue中使用elementUI组件手动上传图片,需要的朋友可以参考下
Vue2（四）非单文件组件、单文件组件、脚手架vue-cli的基本使用
DogEgg_001的博客
07-26 590
1.传统方式缺点：结构复杂、代码复用率不高1.组件化方式组件的定义：实现应用中局部功能代码和资源的集合创建一个mixin.js文件存储混入对象// 分别暴露 适合一个文件内多个导出methods: {data() {return {age: 100,yy: 99本质是包含install方法的一个对象，install接收的第一个参数是Vue，第二个以后的参数是使用者在插件中传入的参数创建一个plugins.js文件// 关闭vue生产时提示。
不使用cli脚手架搭建vue项目工程(webpack简单配置)
热门推荐
破鞋何苦阑珊的博客
01-14 1万+
前言   今天介绍一篇关于工程搭建的文章。主要介绍不用cli脚手架搭建一套前端工程，因为每个公司不是用脚手架工具安装一下就能进行开发了，很多时候都是对工程有一定的定制需求，你没有深入的去了解cli脚手架的话，可能会很吃力，所以这块还是需要有一定的深入了解的，内容也不是太复杂，但是你需要掌握一些vue、webpack、nodejs的简单的基本概念和认识，也挺适合初级者阅读，我们学前端的小伙伴其实都...
vue不用脚手架实现组件化开发
九段刀客的博客
07-27 1829
组件文件 com-material.js const comMaterial = { template: ` <div> <div>999999{{name}}999999</div> <el-button> <slot></slot> </el-button> <el-button>{{age}}岁</el-button> </div&.
【不使用vue-cli脚手架 搭建Vue2.0项目环境】
qq_46106080的博客
12-17 1630
项目创建目录结构 一、初始化 npm init -y 二、安装依赖 2.1生产环境依赖 npm install vue vue-router -S 2.2开发环境依赖 npm install babel-loader babel-core vue-loader node-sass sass-loader css-loader style-loader webpack webpack-cli webpack-dev-server html-webpack-plugin vue-template-c
HTML使用Element-UI制作管理系统页面（无需脚手架以及创建vue工程）
qq_44229840的博客
07-12 1万+
入职培训到Web前端后布置了一个制作管理系统前端页面的任务，任务要求包含： 1.页面的布局主要为左侧导航菜单栏，右侧为信息展示栏，要体现嵌套 2.点击菜单栏切换右侧信息展示时左侧菜单栏不能刷新（使用iframe） 3.菜单栏需要做到能够动态伸缩 4.能够显示表格（添加table组件） 5.升级：添加button等对表格进行增删等操作由于自己前端很少接触，所以从来没有...
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
最新发布
weixin_58540586的博客
05-17 1190
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
vue keep-alive 缓存elementui组件
05-30
`keep-alive` 组件可以缓存任何组件，包括 Element UI 组件。 你想要缓存 Element UI 组件，只需要将其包裹在 `keep-alive` 组件中即可。例如，如果你想要缓存 `el-table` 组件，可以这样写： ```vue <template> <keep-alive> <el-table :data="tableData"> <!-- 表格列定义 --> </el-table> </keep-alive> </template> <script> export default { data() { return { tableData: [] } }, mounted() { // 获取表格数据 this.getTableData() }, methods: { getTableData() { // 获取表格数据的逻辑 } } } </script> ``` 在上面的示例中，`el-table` 组件被包裹在 `keep-alive` 组件中，表示需要缓存该组件实例。当组件被缓存时，表格数据不会被重新获取，而是直接使用之前获取到的数据。 需要注意的是，如果你在 `el-table` 组件中使用了一些需要动态更新的数据，那么这些数据需要在组件激活时重新获取。你可以在 `activated` 钩子函数中重新获取数据，例如： ```vue <template> <keep-alive> <el-table :data="tableData"> <!-- 表格列定义 --> </el-table> </keep-alive> </template> <script> export default { data() { return { tableData: [] } }, methods: { getTableData() { // 获取表格数据的逻辑 } }, activated() { // 在组件激活时重新获取数据 this.getTableData() } } </script> ``` 在上面的示例中，`activated` 钩子函数会在组件被激活时调用，此时可以重新获取表格数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

团团kobebryant

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值