MandiGao-CSDN博客

vue3+vite+ts配置eslint+husky创建项目命令yarn create vite vue3-vite-ts --template vue-tseslint代码风格检查，prettier进行格式化代码安装相关依赖；yarn add eslint eslint-plugin-vue eslint-define-config --dev # eslinkyarn add prettier eslint-plugin-prettier @vue/eslint-config-pr

2022-05-19 10:56:21 2673 1

原创 uni-app实现小程序踩坑记录

uni-app实现小程序各种场景

2022-03-15 16:56:54 2091

原创 dom旋转后html2canvas截取图片

应项目需求，需要实现一个点击图片然后在线旋转，把旋转好的图片展示在界面上。。展示是我为了看效果，实际上是把旋转后的图片以文件流的形式传给后端保存起来。本来想用v-viewer来着，想着我们这个组件只有旋转功能，干脆自己就扒拉一个出来。想更多了解v-viewer，传送门：中文文档项目技术背景：vue+elementui效果图点击图片三个操作按钮，中间那个就是点击展示点击了右边那个选择按钮点击了展示按钮完整代码<template> <div class="imag

2021-06-24 11:24:14 640

原创 ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access

**ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside**最近在vue2中引入了TS，在改写store时遇到了以上的问题，我使用的是vuex-module-decorators代码如下：@Action public async Login(userInfo: { username: string; password: string }) { /

2021-05-31 14:42:38 3312

原创 vue2项目引入ts实操记录(三)

继续修改.vue文件1.对象遍历/** * 用于对象的遍历 */interface IObject { [key: string]: any, [key: number]: any}for (const key in obj) { console.log((obj as IObject)[key])}**2.Model的用法// @Model装饰器允许我们在一个组件上自定义v-model，接受两个参数:event: string类型，表示事件名；options: Prop

2021-05-24 11:52:59 531

原创 vue2项目引入ts实操记录(二)

这次依然说如何修改.vue文件中的脚本代码：1.先说引用图片问题比如你的.vue文件或者.ts文件中引入了图片，那么你要进行提前声明，不然ts不认识这个东西。上一篇我已经在src/types下建了一个.d.ts的声明文件，在那个声明文件里面写入下列代码：declare module "*.png";declare module "*.jpg";表示ts能识别.png和.jpg的图片。这样就不会报错了。2.mixins构造mixins我是这个思路，先让mixins继承Vue,然后在.vue文件

2021-04-26 11:28:25 1830

原创 vue2项目引入ts实操记录(一)

背景：vue2+ElementUi原因：之所以要在vue2中引入ts，是为了规范项目，更是为了后面学习vue3+ts做准备。移入ts修改思路：先修改.vue文件-----------再修改全局工具类.js文件-----待续。。。正式内容：第一步安装引入：npm install typescript ts-loader --save-devnpm install vue-property-decorator --save-dev进行配置：vue.config.js中

2021-04-01 16:04:38 7987

原创重置数据this.$options.data()

看别人的代码学到了这一个骚操作： // 重置数据 resetData () { Object.assign(this.$data, this.$options.data()) },这一句功能很强大，相当于一旦调用这个方法，你当前页面的data都会恢复到原始值,无论你对这个data中的属性做了啥子操作//恢复到这个样子data() { return { formInline: { status: '', r

2021-03-24 16:54:04 1859 3

原创 Vue定义全局常量，全局方法

先看一下所需要的目录：所要的效果图：搜索头部有两个下拉选择框，选择框里面的数据一般是常量，所以可以定义为全局常量方便管理：第一步：定义常量(分模块进行管理)统一暴露出去//角色状态 status.jsexport const ROLE_STATUS = { STATUS_0: { desc: '启用', value: '0' }, STATUS_1: { desc: '停用', value: '1' }}// 验证结果 se

2021-03-16 15:01:22 18070 6

原创 vue-echarts的使用

首先下载：npm install echarts vue-echarts然后全局引入：//main.jsimport Vue from 'vue'import ECharts from "vue-echarts";Vue.component('v-chart', ECharts)//全局注册在对应的文件里面具体使用（我这里是折线图）：<template> <div class="verify-line"> <v-chart :opti

2021-02-25 14:20:26 17169 2

原创 TypeScript-Vue-Starter

学https://github.com/Microsoft/TypeScript-Vue-Starter#typescript-vue-starter遇到的几个问题1.执行tsc --init的时候报：tsc : 无法加载文件 C:\Users\fhn\AppData\Roaming\npm\tsc.ps1,的错误解决方法：在“开始菜单”，搜索“Windows PowerShell ISE”----右键以管理员身份运行----粘贴Set-ExecutionPolicy RemoteSigned运行脚本-

2021-02-07 15:02:37 387 2

原创 git commit提交类型规范

统一格式：git commit -m 'type(scope): 描述(#issue)'type有：init: 初始化 feat: 新特性 fix: 修改问题 refactor: 代码重构 docs: 文档修改 style: 代码格式修改, 注意不是 css 修改 test: 测试用例修改 build: 构建项目 chore: 其他修改, 比如依赖管理 scope: commit 影响的范围, 比如: route, component, utils, build... su..

2020-12-03 22:22:30 7642 2

原创在vue-cil中使用render函数渲染组件

今天看了render函数渲染组件，主要是根据自己的需求来封装，现在封装一个根据不同状态显示不同按钮的组件：render渲染函数官网解释：https://cn.vuejs.org/v2/guide/render-function.html#ad如果在没有了解render函数之前，可能我们会这样封装：<template><button v-if="status === 1" class="btn1" :class="status === 1" @click="">未开始&

2020-09-11 15:40:09 661

原创 vue-cli打包优化之分析工具webpack-bundle-analyzer

安装npm install webpack-bundle-analyzer --save-dev配置在vue.config.js文件中const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPluginconfigureWebpack： { plugins: [ new BundleAnalyzerPlugin() ]}在package.json文件中"scrip..

2020-08-06 14:47:56 1412

原创 Vue CLI 3—— 配置不同环境下数据请求域名，即axios的baseUrl

第一步：修改package.json文件"scripts":{"serve":"vue-cli-serviceserve--modedevelopment","build":"vue-cli-servicebuild--modeproduction"},注意：修改模式下默认的环境变量的话可以通过--mode来实现第二步：新增文件在package.json同级下创建 .env.development和.env.production文件，注...

2020-07-30 15:27:12 1062

转载 nuxt.js配置BASE_URL（基本域名）和NODE_ENV（环境变量）

第一步：安装cross-env（这个迷你的包能够提供一个设置环境变量的scripts）npm i cross-env -D第二步：配置BASE_URL和NODE_ENV在package.json文件中："scripts":{"dev":"cross-envBASE_URL=http://192.168.3.12/strategyServiceNODE_ENV=developmentnuxt","build":"cross-envBASE_URL...

2020-07-30 13:22:20 1589

原创 nuxt路由传多个参数

用nuxt做的项目，刚好遇到路由跳转传多个参数问题：详情页命名为_id.vueparams传值（id会显示在地址栏，而其他参数不会显示在地址栏）//跳转到详情页去<nuxt-link target="_blank" :to="{name: 'MyStrategy-id', params:{id:copyData.mscId, apiId}}">查看详情</nuxt-link>或者this.$router.push({name:'MyStrategy-id',

2020-07-24 15:34:44 4176 5

原创 Ant Design of Vue —— Table表格组件之设置动态表头

先看效果：代码如下：scopedSlots是作用域插槽，filterDropdown可以自定义筛选菜单，title表头名字通过下拉框选择，选到哪一项，就给相应的变量赋值https://www.cnblogs.com/duoer/p/12096895.html...

2020-07-01 15:25:49 11245

原创刷新页面后，vuex中数据丢失，清空的解决方案vuex-persistedstate

在nuxt中使用vuex-persistedstate（场景是登录后存储用户的信息）1.login.vueasync login(params) { try { const res = await login(Object.assign(params, this.getcodeinfo)); if (res.code == 200) { this.$message.success("登录成功！"); this.fo

2020-06-18 12:00:56 1313

转载 CSS将img图片填满父容器div，自适应容器大小

当一个页面中引入多张图片时候，会碰到图片尺寸不一致，单要求显示成一致的大小，我们直接设置图片尺寸会导致图片变形，这就是我们遇到的问题，看下解决方法:<div> <img src="引入的图片地址" alt=""></div>方法一：对img元素垂直居中，并将它的高度和宽度设置一个最小满屏值div{ position:relative;　 width: 100px; height: 100px; overflow:

2020-06-11 11:35:34 36400

原创 vue实现checkbox点击选择控制element-ui table表单动态列展示与隐藏

要实现的效果：实现的代码：首先是数据准备：复选框数据：const tradeSelections = [ {eng:'tradetype', name:"交易类型"}, {eng:'ordertype', name:"下单类型"}, {eng:'dealnum', name:"成交数量"}, {eng:'dealprice', name:"成交价"}, {eng:'dealline', name:"成交额"}, {eng:'entrustnum', name:.

2020-05-19 14:55:40 4487 6

原创 vue使用vuex详细过程学习（一）

vuex是什么？vuex是专为vue应用程序开发的状态管理模式，你可以简单的将其看成是把多个组件需要共享的变量全部存储在一个对象里面，将这个对象放在顶层的vue实例中，让其他组件都可以使用，这样的话，我们是不是可以自己封装一个对象来管理呢？当然可以，但是vuejs给我们最大的便利就是响应式，如果我们自己封装一个对象可能稍微麻烦一些。什么情况下使用vuex?多个界面共享数据时使用，比如用户的登录状态，用户名称，头像等等，还有商品的收藏，购物车中的物品。如何使用？初级版（适合小白）：在s

2020-05-13 15:59:11 2977

原创 Promise做了vuex和组件的一个桥梁

promise真是强大啊。。。记录一个案例：需求是这样的，用户异步修改vuex里面的数据，然后告诉组件已经修改完成。方法一：//store中index.jsimport Vue from "vue";import Vuex from "vuex";import { UPDATEINFO } from "./mutations-types";Vue.use(Vuex);const state = { info: { username: "kebi", ag

2020-05-13 11:19:12 816

原创 Vuex之getters的使用方法

什么是getters?getters其实就是store的计算属性，对state里面的状态进行过滤处理，用法与组件自身的计算属性一模一样。怎么使用getters?在store文件夹下的index.js中：import Vuex from 'vuex'import Vue from 'vue'//1.安装插件Vue.use(Vuex)const state = { count: 10, students: [ {id: 1, name: 'zhangsan', ag

2020-05-12 21:33:38 31420 2

原创 elementUI+vue修改文件名（不是文件夹的话只修改名字，不修改后缀名）的实现方法

不做不知道，一做就懵了。今天遇到一个需求：如果是文件夹就可以直接修改名字，如果不是文件夹，是一个有后缀名的文件，那么只修改除后缀名之外的部分修改文件夹：修改有后缀名的文件：直接上结果：方法一：用一个存储变量来存储有后缀名的前缀，然后进行双向绑定，之后用户改变了input中的值后再把存储变量的值赋值给原来的filename:用一个存储变量来存储文件的前缀：进行双向绑定：数据发生改变后进行传送赋值：此方法工作量多，还要进行循环，感觉有点麻烦

2020-05-09 15:06:35 3195

转载 box-shadow详解

参考链接：https://blog.csdn.net/u014227715/article/details/79385292

2020-05-08 10:25:59 227

原创 params和query的区别，$route和$router的区别

params和query的区别，$route和$router的区别paramsqueryparams和query的区别$route$routerparamsparams的类型：配置路由格式：/router/:id 传递的方式：<router-link :to="'/user/'+userId">用户</router-link>配置路由格式：/router/:...

2020-04-27 14:25:30 3903

原创 webpack的认识和安装（一）

什么是webpack呢？webpack是一个模块打包工具。有什么作用？1.支持模块化开发：怎么支持呢，比如我们在webstorm写一些CommonJS规范的语法，还有AMD,CMD（这些是啥自行百度），不会执行这些语法，因为webstorm没有底层环境来解析这些高级语法，也就是它看不懂这些是啥！！而webpack有这个环境，提供了底层环境，有了webpack，这些语法就可以被底层解析，...

2020-04-18 22:10:01 147

原创 vue : 无法加载文件 D:\Program Files\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:

使用vue-cli3.0以上版本创建项目，然后引入插件，vue add element，报错：vue : 无法加载文件 D:\Program Files\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:（已解决）解决办法：1.以管理员的身份运行PowerShell，不是cmd，不然不行哦！2.执行：get-Exe...

2020-04-14 09:00:49 5304 3

原创【已解决】Computed property "strategyName" was assigned to but it has no setter.

场景是这样：在vuex里面有个公共的名字，组件里面使用，也可以修改，但是当修改时就报了这个错误。解决方法如下：mystrategy.js模块在组件里面使用strategyName:当input框失去焦点时就达到修改名称成功的效果：注意注意注意：引进来：import { createNamespacedHelpers } from "vuex";c...

2019-06-28 13:25:17 8558

转载 element table动态添加列样式

项目是：vue-li+element-ui+axios+qs+vue-router框架当前样式表现为：如果要将状态涂上不同的背景颜色来更明显的区分不同状态，该怎么实现显示思路：1.添加属性cell-style，并起名cellStyle,然后再methods添加cellStyle的实现代码。注意：columnIndex是指向该行的对应列原文...

2019-06-05 15:04:54 6691

原创 uni-app踩坑之真机不支持v-show

今天来修复手机运行上面的一些样式问题和兼容问题，发现凡是用了v-show的地方，都没有效果，我把v-show换成了v-if就行了。

2019-04-26 00:25:16 9596

空空如也

空空如也