vue2
vue2
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 · 1410 阅读 · 0 评论 -
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 · 831 阅读 · 0 评论 -
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 · 408 阅读 · 0 评论 -
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 · 1613 阅读 · 0 评论 -
模块 ““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 · 2989 阅读 · 0 评论 -
npm install -D 和-S的意思
-D表示npm install --save-dev-S表示npm install --save原创 2021-11-30 22:34:23 · 1320 阅读 · 0 评论 -
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 · 1297 阅读 · 0 评论 -
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 · 534 阅读 · 0 评论 -
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 · 1401 阅读 · 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 · 1702 阅读 · 0 评论 -
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 · 507 阅读 · 0 评论 -
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 · 325 阅读 · 0 评论 -
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 · 1245 阅读 · 0 评论 -
vue el-upload限制文件大小及类型等基本用法
template 代码<!-- limit 最大允许上传个数 --><!-- accept 限制文件类型 --><!-- action 必选参数,上传的地址--><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 · 1889 阅读 · 0 评论 -
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 · 3176 阅读 · 0 评论 -
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 · 437 阅读 · 0 评论 -
将 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 · 791 阅读 · 0 评论 -
vue element中Cascader 级联选择器高度占满浏览器的问题
在全局样式文件global.css中添加高度配置即可解决:/* 解决下拉框下拉列表占满全屏的BUG */.el-cascader-panel{ height: 200px;}原创 2021-11-02 10:09:10 · 340 阅读 · 0 评论 -
利用npm安装淘宝镜像的cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org原创 2021-11-02 09:43:20 · 5978 阅读 · 0 评论 -
利用VSCode创建vue文件自定义模板
在一个Vue的项目中,反复的新建.vue文件是一个必不可少的,我们可以利用VSCode的snippet在.vue文件创建后能轻松地生成模板具体操作1、选择“文件 -> 首选项 -> 用户代码片段”->会弹出一个搜索框,输入vue 编译器会弹出一个vue.json文件2、之后会打开一个json文件这些注释就是告诉你怎么写模板。先删掉吧 最后就剩下“{}”,然后我们把下面的模板内容黏贴进“{}”中:{ "Print to console": { ..原创 2021-11-01 17:12:44 · 951 阅读 · 0 评论 -
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 · 217 阅读 · 0 评论 -
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 · 324 阅读 · 0 评论 -
充实的七月
在不到10天的时间里自己塔框架30+个大页面 100+个接口几乎天天22点用2.0版本取代需要100万+ 需要两年 外包团队才完成的1.0明天八月的第一个工作日开始简化代码因为2.0还不够完美 不够优雅...原创 2021-08-01 20:18:15 · 73 阅读 · 0 评论 -
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 · 2168 阅读 · 0 评论 -
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 · 3126 阅读 · 0 评论 -
ERROR Invalid options in vue.config.js: “baseUrl“ is not allowed
错误内容这里面是一个坑在vue-cli.3.3版本后 baseUrl被废除了,因此这边要将baseUrl写成 publicPath。=====>就可以了。原创 2020-10-16 10:08:56 · 178 阅读 · 0 评论 -
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 · 1251 阅读 · 0 评论 -
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 · 116 阅读 · 0 评论 -
vue中axios
axios请求方法:getpostputpatchdeleteget:获取数据post:提交数据(表单提交+文件上传)put:更新数据(所有数据推送到后端)patch:更新数据(只将修改的数据推送到后端)delete:删除数据...原创 2020-09-23 23:28:58 · 54 阅读 · 0 评论 -
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 · 24756 阅读 · 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 · 15312 阅读 · 1 评论