ur home

移动端布局方案 postcss-pxtorem

import axios from 'axios';import { getToken } from '@/utils/auth';export const downloadZip = (url: string, params: any, fileName: string) => { axios({ method: 'GET', url: `${process.env.VUE_APP_BASE_API}${url}`, headers: { Author.

第一步>npm i eslint eslint-plugin-vue -D>npm i babel-eslint eslint-plugin-node -D>npm i stylelint stylelint-config-prettier stylelint-config-standard stylelint-order -D第二步新建.eslintrc.js 文件，极简配置即可。// ESlint 检查配置module.exports = { root: .

解决方法删除 node_modules npm cache clean --force清理掉缓存 npm install重新安装依赖包 npm run serve 成功

1. auth工具类import Cookies from 'js-cookie'export function getCookie(key: string) { return Cookies.get(key)}export function setCookie(key: string, value: string, expires: number) { return Cookies.set(key, value, { expires: expires })}export...

这样得报错一般都是格式得错误；我将String用引号引起来了，所以造成了错误，也有可能时type得类型错误

背景因为一个页面的功能比较多，会拆分为上下多级的很多组件，当一个组件有修改时，需要触发另外一个组件调用接口一，vuex 声明全局变量

git clone https://github.com/vuejs/vue.git克隆下来后将package.json文件中的scriptdev命令后面添加这个--sourcemap。{ "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap"}npm i# 在 dist/vue.js 最后一行追加一行 //# sourceMappingURL=vue.j...

子组件 <el-select v-model="model" :placeholder="`请选择${placeholder}`" :size="size" @change="selectChange($event, item.code)" > <el-option v-for="option in item.options" :key="option.value" :label="opt...

本篇幅讲解的是，招聘管理系统-前端路由和登录拦截器求职者端使用uniapp开发，且不登录也可以查看职位，不涉及路由和登录拦截器B端管理端使用vue2.0+ts开发，关于路由配置可以查看这篇文章，讲的很详细 vue2.x搭建saas项目系列之三：router配置相关B端管理端-登录拦截相关逻辑如下核心就是使用路由的钩子函数permission.tsimport router from './router'import { Route } from 'vue-router'...

既然获取分发的内容，应该在子组件里面写这个实例属性。父组件 <ui-timeline v-if="total > 0"> <ui-timeline-item :timelineItemPaddingBottom="50" v-for="(item,index) in tableData" :key="index" :icon="item.icon" :fontWeight="item.fontWeig..

方法1<video :src="videoUrl" controls preload="auto" id="videoPlayer"></video><p>{{ videoDuration }}<p>private videoDuration: any = ''setTimeout(() => { this.videoDuration = document.getElementId('videoPlayer').duration.

子组件 private selectChange(item: any, option: any) { this.$emit('selectChange', item, option) }父组件<father @selectChange="selectChange(arguments)"></father>private selectChange(arr: any) { console.log(arr)}...

本篇幅讲解的是，招聘管理系统-B端运营端-前端项目的架构搭建及模块1. 首先创建项目vue create recruit-op-ui2. 编写项目目录架构

参考此博文vue2.x搭建saas项目系列之七：API接口及常量、基础数据统一维护

此篇幅主要介绍、我们是如何全局管理及使用工具类相关，如有不足和建议请留言，在此感谢，项目目前阶段还处在少年，一直在迭代一. utils// 注册 自定义工具函数import * as ompUtils from '@/utils/utils'// Register global utils functionsVue.prototype.$ompUtils = ompUtils declare module 'vue/types/vue' { interface Vue { .

在写业务代码时，会遇到各种需要对用户输入的数据进行校验的场景，最常见的就是表单验证，各种非空校验，正则校验等等这里我就分享下在项目中是如何封装使用的1. 属性介绍参数 说明 类型 可选值 默认值 model 表单数据对象 object — — rules 表单验证规则 object — — 2. 主组件index.vue<template> <el-form ref="draw.

前端 vue2.0C端 使用uniapp开发，主要功能模块包括：注册登录、职位列表、编辑简历、已投递职位、面试成功职位B端 使用vue2.0+ts开发，主要功能模块包括：注册登录、发布修改删除职位、求职者信息列表、面试状态的变更S端 暂定 准备使用ruoyi一套开发，主要功能包括：职位审核、B端用户注册审核服务端 nestjs会包含以下三个项目recruit-corerecruit-ma c端业务代码recruit-op b端和s端业务代码数据库 my

此篇幅主要介绍、我们是如何做mixins的公共类封装，如有不足和建议请留言，在此感谢，项目目前阶段还处在少年，一直在迭代由于是saas项目，对于Table的搜索、操作都差不多，于是基于类似的场景抽离了多个mixin类，直接在项目中混入即可Table index.ts/* * @Author: 无招 * @Date: 2020-11-04 09:42:29 * @LastEditTime: 2021-01-05 11:53:14 * @LastEditors: Please set .

此文章会介绍基于el-table、我是如何进行业务组件封装的，后续会补充

此篇幅主要介绍、我们是如何做API接口及常量统一维护，如有不足和建议请留言，在此感谢，项目目前阶段还处在少年，一直在迭代，路由版本目前为v1.0.0讲api之前，先贴一段封装的request.tsimport axios from 'axios';import { removeCookie } from '@/utils/auth'import { Message, MessageBox } from 'element-ui'const service = axios.create({.

vue saas项目，有很多Table，大部分Table都有多条件搜索功能，而多条件搜索功能每次写起来都很繁琐、代码也充足的多，而且多人开发情况下可控性太低;所以考虑对多条件搜索做一个封装，统一配置引用，达到一次注册、全局使用，提升开发维护效率和界面统一的效果。最终界面如下现状分析项目使用的是elementui框架，多条件搜索表单提交，需要使用el-form组件来封装，复杂点就是表单项有很多种，配置项包括input、select、datePicker、daterange、cascad.

在使用Upload 上传（通过点击或者拖拽上传文件），其实还是有些小坑的，如果我们在before-upload中直接返回true或者是false，那么它其实也是会上传文件的，因为它也会触发on-change函数。我这里是采用在对应的函数中返回一个promise来解决的，就像下面这样： /** * 图片文件验证 * @param file */ public imgBeforeUpload(file: any) { return new Promise((reso

此篇幅主要介绍、我们是如何做组件的，如有不足和建议请留言，在此感谢，项目目前阶段还处在少年，一直在迭代，路由版本目前为v1.0.0组件目录结构如图├──components # 组件相关所有文件││──basicCp # 基础组件可延伸││──businessCp # 业务型组件比较固定││──Element ...

此篇幅主要介绍、我们是如何做svg icon的统一管理，如有不足和建议请留言，在此感谢，项目目前阶段还处在少年，一直在迭代目录结构如图svg的文件可以从iconfont下载这里主要介绍下如何配置的1.安装vue-svgiconnpm install vue-svgicon -D2.package.jsonscripts"svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6...

此篇幅主要介绍、我们是如何做样式的统一管理，如有不足和建议请留言，在此感谢，项目目前阶段还处在少年，一直在迭代，CSS 预处理器的选择Less样式目录结构如图根据命名应该可以了解到每个文件对应的内容这里也介绍下，Vue自动化导入文件 (用于颜色、变量、mixin……)，style-resources-loader的使用1.插件安装方法1：分开安装安装style-resources-loader官方安装及使用文档：https://www.npmjs.com/pac...

此篇幅主要介绍、我是如何做路由的配置和路由常量的抽离，如有不足和建议请留言，在此感谢，项目目前阶段还处在少年，一直在迭代，路由版本目前为v1.0.0路由目录结构如图├──router # 路由相关所有文件││──modules # 以一级菜单命名的模块文件││──_import_xxxx.ts # 开发、生产环境的配置││──common.ts ...

此篇幅主要介绍、我是如何在vue-cli默认目录结构上去定义此项目的目录结构，如有不足和建议请留言，在此感谢如图，就是我们项目的目录结构，对于所有的模块都做了细分，目前业务不是很复杂，单页面应用可以支撑，后续可能会考虑使用微前端重新架构├──public #静态资源││──favicon.ico #favicon图标││──index.ht...

vue+ts根据银行卡号判断属于哪个银行，并返回银行缩写及银行卡类型可以把这段代码拷贝到自己的vue项目中，根据银行卡号获取所属银行，银行名称，银行编码，银行卡种。正确展示<template> <div> <el-row> <el-col :span="8"> <el-form ref="formRef" :model="formModel" :rules="formRule"> &

前言vue2.x搭建saas项目系列之一：架构简介 vue2.x搭建saas项目系列之二：项目目录结构介绍 vue2.x搭建saas项目系列之三：router配置相关 vue2.x搭建saas项目系列之四：styles统一管理 vue2.x搭建saas项目系列之五：svg icon的使用 vue2.x搭建saas项目系列之六：component统一注册(目前正在搭建UI组件库，后续会考虑使用npm i ui) vue2.x搭建saas项目系列之七：API接口及常量统一维护 vue2.x搭建

一、描述 linux和windows npm run build报如下错误error in ./src/assets/images/404_images/404.pngModule build failed (from ./node_modules/image-webpack-loader/index.js):Error: Cannot find module 'gifsicle'Require stack:- /UI/node_modules/imagemin-gifsicle/i.

参考vue-markdown-loader参考Element源码系列——Vue加载Markdown格式组件上篇（如有侵权，请联系本人，会尽快修改）愿意：开发一套内部ui组件库，适用于B、S不废话，直接开始1.项目是基于ts、vue2.x2.安装相关依赖markdown-it 渲染 markdown 基本语法markdown-it-anchor 为各级标题添加锚点markdown-it-container 用于创建自定义的块级容器vue-markdown-loader 核心loadert

configureWebpack: config => { config.optimization.minimizer[0].options.terserOptions.compress.drop_console = process.env.NODE_ENV === 'production' // provide the app's title in webpack's name field, so that config.externals = { name:.