- 博客(131)
- 收藏
- 关注
RSS订阅原创 ReferenceError: __dirname is not defined
__dirname在vite.config.js中不能直接使用
2022-07-19 20:27:57
4401
1
原创 vue3+vite+ts配置eslint+husky
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
2353
1
原创 dom旋转后html2canvas截取图片
应项目需求，需要实现一个点击图片然后在线旋转，把旋转好的图片展示在界面上。。展示是我为了看效果，实际上是把旋转后的图片以文件流的形式传给后端保存起来。本来想用v-viewer来着，想着我们这个组件只有旋转功能，干脆自己就扒拉一个出来。想更多了解v-viewer，传送门：中文文档项目技术背景：vue+elementui效果图点击图片三个操作按钮，中间那个就是点击展示点击了右边那个选择按钮点击了展示按钮完整代码<template> <div class="imag
2021-06-24 11:24:14
477
原创 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
2873
原创 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
428
原创 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
1665
原创 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
7193
原创 重置数据this.$options.data()
看别人的代码学到了这一个骚操作： // 重置数据 resetData () { Object.assign(this.$data, this.$options.data()) },这一句功能很强大，相当于一旦调用这个方法，你当前页面的data都会恢复到原始值,无论你对这个data中的属性做了啥子操作//恢复到这个样子data() { return { formInline: { status: '', r
2021-03-24 16:54:04
1767
3
原创 Vue定义全局常量，全局方法
先看一下所需要的目录：所要的效果图：搜索头部有两个下拉选择框，选择框里面的数据一般是常量，所以可以定义为全局常量方便管理：第一步：定义常量(分模块进行管理)统一暴露出去//角色状态 status.jsexport const ROLE_STATUS = { STATUS_0: { desc: '启用', value: '0' }, STATUS_1: { desc: '停用', value: '1' }}// 验证结果 se
2021-03-16 15:01:22
17056
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
16819
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
334
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
6066
原创 在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
620
原创 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
1267
原创 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
941
转载 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
1472
原创 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
3915
5
原创 Ant Design of Vue —— Table表格组件之设置动态表头
先看效果：代码如下：scopedSlots是作用域插槽，filterDropdown可以自定义筛选菜单，title表头名字通过下拉框选择，选到哪一项，就给相应的变量赋值https://www.cnblogs.com/duoer/p/12096895.html...
2020-07-01 15:25:49
11079
原创 刷新页面后，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
1197
转载 CSS将img图片填满父容器div，自适应容器大小
当一个页面中引入多张图片时候，会碰到图片尺寸不一致，单要求显示成一致的大小，我们直接设置图片尺寸会导致图片变形，这就是我们遇到的问题，看下解决方法:<div> <img src="引入的图片地址" alt=""></div>方法一：对img元素垂直居中，并将它的高度和宽度设置一个最小满屏值div{ position:relative; width: 100px; height: 100px; overflow:
2020-06-11 11:35:34
26787
原创 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
4275
6
原创 vue使用vuex详细过程学习（一）
vuex是什么？vuex是专为vue应用程序开发的状态管理模式，你可以简单的将其看成是把多个组件需要共享的变量全部存储在一个对象里面，将这个对象放在顶层的vue实例中，让其他组件都可以使用，这样的话，我们是不是可以自己封装一个对象来管理呢？当然可以，但是vuejs给我们最大的便利就是响应式，如果我们自己封装一个对象可能稍微麻烦一些。什么情况下使用vuex?多个界面共享数据时使用，比如用户的登录状态，用户名称，头像等等，还有商品的收藏，购物车中的物品。如何使用？初级版（适合小白）：在s
2020-05-13 15:59:11
2924
原创 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
760
原创 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
27409
2
原创 elementUI+vue修改文件名（不是文件夹的话只修改名字，不修改后缀名）的实现方法
不做不知道，一做就懵了。今天遇到一个需求：如果是文件夹就可以直接修改名字，如果不是文件夹，是一个有后缀名的文件，那么只修改除后缀名之外的部分修改文件夹：修改有后缀名的文件：直接上结果：方法一：用一个存储变量来存储有后缀名的前缀，然后进行双向绑定，之后用户改变了input中的值后再把存储变量的值赋值给原来的filename:用一个存储变量来存储文件的前缀：进行双向绑定：数据发生改变后进行传送赋值：此方法工作量多，还要进行循环，感觉有点麻烦
2020-05-09 15:06:35
3052
转载 box-shadow详解
参考链接：https://blog.csdn.net/u014227715/article/details/79385292
2020-05-08 10:25:59
186
原创 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
3757
原创 webpack的认识和安装（一）
什么是webpack呢？webpack是一个模块打包工具。有什么作用？1.支持模块化开发：怎么支持呢，比如我们在webstorm写一些CommonJS规范的语法，还有AMD,CMD（这些是啥自行百度），不会执行这些语法，因为webstorm没有底层环境来解析这些高级语法，也就是它看不懂这些是啥！！而webpack有这个环境，提供了底层环境，有了webpack，这些语法就可以被底层解析，...
2020-04-18 22:10:01
125
原创 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
5128
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
8503
转载 element table动态添加列样式
项目是：vue-li+element-ui+axios+qs+vue-router框架当前样式表现为：如果要将状态涂上不同的背景颜色来更明显的区分不同状态，该怎么实现显示思路：1.添加属性cell-style，并起名cellStyle,然后再methods添加cellStyle的实现代码。注意：columnIndex是指向该行的对应列原文...
2019-06-05 15:04:54
6605
原创 uni-app踩坑之真机不支持v-show
今天来修复手机运行上面的一些样式问题和兼容问题，发现凡是用了v-show的地方，都没有效果，我把v-show换成了v-if就行了。
2019-04-26 00:25:16
9225
原创 uni-app报错[错误] ERR: ./common/main.wxss(62:7): unexpected `{` at pos 757
很欣喜的在浏览器端对好接口，然后运行在手机，崩溃了，报错！！！！！！检查了许久才发现在我的App.vue页面我使用了less格式来写样式，Hbuilder里面安装了less插件，所以在浏览器能识别less语法，运行在手机上面，不能识别less语法，所以就报错了。...
2019-04-13 16:31:38
7169
3
原创 互联网各大语言学习资源（UI，前端，大数据，Go）
01.2018UI设计链接：https://pan.baidu.com/s/14CPlkIna4TmUarOzViF1DA提取码：tgdt02.C++研发工程师链接：https://pan.baidu.com/s/1DFxSPwW9cBIjJLgTn9TyQA提取码：l9ma03.2018Web设计开发链接：https://pan.baidu.com/s/1EO8og...
2019-04-11 08:48:15
520
原创 vue项目点击按钮后链接后问号重新刷新页面
当我点击登录时候：发现url后面多了一个问号，不但多了问号，页面也刷新了一次。结果 才发现提交表单数据的时候，只写了一个click，而没有避免表单的默认事件。这里是 form 表单，点击了button 按钮，触发了他的默认事件，就是触发了提交这个行为。所以使用@click.prevent阻止默认事件，这样就不会出现刚刚那个问题了。粗心粗心粗心啊！！！！...
2019-04-04 16:07:41
968
原创 Vue项目报错：Uncaught SyntaxError: Unexpected token <
最近在做新版本，发现报了一个这样的错误。一看控制台：仔细检查了一下并没有语法错误啊！！！！相对于网上来说，我的js文件是放在/src/amazevue_path文件夹下的，但是是在整个项目下的index.html引入js的。引入 /src 和 /static 的文件是有区别的。解决方案：解决办法是将第三方依赖的js文件放到/static/目录下，引入的路径改成：<scr...
2019-04-04 15:51:43
9935
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人