Zero-To-One-优快云博客

原创 vue 运行报错 Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

需要卸载高版本安装指定版本 @5.1.1npm i postcss-pxtorem@5.1.1

2021-12-23 09:35:58 1510

原创 Vue中路由报错： NavigationDuplicated: Avoided redundant navigation to current location: “/user“.

这是因为连续点击相同路由导致报错(不影响正常操作行为)在router 文件夹下 index.js 中添加下面代码即可import VueRouter from 'vue-router'// 解决导航栏或者底部导航tabBar中的vue-router在3.0版本以上频繁点击菜单报错的问题。const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push (location) { ret

2021-12-09 20:42:54 983

原创 VUE-CLI 3.x的vue.config.js配置说明

module.exports = { baseUrl: "./", //1.默认为 "/":部署在一个域名的根路径上 ; 2. "./":所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径 outputDir: "dist", //默认为 "dist",指打包后的资源放置的路径，放在dist文件夹下 assetsDir: "static", //默认为:'' ,放置打包后生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。 .

2021-12-04 10:36:28 276

原创 vue的el-select同时获取label和value值

template的代码: <el-form-item label="设备类型:" prop="equipmentTypeDictionaryId"> <el-select v-model="equipmentTypeInfo.equipmentTypeDictionaryId" filterable placeholder="试试搜索:访客机" @change="selectType"> <el-option v-for="item...

2021-12-04 10:20:22 480

原创 VSCode在文件/函数添加作者，时间和注释等信息

1、安装插件KoroFileHeader2、左下角选择管理---设置---输入"fileheader"---点击"在setting.json中编辑"3、在json文件中添加下面代码 // 快捷键：ctrl + alt + i 生成头部注释 "fileheader.customMade": { "Author": "Jonathan", "Date": "Do not edit", "LastEditors": "Jonathan", "LastEditTime

2021-12-03 14:11:45 1832

原创模块 ““vuex““ 没有导出的成员 “createStore“。你是想改用 “import createStore from “vuex““ 吗

我的store/index.tsimport { createStore } from "vuex";interface State { userName: string;}export default createStore({ state: { userName: "小米", },});我的main.tsimport { createApp } from "vue";import App from "./App.vue";import "./index

2021-11-30 23:09:28 3211

原创 npm install -D 和-S的意思

-D表示npm install --save-dev-S表示npm install --save

2021-11-30 22:34:23 1381

原创 Cannot find module ‘vue-loader-v16/package.json‘

原因在于使用npm安装依赖的时候vue-loader-v16有部分资源因为网络问题下载不下来，换成国内镜像下载cnpm 下载先卸载vue-loader-v16依赖npm uninstall vue-loader-v16再使用cnpm安装vue-loader-v16依赖cnpm i vue-loader-v16就可以正常启动项目了...

2021-11-30 22:30:44 1514

原创 Vue— 获取当前时间并实时刷新

//1、在data中声明变量 data () { return { nowDate: null, // 存放年月日变量 nowTimer: '' // 时间定时器 }},//2、定义获取时间的方法getTime，并在created()声明周期里面调用，在实例创建前调用created() { this.nowTimer = setInterval(this.getTime, 1000) // 定时获取当前时间},//3、具体方法如下：methods: { .

2021-11-17 15:29:00 640

原创 vue element-ui的图标选择组件vue-fontawesome-elementui-icon-picker

效果图1. 安装cnpm install vue-fontawesome-elementui-icon-picker2.在main.js全局注册import iconPicker from 'vue-fontawesome-elementui-icon-picker' // elementui图标库Vue.use(iconPicker)3.template代码<el-form-item label="菜单图标:" prop="icon" class="default-f

2021-11-17 15:18:07 1547 6

原创 Vue中props类型及默认值

props: { stringProps: { type: String, default: '' }, numberProps: { type: Number, default: 0 }, booleanProps: { type: Boolean, default: true }, arrayProps: { type: Array, defaul...

2021-11-17 14:53:52 1819

原创 vue 汉字转首字母

1.首先安装cnpm install js-pinyin --save2.template代码<el-form-item label="企业名称:" prop="name" style="margin-top: -25px;"> <el-input v-model="unitInfo.name" maxlength="40" show-word-limit @input="createpy" /></

2021-11-17 14:41:12 571

原创 Js字符串和数组之间的转换

1、字符串转换为数组var string = '123,456,789';var result = string.split(',');console.log(result) //输出["123", "456", "789"]var string2 = 'abcdef'var result2 = string2.split('')console.log(result2) //输出['a','b','c','d','e','f']2、数组转换为字符串var array = ['a

2021-11-17 14:14:56 375

原创 js去除日期字符串时分秒

var date = "2021-11-16 00:00:00";var newDate=/\d{4}-\d{1,2}-\d{1,2}/g.exec(date)

2021-11-16 18:24:48 1343

原创 vue el-upload限制文件大小及类型等基本用法

template 代码<el-upload ref="upload" class="upload-demo" action="/api/app-device-manager-service-provider/v1/upload/upload-photo-face"

2021-11-16 17:25:37 1987

原创 Vue Element-UI 中el-table实现单选

el-table中单选的实现实现方式: 给el-table-column设置el-radio Template 代码<div class="default-page"> <el-table :data="accountList" v-loading="loading" highlight-current-row @current-change="handleCurrent" border height="250px"> <el.

2021-11-16 15:38:43 3311

原创 vue element-ui el-tag 改改

<el-table-column prop="available" label="企业状态"> <template slot-scope="scope"> <el-tag :type="scope.row.available ===1? 'success' : 'danger'" disable-transitions>{{scope.row.available ===1? '有效' : '无.

2021-11-03 11:59:41 504

原创将 vue 路由拆分到多个文件

对于稍微复杂点的项目，所有路由都混在一个页面，看着也很混乱，不清晰。所以按业务，就需要划分为多个路由文件index.js 的代码：import Vue from 'vue'import VueRouter from 'vue-router'// 引入其他路由文件import ManagementRoutes from '@/router/management'import ServiceRoutes from '@/router/service'const baseRoutes .

2021-11-03 10:42:17 930

原创 vue element中Cascader 级联选择器高度占满浏览器的问题

在全局样式文件global.css中添加高度配置即可解决：/* 解决下拉框下拉列表占满全屏的BUG */.el-cascader-panel{ height: 200px;}

2021-11-02 10:09:10 376

原创利用npm安装淘宝镜像的cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2021-11-02 09:43:20 6046

原创利用VSCode创建vue文件自定义模板

在一个Vue的项目中，反复的新建.vue文件是一个必不可少的，我们可以利用VSCode的snippet在.vue文件创建后能轻松地生成模板具体操作1、选择“文件 -> 首选项 -> 用户代码片段”->会弹出一个搜索框，输入vue 编译器会弹出一个vue.json文件2、之后会打开一个json文件这些注释就是告诉你怎么写模板。先删掉吧最后就剩下“{}”，然后我们把下面的模板内容黏贴进“{}”中：{ "Print to console": { ..

2021-11-01 17:12:44 1035

原创 Invalid options in vue.config.js: “baseUrl“ is not allowed

在vue-cli.3.3版本后 baseUrl被废除了，因此baseUrl要写成 publicPath。module.exports = { //baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' publicPath: process.env.NODE_ENV === 'production' ? './' : '/'}

2021-11-01 16:33:01 265

原创 vue引入echars5.0报错“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘的解决方法

使用echarts5.0版本的图表，会有警告但是又不影响使用(5.0更换了导入方式)import echarts from 'echarts'// 或 const echarts = require('echarts')Vue.prototype.$echarts = echarts获取切换旧版本// 卸载 Echarts5.0npm uninstall echarts// 规定版本来安装（选择自己喜欢的版本安装）npm install echarts@4.8.0 --sa...

2021-10-26 20:20:45 374

原创充实的七月

在不到10天的时间里自己塔框架30+个大页面 100+个接口几乎天天22点用2.0版本取代需要100万+ 需要两年外包团队才完成的1.0明天八月的第一个工作日开始简化代码因为2.0还不够完美不够优雅...

2021-08-01 20:18:15 99

原创 Vue + ElementUI 实现全国各个省份相对应城市的联动选择

引入Element因为整个项目是依赖ElementUI框架做的，所以采用了全部引入1.在项目根目录执行命令：npm i element-ui -S进行安装2.在main.js中引入element：import Element from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';Vue.use(Element) 安装城市数据npm install element-china-area-data...

2021-05-17 23:51:17 2258

原创 vue form表单密码校验(正则表达式)

必须包含四种的组合密码 var passwordreg = /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,12}/ var isValid = passwordreg.test(this.user.newPassword); if(isValid != true){ this.msgError("密码必须是大写字母，小写字母，数字，特殊字符组成，且长度为8到12位！"); return;}必须包含四种中三种的组合校验 v

2021-05-14 16:22:14 3235

原创 Windows10右键添加“在此处打开命令窗口“

右键添加“在此处打开命令窗口”在Windwos资源管理器中，点击右键（shift+右键），右键菜单中出现“在此处打开命令窗口"菜单项。如下图：具体步骤第一步：新建一个txt文件，另存为命名为OpenCmdHere.txt第二步：在文件中输入如下代码，并保存Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Directory\shell\OpenCmdHere]@="在此处打开命令提示符""Icon"="cmd.ex

2021-05-06 22:56:49 2627 3

原创 ERROR Invalid options in vue.config.js: “baseUrl“ is not allowed

错误内容这里面是一个坑在vue-cli.3.3版本后 baseUrl被废除了，因此这边要将baseUrl写成 publicPath。=====>就可以了。

2020-10-16 10:08:56 232

原创 vue cli3.0快速搭建项目详解

这篇文章主要介绍下vue-cli3.0项目搭建，项目结构和配置等整理一下，分享给大家。一、介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。通过@vue/cli实现的交互式的项目脚手架。通过@vue/cli+@vue/cli-service-global实现的零配置原型开发。一个运行时依赖 (@vue/cli-service)，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以通过...

2020-10-11 17:10:39 1288

原创 vue项目托管到码云中 ssh-keygen 不是内部或外部命令

vue项目中使用git的远程仓库，生成秘钥，遇到的问题 ssh-keygen 不是内部或外部命令如何处理呢？1.找到Git(安装目录)/usr/bin目录下的ssh-keygen.exe(如果找不到，可以在计算机全局搜索)2.计算机-->属性-->高级系统设置-->环境变量-->系统变量,找到Path变量，进行编辑，新建添加ssh-keygen所在的路径-->保存(win10系统)3.重新打开cmd，执行ssh-keygen命令...

2020-10-09 21:08:32 141

原创 vue中axios

axios请求方法:getpostputpatchdeleteget:获取数据post:提交数据(表单提交+文件上传)put:更新数据(所有数据推送到后端)patch:更新数据(只将修改的数据推送到后端)delete:删除数据...

2020-09-23 23:28:58 83

原创 C#图片处理解决左右镜像相反(旋转图片)

/// <summary> /// aforge摄像框控件：捕捉识别绘制人脸框 /// </summary> /// <param name="sender"></param> /// <param name="image"></param> /// ...

2020-09-04 09:12:24 2908

原创 vue报错: error ‘xxx‘ is defined but never used no-unused-vars

具体的错误信息,如下图所示：报错原因：因为搭建的vue项目选择了eslint校验规范->就是你定义了某个变量,但是你没有使用它.eslint规范就是你要么不定义,要么定义了就一定得用.ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误.在许多方面,它和JSLint、JSHint相似.解决方法1：在package.json文件内加入如下代码(保存后重启项目!!!)"rules": {

2020-09-02 02:33:45 25767 3

原创 Failed to resolve loader: less-loader

具体的错误信息,如下图所示：为什么会产生这个问题呢，原因是我在components目录下的index.vue组件中添加了style样式。<style lang="less">.index { padding: 0 20px 20px; box-sizing: border-box; h1, .text { text-align: left; } .footer { position: absolu

2020-09-01 23:43:19 15414 1

原创 cnpm : 无法加载文件 D:\Program Files\nodejs\node_global\cnpm.ps1，因为在此系统上禁止运行脚本。

问题:终端调试cnpm报错(win10系统)解决方法1、以管理员身份运行powershell2、在powershell执行：get-ExecutionPolicy，显示Restricted（表示状态是禁止的）。3、在powershell执行：set-ExecutionPolicy RemoteSigned ，选择Y或A 。4、在powershell执行：get-ExecutionPolicy，显示RemoteSigned 。...

2020-08-18 10:53:50 3947 2

原创每天一页:002.欢乐餐厅【难度系数:★】

1.整体效果2.整体框架HTML部分<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>欢乐餐厅</title> <link rel="stylesheet" type="text/css" href="./css/index.css" /> </head> <body> <div

2020-07-07 11:11:35 432

原创每天一页:001.留学网【难度系数:★】

index.html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>留学网</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function(

2020-07-02 16:29:57 210

原创 Web前端开发-简单导航栏实例

HTML部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>夏季导航栏</title> <link rel="stylesheet" type="text/css" href="../css/夏季导航栏.css" /> </head> <body>  ...

2020-05-17 12:21:45 1864

原创 Web前端开发-轮播图

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Surface Book 3</title> <style type="text/css"> #div-surface img { /* 只设置宽不设高可以等比例缩放 */ width: 650px; } #div-introduce { wi...

2020-05-17 03:41:54 1005

原创 Web前端开发-关注热榜

HTML部分<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>关注热榜</title> <link rel="stylesheet" type="text/css" href="../css/关注热榜.css" /> </head> <body> <div id="div-newList"&..

2020-05-17 03:24:11 410