Vue以及整合ElementUI

已于 2023-09-27 11:34:55 修改
阅读量876 收藏
点赞数
分类专栏： 谷粒商城 文章标签： vue.js elementui 前端
于 2023-09-27 11:28:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45451226/article/details/133322445
版权

初始化vue项目

#vue 脚手架使用 webpack 模板初始化一个 appname 项目
vue init webpack `appname`

启动 vue 项目

#项目的 package.json 中有 scripts，代表我们能运行的命令
npm start = npm run dev #启动项目
npm run build：将项目打包

项目结构

在这里插入图片描述
在这里插入图片描述

运行流程

在这里插入图片描述

编写一个自己的视图

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

做一个跳转效果

https://router.vuejs.org/zh/guide/

在这里插入图片描述
在这里插入图片描述

整合ElementUI

安装参考官网

https://element.eleme.cn/#/zh-CN/component/installation

npm install element-ui -S

在这里插入图片描述
在这里插入图片描述

使用一个页面布局并实现一个小需求

https://element.eleme.cn/#/zh-CN/component/container

在这里插入图片描述

复制官网提供的代码到App.vue中,将里的内容替换为路由视图

在这里插入图片描述

编写新的视图并加入到index.js里

在这里插入图片描述
根据官网https://element.eleme.cn/#/zh-CN/component/menu

在这里插入图片描述
的提示 NavMenu 导航菜单 可以点击进行页面跳转 router属性默认是false的，我们将它改为true。并且index且为路由地址
在这里插入图片描述
效果实现
在这里插入图片描述

鸡康
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3整合element ui
yang03_26的博客
04-08 421
1.使用包管理器 npm install element-plus --save 2.修改main.js import { createApp } from 'vue' import ElementPlus from 'element-plus'; import 'element-plus/theme-chalk/index.css'; import App from './App.vue'; const app = createApp(App) app.use(ElementPlus) app
vue2+elementui+electron项目配置
06-06
vue2+elementui+electron项目配置
Vue整合ElementUI
热门推荐
越努力越幸运的博客
10-09 2万+
Vue整合ElementUI 首先说一个事儿，要用ElementUI，最好是用Vue的脚手架先搭建好项目再用，如果直接在HTML中通过导入在线的vue、axios、elementUI的依赖，然后直接用的话。。。。会很麻烦，而且布局可能也会跟官网给你的不太一样。（这雷我先踩了，不信的小伙伴也大可以自己去试一下，毕竟也有可能是本人智力问题嘿嘿嘿） ok，废话不多说，我们直接从vue怎么整合ElementUI说起。 首先，我们通过vue-cli创建我们Vue的脚手架。（不知道怎么下载vue-cli和搭建的，可以看
vue3.0整合elementUi
liyu121的博客
04-13 1万+
一：安装依赖 cnpm install element-ui -S 二：vue项目在main.js中引入elementui import Vue from 'vue' import App from './App.vue' //组件 import HelloWorld from './components/HelloWorld.vue' import WangEditor from '....
vue3集成elementUI
本作者：想花
04-14 1766
1. 安装依赖 cnpm i element-ui -S #vue3上使用elementui需要安装element-plus cnpm install element-plus --save 2. 导入依赖 重写main.js文件内容 import { createApp } from "vue"; import App from "./App.vue"; import router from "./router/index"; import ElementUI from 'element-plus' i
VUE整合ElementUI
丑小鸭
01-06 373
VUE中整合 ElementUI比较简单，推荐查看 ElementUI的官网点击 1 安装 Element UI 的文件 npm i element-ui -S (命令行直接输入) 2 然后在 vue 项目中引入 element-ui import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui'; //配置 import 'element-ui/lib/theme-chalk/index
从0-1创建Vue项目,整合ElementUI
m0_55627541的博客
04-22 3636
从0-1创建Vue2.0项目
Vue工程整合ElementUi
sinat_37046190的博客
06-25 173
Vue工程整合ElementUi
html整合vue elementui,Vue 整合 element-ui
weixin_35149268的博客
07-05 275
element-ui 安装npm i element-ui -S安装 css 之类的相关的依赖npm install sass-loader@7.3.1 node-sass --save-dev引入使用标红色的部分是引入的代码. 在项目的 main.js 里面//The Vue build version to load with the `import` command//(runtime-o...
vuecli简单整合elementUi
m0_50210478的博客
08-16 180
elementUi文档 导入 vuecli在文件中安装elementUi插件 npm install element-ui -S 或者在ui插件界面，安装element-ui 安装后，在plugins中会发现，element.js文件 import Vue from 'vue' import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Element) 此种方式是引入了所有的elemen
vue中使用elementUI组件手动上传图片功能
10-15
Vue是一套构建用户界面的框架， 开发只需要关注视图层， 它不仅易于上手，还便于与第三方库或既有项目的整合。这篇文章主要介绍了vue中使用elementUI组件手动上传图片,需要的朋友可以参考下
electron +vue +elementui整合的项目
01-05
electron +vue +elementui 框架整合 ，减少整合的麻烦 相关的命令有 npm install npm run dev npm run build -- --win npm run build -- --mac
ssm整合 vue+elementui+ssm
06-15
ssm整合
vue+elementUI实现表单和图片上传及验证功能示例
10-17
主要介绍了vue+elementUI实现表单和图片上传及验证功能,结合实例形式分析了vue+elementUI表单相关操作技巧,需要的朋友可以参考下
关于element-plus中el-select自定义标签及样式的问题
x_XDGS的博客
06-14 307
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
最新发布
qq_42582773的博客
06-15 243
父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。
Vue3-滑动到最右验证功能
地理信息的专栏
06-13 394
在登陆页面，需要滑块，且滑块向右移动到最右边，完成验证
【Echarts系列】平滑折线面积图
kk爱闹
06-11 352
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
vue 国家省市区 elementui
11-08
Vue是一套用于构建用户界面的渐进式框架，它可以通过简单的API实现高效、灵活和可复用的组件化架构。Vue的核心库只关注视图层，易于上手，同时也便于与第三方库或既有项目整合。 ElementUI是一套基于Vue.js 2.0的桌面端组件库，它提供了一套丰富的UI组件，可以帮助开发者快速搭建出美观、易用的界面。ElementUI的组件风格简洁明了，同时也提供了丰富的主题定制功能，可以满足不同项目的需求。 国家省市区三级联动是指在选择国家后，根据国家的选择，动态加载出该国家下的省份，再根据省份的选择，动态加载出该省份下的城市，最后根据城市的选择，动态加载出该城市下的区县。这种三级联动的功能在很多电商网站和APP中都有应用，可以帮助用户快速选择所在地区，提高用户体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值