🏆今日学习目标:用ElementPlus实现列表界面😃创作者:颜颜yan_✨个人格言:生如芥子,心藏须弥⏰本期期数:第四期🎉专栏系列:Vue3文章目录前言效果图目录简介修改vite配置文件ElementPlus简介ElementPlus安装和引用table完成列表界面运行vue项目总结前言哈喽大家好,本期我们用ElementPlus实现列表界面,我们先用vue+vite创建一个vue项目,创建项目可以参考:利用vite创建vue3项目噢~效果图目录简介创建项目成功后,目录如下👇.vscode:vscode的配置文件node_modules:执行npm时初始化的包文件public:存放公共资源s
🏆今日学习目标:用ElementPlus实现列表界面😃创作者:颜颜yan_✨个人格言:生如芥子,心藏须弥⏰本期期数:第四期🎉专栏系列:Vue3文章目录前言效果图目录简介修改vite配置文件ElementPlus简介ElementPlus安装和引用table完成列表界面运行vue项目总结前言哈喽大家好,本期我们用ElementPlus实现列表界面,我们先用vue+vite创建一个vue项目,创建项目可以参考:利用vite创建vue3项目噢~效果图目录简介创建项目成功后,目录如下👇.vscode:vscode的配置文件node_modules:执行npm时初始化的包文件public:存放公共资源s
作者有话说: 学习编程我们必不可少的就是做项目,在学习后端的同时,前端知识也是要学习滴,这篇文章将展示如何利用Vue和element-ui搭建前端界面。话不多说,进入主题!!!目录首先是Vue-CLI搭建Vue安装启动ElementUI安装Vue-router安装和搭建(组件路由)搭建步骤网络请求Axios是什么?Axios特性axios和ajax区别?网络请求中一些语法:发送请求:axios的常用API:axios的响应结果同样我们要添加axios相应拦截 总结首先是Vue-CLI搭建 我们之前写前端代码的时候,是将代码直接写在一个html文件当中,但是一个完整的项目,有许多模块
作者有话说: 学习编程我们必不可少的就是做项目,在学习后端的同时,前端知识也是要学习滴,这篇文章将展示如何利用Vue和element-ui搭建前端界面。话不多说,进入主题!!!目录首先是Vue-CLI搭建Vue安装启动ElementUI安装Vue-router安装和搭建(组件路由)搭建步骤网络请求Axios是什么?Axios特性axios和ajax区别?网络请求中一些语法:发送请求:axios的常用API:axios的响应结果同样我们要添加axios相应拦截 总结首先是Vue-CLI搭建 我们之前写前端代码的时候,是将代码直接写在一个html文件当中,但是一个完整的项目,有许多模块
el-table合并单元格1.固定合并官方挺提供的合并具体某行列的方法:el-table合并行或列通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。template>div>el-table:data="tableData":span-method="arraySpanMethod"borders
el-table合并单元格1.固定合并官方挺提供的合并具体某行列的方法:el-table合并行或列通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。template>div>el-table:data="tableData":span-method="arraySpanMethod"borders
安装element_UI之前需要安装VUE脚手架框架!第一步: 在Vscode随意打开一个文件夹,在集成终端打开npmi-g@vue/cli (检测:vue-V)第二步:新建一个文件夹,并且在集成终端打开安装VUE脚手架需要输入命令:vuecreateyan6 //yan6为自定义文件名1:选第三个自定义2:将formatter按空格取消勾选 然后回车3:为了兼容选择2.0回车4:输入N不保存本次配置(如有需要可以给此配置命名保存) 5:进入当前文件夹OK! 6:打开SRC里的APP.vue在终端打开输入npm runserve 即可运行本文件下载element-UI(注意!要在自己下载v
安装element_UI之前需要安装VUE脚手架框架!第一步: 在Vscode随意打开一个文件夹,在集成终端打开npmi-g@vue/cli (检测:vue-V)第二步:新建一个文件夹,并且在集成终端打开安装VUE脚手架需要输入命令:vuecreateyan6 //yan6为自定义文件名1:选第三个自定义2:将formatter按空格取消勾选 然后回车3:为了兼容选择2.0回车4:输入N不保存本次配置(如有需要可以给此配置命名保存) 5:进入当前文件夹OK! 6:打开SRC里的APP.vue在终端打开输入npm runserve 即可运行本文件下载element-UI(注意!要在自己下载v
分析Element-ui封装思想在平时写业务或者是写玩具的时候为了方便,我们会使用各种各样的组件库。虽然说基本需求看文档就可以了,但是文档中提供的方法和业务需求相比肯定是有一定差距的,这时候就需要自己封装组件了;并且,在写了一些代码后感觉,其实在不同的项目中写过功能差不多相同的代码,那为什么不封装一下方便以后、或者是其他人使用呢?写这篇博客的时候参考了b站up主樱满空的视频。文章内容会不断的更新,每一节内容分为props属性分析样式分析重新封装目录结构分析假设现在你已经在项目中安装了element-ui,此时打开node_modules目录往下翻,可以看到一个名为element-ui的文件夹。
分析Element-ui封装思想在平时写业务或者是写玩具的时候为了方便,我们会使用各种各样的组件库。虽然说基本需求看文档就可以了,但是文档中提供的方法和业务需求相比肯定是有一定差距的,这时候就需要自己封装组件了;并且,在写了一些代码后感觉,其实在不同的项目中写过功能差不多相同的代码,那为什么不封装一下方便以后、或者是其他人使用呢?写这篇博客的时候参考了b站up主樱满空的视频。文章内容会不断的更新,每一节内容分为props属性分析样式分析重新封装目录结构分析假设现在你已经在项目中安装了element-ui,此时打开node_modules目录往下翻,可以看到一个名为element-ui的文件夹。