前端
关注
分享
扫一扫
一只小泰迪
疯狂的小狗
展开
-
vue element admin从后端获取数据动态生成路由
vue element admin从后端获取数据动态生成路由登录、获取角色什么这些简单，按照后台调用vuex再调用接口就完事了。以上截图的例子与后端接口有关，没有接口前端可以也可以自行模拟。先看后端接口返回的数据格式是什么？如果不是树，自行可以根据id关系自行转换一个树。{ "code": 20000, "errmsg": "get menutree ok", "data": [ { "id": "11", "p原创 2021-08-13 14:23:32 · 2178 阅读 · 2 评论 -
vue CLI项目使用腾讯地图获取当前位置
vue CLI项目使用腾讯地图获取当前位置1.index.html引入：<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>public目录下的index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8原创 2021-04-26 08:57:26 · 781 阅读 · 1 评论 -
webpack-01学习
webpack学习前言在没有出现模块管理器之前的前端开发，如果要引用依赖资源，通常的做法是将依赖文件引用到.html文件中。比如，要引用js文件，在.html文件中用<script>标签引用；引用.css文件，在.html文件中用<link>标签引用。这样做的弊端是，如果引用的资源文件太多，请求太多，或拖慢网页的加载速度，影响用户体验，另外也会使得网页体积臃肿、不便维护。随着模块管理器的出现，上述问题得到解决。目前市面上的包管理器有很多，比如Bower、Browserify、we原创 2021-03-14 22:20:48 · 165 阅读 · 0 评论 -
npm-01学习
npm一、什么是npm?简单来说npm(Node Package Manager)是包含在Node.js里面的一个包管理工具，如果读者之前使用过Node.js，那么对npm应该不会陌生，因为npm会随着Node.js一起安装。npm是世界上最大的软件注册表，其为卡发着连接到了一个广阔的JavaScript世界。据官方数据统计，npm大约每周有30亿的惊人下载量，其中包含大约60万个package(代码模块）。npm为开发者提供了一个代码模块共享的大平台，开发者既可以从npm服务器上下载其他开发人员共享原创 2021-03-14 20:33:25 · 197 阅读 · 0 评论 -
vue面试题
vue面试题来源：https://juejin.im/post/5d59f2a451882549be53b170一、说说你对SPA单页面的理解，它的优缺点是什么？SPA（single-page application）仅在web页面初始化时加载相应的HTML、JavaScript和CSS.一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现HTML内容的变换，UI与用户的交互，避免页面的重新加载。优点：用户体验好、快，内容的改变不需要重新加载整个页面原创 2021-03-10 17:12:22 · 232 阅读 · 0 评论 -
vue拖拽实现app或小程序装修界面
vue拖拽实现app或小程序装修一、最终效果图参考引用作者：作者：李白不吃茶v原作者源代码git地址：大神的源代码这里是引用二、需要安装的依赖安装：vuedraggable语法：npm install vuedraggable三、先了解一下拖拽下面是HTML5的拖拽事件dragstart: 开始拖元素触发dragenter:元素拖进可drop元素（绑定drop事件的元素）时触发dragover:当元素拖动到drop元素上时触发drop:当元素放下到drop元素触发drag原创 2021-03-08 17:12:04 · 5649 阅读 · 12 评论 -
nuxt.js中安装element-ui
nuxt.js中安装element-ui1.安装element-uinpn install element-ui --save2.在package.json中查看3.创建文件在项目的根目录下的plugins下创建ElementUI.js文件import Vue from "vue";import ElementUI from "element-ui";Vue.use(ElementUI);4.引入文件在nuxt.config.js中修改如下：// Global CSS: https原创 2021-03-05 14:06:59 · 756 阅读 · 0 评论 -
nuxt.js中的静态图片显示不出来解决方法
nuxt.js中的静态图片显示不出来解决方法<script>export default { data() { return { imgList: [ { name: "图1", url: require("../static/banner1.png") }, { name: "图2", url: require("../static/banner2.png") }, { name: "图3", url: requir原创 2021-03-05 13:55:56 · 3102 阅读 · 0 评论 -
创建基本的webpack4.x项目
创建基本的webpack4.x项目1.运行 npm init -y 快速初始化项目2.在项目的根目录创建src源代码目录和dist产品目录3.在src目录下新建 index.html 和 main.js 入口文件4.使用 cnpm 安装 webpack ，运行 cnpm i webpack -D 安装 cnpm npm i cnpm -g5.再安装 cnpm i webpack-cli -D6.注意：webpack 4.x 提供了约定大于配置的概念，目的是为了尽量减少配置原创 2021-02-03 10:59:28 · 147 阅读 · 0 评论 -
vue element ui 表格带分页全选情况
vue element ui 表格带分页全选情况1. 效果2. 原理我们真实的情况，选择一条或者多条，将选择的id拼接成一个id数组传给后端，但是问题，如果数据过多的话，全选加入有4-5W条数据传递起来很费力而且可能会出错。和后端商量，当全选选择全部数据时，我们前端只传递一个参数，用这个参数表示选择全部即可。但是问题来了，前端的样式需要我们来进行调整。实现要求，点击了全选之后，切换下一页，也必须是全选的。实际实现请参考具体简单代码例子，实际业务数据等还需自己增加。<template>原创 2021-01-28 16:32:52 · 2761 阅读 · 10 评论 -
vue element ui 根据数组长度制作折叠面板功能
vue element ui 根据数组长度制作折叠面板功能1.先看效果2.原理利用vue的计算属性来进行控制数组的长度。<!-- * @Author: qiaokun * @Date: 2020-12-14 10:16:03 * @LastEditTime: 2021-01-20 11:42:45 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath:原创 2021-01-28 16:08:42 · 716 阅读 · 0 评论 -
vue对象深拷贝以及排序
vue对象深拷贝以及排序// 计算属性中 // 动态计算预览排序 sortList() { const arr = JSON.parse(JSON.stringify(this.pictureNavigationForm.list)) return this.sortBykey(arr, 'displayOrder') } // 方法中 // 排序方法 sortBykey(array, key) { return array.so原创 2021-01-21 13:39:19 · 159 阅读 · 0 评论 -
element ui 抽屉的用法 以及 去掉点击时有条黑线
element ui 抽屉的用法 以及 去掉点击时有条黑线1.效果2.使用代码 <el-drawer :visible.sync="drawer" :with-header="false" style="color:#000;zIndex:999;" size="20%" :append-to-body="true"> //这里面的内容，可以自行定义 <yp-user-info :currentUser="currentUser" @closeDrawer="c原创 2021-01-16 10:25:01 · 1117 阅读 · 0 评论 -
vue + element 实现快速关闭动态tabs功能
vue + element 实现快速关闭动态tabs功能1.效果图样式自行修改，如何制作动态导航栏，请参考我之前的文章，有一章专门记录如何制作动态tabs,请参考系列文章2.代码commonTab.vue 动态tabs组件<template> <div class="common-tab"> <div class="tab-menu"> <div> <el-tag :key="tag原创 2021-01-03 12:49:37 · 3271 阅读 · 2 评论 -
element-ui 制作登录界面，记住密码功能，账号密码自动填冲解决办法
element-ui 制作登录界面，记住密码功能，账号密码自动填冲解决办法 <el-input v-model.trim="loginForm.password" prefix-icon="el-icon-unlock" :placeholder="$t('lang.password')" @input="change($event)" type="password" auto-complete="new-password"></el-input&g原创 2021-01-03 12:41:30 · 1192 阅读 · 0 评论 -
22.el-input输入框值输入无显示怎么解决？
22.el-input输入框无显示怎么解决？原因有时候el-input由于嵌套的层级比较多，数据双向绑定实现不了。解决办法一：减少嵌套层数解决办法二：// 监听input事件<el-input v-model="loginForm.username" prefix-icon="el-icon-s-custom" placeholder="请输入用户名" @input="change($event)"></el-input>// 在method方法中写 /原创 2020-12-10 09:20:16 · 2502 阅读 · 0 评论 -
21.element el-table表格以及树形表格封装
21.element el-table表格以及树形表格封装1.效果图树形表格效果图普通表格效果图2.表格组件组件名称:YpTable.vue组件内容：当然有其他的需要加的可以自行添加一些其他类型<template> <el-table :data="list" stripe border :default-expand-all="expand" row-key="id" :tree-props="{ children: children }"> &原创 2020-12-03 20:33:14 · 3022 阅读 · 2 评论 -
20.vue 登录记住密码功能
20.vue登录记住密码功能Login.vue<template> <div class="container"> <div class="login-box"> <div class="login-text"> 登 录 <br /> <span>欢迎使用xxx软件</span> </div> <el-for原创 2020-12-01 20:12:41 · 240 阅读 · 0 评论 -
19.vue中封装echarts组件
19.vue中封装echarts组件1.效果图2.echarts组件npm install echarts<template> <div ref="echart" style="height:100%;">echarts组件</div></template><script>import echarts from 'echarts'export default { props: { chartData: {原创 2020-12-01 14:45:29 · 413 阅读 · 0 评论 -
18.vue简单表格封装以及国际化不更新表头
18.vue简单表格封装以及国际化国际化可以看一下前几张的文章1.思路数据是从后端返回的，如果没有接口。自己可以在data中自己定义数据封装的表格组件将表名抽成一个数组对象，表格数据是一个数组对象，表格数据：// 表格数据 memberList: [],表格标签：为了国际化，我把表格label字段，放进语言包，以下代码，需要放入计算属性中，不然语言切换，表头是无法更新的。[ { label: this.$t('lang.month'),原创 2020-12-01 14:23:51 · 926 阅读 · 0 评论 -
17.vue自定义主题颜色皮肤
17.vue 自定义主题1.安装需要的相关依赖npm i element-theme -gnpm i element-theme-chalk -D2.初始化变量文件 et -i项目根目录下生成打卡此文件修改变量编译主题et3.引入主题在main.js中引入import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'/原创 2020-12-01 09:24:40 · 1615 阅读 · 9 评论 -
16.vue项目浏览器全屏screenfull
16.vue项目浏览器全屏screenfull1.安装screenfull这里使用vue ui 可视化界面2.导入screenfull在commonHeader.vue组件中导入代码如下，有基础的直接看方法就可以<template> <header> <div> <i class="el-icon-s-fold" v-show="!isCollapse" @click="collapseMenu"></i>原创 2020-11-28 15:25:33 · 415 阅读 · 0 评论 -
15.vue项目引入阿里图标库步骤
15.vue项目引入阿里图标库打开阿里图标库找到自己想要的图标阿里图标库地址下载完成后解压，将解压后名称修改为fonts2.将fonts导入vue项目将fonts目录复制进入assets目录中在main.js中全局导入文件// 导入字体图标库import './assets/fonts/iconfont.css'3.使用fonts下载的fonts中的.html结尾的打开有教如何使用fonts这个是本地的打开的<template>原创 2020-11-28 14:52:08 · 585 阅读 · 0 评论 -
14.vue国际化vue-i18安装和使用
13.vue国际化vue-i18n安装和使用说明：有一点基础的，可以只关注方法，没有基础的可以从我的前面文章查看，从零开始1.安装vue-i18n2.引入vue-i18n在main.js中引入vue-i18nimport Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import './plugins/element.js'import原创 2020-11-28 10:37:52 · 1504 阅读 · 0 评论 -
13.前端后台管理系统代码
13.前端后台管理系统vue-admin-template1.效果演示登录界面主页部分动态tabs2.项目地址前端后台管理系统（vue-admin-template）地址：https://gitee.com/mmc88/vue-admin-template.git技术成长后再进行补充其他功能！大佬勿喷...原创 2020-11-27 14:35:09 · 1957 阅读 · 0 评论 -
12.动态tabs优化以及退出功能
12.动态tabs优化以及退出功能1.关闭tab关闭当前tab时，需要判断当前是否是选中、高亮,如果当前是高亮，那么，关闭当前选中高亮，关闭后，任意前后高亮，如果当前是非高亮状态，那么关闭之前需要先存储当前高亮显示的，在进行关闭，原因：需要刷新后做处理<template> <div class="common-tab"> <div class="tab-menu"> <el-tag :key="tag.name"原创 2020-11-27 11:09:13 · 451 阅读 · 0 评论 -
11.后台管理系统之动态tabs制作
11.后台管理系统之动态tabs制作原创 2020-11-26 14:57:57 · 859 阅读 · 2 评论 -
10.后台管理系统-首页头部组件制作
10.后台管理系统-首页头部组件制作1.新建首页头部组件组件位置：components/common/CommonHeader.vue组件内容<template> <header> <div> <i class="el-icon-s-fold"></i> <i class="el-icon-s-unfold" v-show="false"></i> </div&g原创 2020-11-25 21:02:04 · 868 阅读 · 0 评论 -
9.后台管理系统主页面布局以及左侧导航栏设计
9.后台管理系统主页面布局以及左侧导航栏设计1.首页布局步骤：在views目录下新建Main.vue文件，作为登录之后的布局参考：element-ui使用此模块的目的是，当中间内容部分有超出时，可以固定左侧以及头部不动，中间内容进行滚动代码<template> <el-container style="height: 100%;"> <el-aside width="200px" style="background-color:blue">原创 2020-11-25 17:46:55 · 8823 阅读 · 2 评论 -
8.安装mockjs以及简单实用
8.安装mockjs以及使用1.可视化安装mockjs如下图2.封装mock数据在src目录下创建mock目录，在其中创建index.js统一接口数据模拟出口，在mock目录新新建login目录，login目录下新建login.js文件，为模块的请求文件login.js文件，为前端请求接口，相当于后端接口返回数据格式模块内容如下// 导入mockjs 使用数据// import Mock from 'mockjs'export default { loginInfo: ()原创 2020-11-25 14:42:36 · 539 阅读 · 0 评论 -
7.登录界面的制作
7.登录界面的制作直接贴代码，背景图片需要自己替换一下自己喜欢<template> <div class="container"> <div class="login-box"> <div class="login-text"> 登 录 <br /> <span>欢迎使用xxx软件</span> </div>原创 2020-11-25 11:10:45 · 230 阅读 · 0 评论 -
6.axios请求接口封装——vue
6.axios请求接口封装1. 安装axiosnpm install axios或者在vue ui 可视化中安装安装qs对POST请求进行序列化稍等一会儿，安装完成2.请求接口封装在src目录下新建api目录，在api目录下新建http.js文件内容如下```javascript// 导入 axiosimport axios from 'axios'// 导入qs 对post请求进行序列化，如果不需要序列化，可以不用导入// import qs from 'qs'原创 2020-11-24 21:45:13 · 345 阅读 · 0 评论 -
5.css样式全局配置
5.css样式全局配置1.可参考上一篇文档在src\assets\scss目录下新建global.scss全局配置样式文件内容如下：/* 定义全局样式表 */html,body,#app { margin: 0px; padding: 0px; height: 100%; width: 100%; background-color: #6699ff;}// 举例 ：全局配置修改element默认的颜色.el-button--primary { backgrou原创 2020-11-24 10:12:11 · 1137 阅读 · 0 评论 -
vue组件传值的方式--杂项
vue组件传值的方式1.创建vue项目，准备创建好项目之后，删除掉views中的about.vue和home.vue以及components目录中的HelloWorld.vue文件。再将router中index.js中导入组件的语句删除或者注释如下图：app.vue中2.创建新的文件结构如下在components目录下创建MParent.vue以及MChild.vue文件MParent.vue<template> <div> <div&原创 2020-11-24 09:43:29 · 199 阅读 · 0 评论 -
4.vue-admin-template css样式sass配置
4.vue-admin-template css样式sass配置1.安装sass-loader创建项目的时候，我已经安装了scss(node-scss)安装完成之后需要重新启动运行一下项目2.在src目录下写配置样式文件assets文件夹一般存放我们的静态资源目录在assets文件夹下创建scss文件夹，在scss文件夹下创建_variable.scss文件内容如下：$theme-color: #f03333;3.在项目根目录下新建vue.config.js进行配置配置内容如下原创 2020-11-22 20:45:10 · 775 阅读 · 0 评论 -
3.vue-admin-template开发格式配置
3.vue-admin-template开发格式配置1.在项目根目录下创建.prettierrc文件文件内容{ "semi": false, // 设置末尾不加分号配置 "singleQuote": true, // js中使用单引号 "printWidth": 200 // 代码行的宽度设置}2.eslint...原创 2020-11-22 20:19:03 · 787 阅读 · 0 评论 -
2.安装element-ui
2.安装element-ui<el-button type="primary">按钮</el-button>重新启动，运行一下项目安装完成，这里演示的是全量导入,按需导入可以自己百度进行安装。原创 2020-11-22 20:06:42 · 237 阅读 · 0 评论 -
1.vue ui 可视化创建vue项目
1.vue ui 可视化创建vue项目1.创建条件需要安装node需要安装vue-cli3如何安装node？自行百度查看安装node版本// 查看node版本号node -v安装vue-cli3// 安装npm install -g @vue/cli// 查看版本号vue -V2.命令行，打开vue可视化面板第一步：Windows键 + ‘R’ 键，输入cmd,回车，打开命令行工具第二步：输入vue ui,回车，自动打开，vue可视化面板。3.创建项目原创 2020-11-22 19:24:13 · 419 阅读 · 0 评论 -
echarts数据格式分析
数据图表数据分析说明：根据demo图标列出查询条件以及数据结构，不用在意效果样式，后期功能实现完毕后可进行美化日期：2020年11月20日作者：谯坤一、各个门店客单量分析原型图折线图\散点图x轴（表示？？？）y轴表示(客单量？)api参考数据格式{ "status": 200, "data": [ { "storeId": "0001", "storeName": "旗舰店", "storeData": [ { "原创 2020-11-22 18:22:19 · 2693 阅读 · 0 评论 -
element-ui vue 结合制作一个后台登录界面
登录页面一、定义全局样式设置新建global.css全局样式文件并且在main.js中引入代码：html,body,#app{ padding:0; margin:0; height:100%; width:100%; background-color: #6699ff;}检查##二、在components中新建Login.vue背景图片logo图片代码如下<template> <div class="container">原创 2020-05-11 10:53:26 · 1662 阅读 · 0 评论