这个东西其实很简单,但是我搜了好多文章,搞了一整天,然后在最后突然开窍,五分钟就改好了,辛苦了我这一天的时间啊,全都用来干这个事情了,但是,我这个是实验版,并不是那么符合你们想要的结果,但是思路已经给你们了,只要把数据变成数据库取出的就行了。首先,我们先找到登录界面下面这个是点击登录按钮的时候,进行的发送请求的操作,但是具体操作没有写在这个里面,而是写在了vuex里面,通过dispath可以看出来
转载
2024-05-16 08:19:39
89阅读
提要Vue2.0+Vuex+ElementUI是现在很多项目都在使用的BS软件的开发组合。Vue相较于Angular具有学习成本低,上手快以及组件轻量化的特点;相较于React,其官方提供的很多指令以及可以自定义的指令能够为让开发更加高效。并且相较于React生命周期监听所有props和state的变化,Vue中提供的watch方法监听单个数据的变化,能够更加直观的进行数据操作。需要修改源码的项目
转载
2024-06-12 20:13:44
50阅读
分析Element-ui封装思想在平时写业务或者是写玩具的时候为了方便,我们会使用各种各样的组件库。虽然说基本需求看文档就可以了,但是文档中提供的方法和业务需求相比肯定是有一定差距的,这时候就需要自己封装组件了;并且,在写了一些代码后感觉,其实在不同的项目中写过功能差不多相同的代码,那为什么不封装一下方便以后、或者是其他人使用呢?写这篇博客的时候参考了b站up主樱满空的视频。文章内容会不断的更新,
转载
2024-03-07 14:43:22
661阅读
原创
2021-09-07 14:52:03
1422阅读
写在开头时隔大半个月,最近终于又有些时间来写文章啦( ̄▽ ̄),写文章我一直认为是一种巩固知识的好方式,不仅加深、巩固自己学到的东西,而且会有一个比较好的整理归纳,也能方便自己随时的查阅。而这次分享的文章主题是 element-ui 源码系列,element-ui 包括新版的 element-plus 我一直认为是两个非常棒的 UI 框架(当然其他框架也很棒啦,手动狗头保命-.-),它们是值得我们去
转载
2024-02-19 17:28:15
258阅读
1、基本用法Vue 提供了 v-model 指令,用于在表单类元素上双向绑定数据,例如在输入框上使用时,输入的内容会实时映射到绑定的数据上。例如下面的例子:<template>
<div id="app">
<input type="text" v-model="message" placeholder="输入">
<p>输入的内
转载
2024-07-15 20:34:03
66阅读
1.事件绑定:v-on指令 基本使用 在
Vue
中通过
v
-
on
指令给页面元素绑定事件。 语法: v-on:事件名="js代码片段或函数" //事件名=事件属性-on 比如:click=onclick-on
//函数必须定义在Vue示例的methods属性中。
const vm = new Vue({
el:"选择器",
met
前天下载了个vue移动端的demo(大家也可以学习一下:https://github.com/toutouping/vue-case),先是运行了cnpm install ;再运行了npm run dev ;然后就报了下面的错误: 对于刚进入编程领域的我来说,一看到这种报错,第一反应就是应该是scss没有安装,打开代码发现,demo里面果然用了scs
简单来说就是:配置sourcemap调试源码。但挺多人可能没学 webpack 这些所以不太会。 但很多小伙伴是写 Vue 的,可能平时用的是 Element UI 的组件库,所以这篇文章就来讲下怎么调试 Element UI 的源码。首先,我们用 Vue CLI 创建一个 vue2 的项目:yarn global add @vue/cli
vue create element-vue-t
本篇记录vue3 使用pinia修改state的三种方法1. 新建vue3项目,安装Pinia,不再详细描述。。。2.目录app.jsimport {defineStore} from "pinia"
const appStore = defineStore('appStore', {
state: () => ({
baseUrl: 'https://www.ba
转载
2024-06-05 10:06:25
0阅读
一、前言有时候,我们需要修改elementUI的源码,来达到boss们的要求。但是修改完之后,又不知道如何发布到npm上来安装。那么这一篇文章将介绍如何修改elementUI源码然后发布到npm上。二、fork一份elementUI源码首先去到github官网,然后搜索elementUI代码,进去看到该页面,然后点击Fork按钮fork完之后,记得修改一下项目的名字接下来使用git把代码clone
转载
2024-02-26 14:30:17
190阅读
最近element-ui升级到2了,添加了不少功能,可喜可贺,可喜可贺!然而,产品的需求依然那么刁钻,上传与删除图片还是要去改源码,为了同时用新的ele,决定在2中改源码然而,遇到问题了。 一开始与之前博客中描述的一样,将github上的目录弄下来,修改对应的组件,然后执行npm run dist,如下图: 没错,竟然报错了,报错的文件也很奇葩,是一个我根本没动过也没见过的js
转载
2024-04-08 12:54:33
98阅读
首页<template>
<div>
<div class="top">
<ul class="nav">
<li class="title">主题市场</li>
<li>女装/内衣/家居</li>
<li>女鞋/男鞋
1.背景即上一章节登录页面之后跳转主页面2.基本结构常见的页面布局,也是现在通用的布局。 代码:<template>
<el-container class="home-container">
<!-- 头部-->
<el-header>Header</el-header>
&
转载
2024-04-24 12:32:51
93阅读
目录结构解析 首先,我们先来看看 ElementUI 的目录结构,总体来说,ElementUI 的目录结构与 vue-cli2 相差不大:.github:存放贡献指南以及 issue、PR 模板,这些是一个成熟的开源项目必须具备的。build:毫无疑问,看文件夹名称就知道是存放打包工具的配置文件。examples:存放 Elemen
转载
2024-06-18 12:31:27
721阅读
目录一、修改vue-element-admin并打包“npm install”安装依赖“解决vue项目 npm run build 后打开 index.html 空白,不能访问等问题”将登陆相关请求接口改为静态数据,不请求接口 修改config下面的index.js中bulid模块导出的路径npm run build打包生成dist文件夹,打开dist文件夹中index.html能正常访
转载
2024-06-15 17:39:50
690阅读
起因因为准备看element-ui的源码,会做一些笔记,在源码中写一些注释,甚至对源码进行一些自定义的修改来查看运行效果。所以element-ui的文件夹不能直接npm install放在node_modules文件夹下面,node_modules文件夹一般是不同步到svn上的,放在里面的话在另一个电脑上可能重新安装项目自己的修改就没有了。对引入的外部组件,如果要自定义修改,那么都不能放在node
记一次element-ui源码修改需求:el-tree在拖拽的时候会自动处理树的数据以达到拖拽的效果.但是我需要对拖拽的数据做自定义的处理,所以需要屏蔽数据处理功能先找到node_modules>elelment-ui>lib>tree.js 直接修改代码,会生效,需求搞定 但是有一个疑惑,为什么这个文件夹的格式这么奇怪,也不易阅读,同样package/tree.vue里的文件却
转载
2024-03-22 07:03:07
51阅读
scoped css官方文档scoped css可以直接在能跑起来的vue项目中使用。使用方法:<style scoped>
h1 {
color: #f00;
}
</style>使用scoped划分本地样式的结果编译结果如下:h1[data-v-4c3b6c1c] {
color: #f00;
}即在元素中添加了一个唯一属性用来区分。缺点一、如果用户在别处定
写在开头上一篇文章 ElementUI源码系列三 - 学习gen-cssfile.js文件之自动创建组件的.scss文件与生成index.scss文件内容 我们讲过添加一个新组件要经历三个步骤:第一步 - 创建组件目录结构第二步 - 创建组件样式文件第三步 - 总入口文件引入组件并且我们实现了第二步的自动创建操作,也就是仅通过命令即可完成创建文件,再也不需要手动创建操作。当然,这第二步还不够高级,
转载
2024-07-03 23:13:10
48阅读