friend_ship的博客

vue项目仅在test/ts测试环境打包中报错

vue中assets和static的区别

vue-cli与vite获取环境变量及动态加载图片的实现方式

antd 表格内嵌children，children有数据就默认展开，且不展示第一列加号

vue打包Module parse failed: Unexpected token

微服务架构并不只是为了在架构上好看，还可以提升开发效率，尤其是庞大的应用系统，由单一应用拆分为多个小型前端应用，每个应用可以实现独立开发和独立部署，项目维护起来也会变得容易很多。

tsx代码实现：import { defineComponent, onMounted, reactive} from '@vue/composition-api'; export defalut defineComponent({ name: 'Demo', setup() { const city = reactive({ list: [] }) const initCityData = () =>

iconfont官网：https://www.iconfont.cn/

项目编译完成，执行npm run serve启动时，报以上错误，原因在于使用npm安装依赖的时候vue-loader-v16有部分资源未下载下来，解决方式：第一步：先卸载未正确安装的vue-loader-v16npm uninstall vue-loader-v16第二步：通过国内淘宝镜像下载该依赖：cnpm install vue-loader-v16如果没有安装cnpm，可以执行下面的命令，使用临时镜像：npm install vue-loader-v16 --regi..

造成上面问题的原因是terser-webpack-plugin版本问题。推荐使用terser-webpack-plugin@4.2.3。更新版本，重新打包即可。

造成上面问题的原因是因为compression-webpack-plugin版本的原因。经测试，目前可使用的最高版本compression-webpack-plugin@6.1.1。更新下版本，重新打包即可。

下面的代码以登录功能为例。功能描述： 用户输入密码时，失去焦点进行密码校验，当输入有误时，显示错误提示信息；只有密码值发生了变化，错误提示信息就移除。<template> <div> <el-form :model="form" :rules="rules" ref="form" label-width="140px"> <el-form-item label="用户名" prop="username"&.

Vuex是一个专门为Vue.js应用程序开发的状态管理模式。如果你需要构建一个中大型单页应用，Vuex将成为一个很好的选择。在中大型单页应用项目中使用Vuex，store文件常用的两种方式：第一种是按照官网核心概念分类的方式；第二种以模块管理的方式。第一种方式的目录：index.js的写法：以下demo是第二种采用模块管理的方式。store的目录是以下方式：在index.js文件中引入modules里面文件以user.js为例，常用的两种写法：第一种，s.

下面实现中英文切换是基于页面刷新才可实现的；如果不想页面刷新，请将翻译内容写在computed属性里。如果不是很清楚，请查看这里<template> <div> <el-form :model="form" :rules="rules" ref="form"> <el-select v-model="form.food" @change="$set(form, form.food, $event)">...

有两种方式可以解决表单验证更新问题第一种：通过computed属性以基础表单为例，代码如下：<template> <div> <el-form :model="form" :rules="rules" ref="form"> <el-form-item :label="$t('form.Name')" prop="name"> <el-input v-model

prop需要是一个变量，以中英文翻译为例，当中英文都是后端返回时，前端应如何处理？下面字段name为后端返回的中文名称，key为英文名称。<el-table-column label="名称"> <template slot-scope="scope"> <span v-if="language=='zh_CN'">{{scope.row.name}}</span> <span v-else>{

代码如下：<template> <div> <el-table :data="list" border > <el-table-column align="center" label="姓名" prop="name"></el-table-column> <el-table-column align="center" label="年龄" prop="age"&gt

第一种，通过methods方法来改变控制属性的值：父组件，代码如下：<template> <div> <child v-if="visible" v-model="visible" :data="list"></child> </div></template><script> import child from './child.vue'; import user

第一步：解析模板成render函数with的用法 模板中的所有信息都被render函数包含 模板中用到的data中的属性，都变成了js变量 模板中的v-model v-for v-on都变成了js逻辑 render函数返回vnode第二步：响应式开始监听Object.defineProperty 将data的属性代理到vm上第三步：首次渲染，显示页面，且绑定依赖初次渲染，执行updateComponent,执行vm._render() 执行render函数，会访问到vm.list

当需要提交多个表单验证时，需分步验证，以两个表单为例，js逻辑如下：export default { data() { return { baseform: {}, advanceform: {} } }}

以普通表单创建为例，代码如下：<template> <div> <el-form :model="form" :rules="rules" ref="form> <el-form-item label="名称" prop="name"> <el-input v-model.trim="form.name" placeholder="名称"></el-inp.

以登录框为例，代码如下：<template> <div> <el-form :model="form" :rules="rules" ref="form> <el-form-item label="名称" prop="name"> <el-input v-model.trim="form.name" placeholder="名称"></el-input&g

MVP传统的开发模式，实质上是面向DOM开发。 MVP：Model，View，Presenter Model: 模型层，也叫数据层 View: 视图层，页面展示 Presenter: 控制层，也叫控制器，与业务逻辑相关，主要用来操作DOMMVVM开发模式，实...

一般轮询都会使用setInterval，但是单独使用它会使页面卡死。下面代码是每个3秒钟轮询一次。export default { data() { return { } }, mounted() { this.getList(); this.timer = window.s...

export default { data() { return { baseform: { 'username': '', 'password': '' }, form: { 'name': '', ...

vue代码如下：<template> <div> <el-form :model="form" :rules="rules" ref="form" label-width="120px"> <!-- 密码 --> <...

以输入年龄为例：代码如下：<template> <div> <el-form :model="form" :rules="rules" ref="form" label-width="120px"> <el-form-item :label="$t('form.Age')" prop='age...

utils.js代码如下：export const setTitle = (title) => { title = title ? `${title}` : 'demo' window.document.title = title}store文件，创建user.js，代码如下：import utils from './utils'; // 引入utils.j...

在vue中使用swiper插件的方式，请前往这里查看https://blog.csdn.net/friend_ship/article/details/104919781由于vue-awesome-swiper插件包的版本问题，会出现左右箭头点击失效的情况解决方式如下：npm uninstallvue-awesome-swiper --savenpm installvue-aw...

vue封装了一个插件包用来实现轮播效果：vue-awesome-swiper命令行安装: npm installvue-awesome-swiper --save在vue中使用swiper可以分为两种：第一种：全局引入在main.js中 import VueAwesomeSwiper from 'vue-awesome-swiper'; import "swiper/di...

全局安装环境 npm install -g @vue/cli创建项目 vue create project-name(项目名称)项目启动 cd project-name npm run serve(默认执行) npm run dev(需要在package.json文件，script对象里面配置该命令)...

首先安装vue-awesome-swipernpm install vue-awesome-swiper --save引用/*全局引入*/import VueAwesomeSwiper from 'vue-awesome-swiper';import 'swiper/dist/css/swiper.css';Vue.use(VueAwesomeSwiper);/*组件间引...

beforeCreate: 组件实例化之前执行的函数。created:组件实例化完毕，但页面未显示。beforeMount:组件挂载前，页面仍未显示，但虚拟Dom已经配置。mounted:组件挂载后，此方法执行后，页面显示。beforeUpdate:组件更新前，页面仍未更新，但虚拟Dom已经配置。updated:组件更新，此方法执行后，页面显示。beforeDestroy:...

安装环境npm install vue-cli -g初始化项目vue init webpack my-project安装项目依赖npm install安装路由配置npm install vue-router --save 或者 npm i vue-router -S本地启动npm run dev打包部署npm run build日常开发简写方式：...

介绍在使用echarts生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts的出现正是为了解决这个痛点。基于Vue2.0和echarts封装的v-charts图表插件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。安装npm install v-charts echarts --save 或者 npm i v-charts ...

需求： 点击复制按钮，将设置的目标内容复制，可以在电脑上任何地方粘贴 以较小的代码实现该功能，并能兼容所有主流浏览器 插件： clipboard.jsvue相对插件：vue-clipboard2官网链接地址： https://clipboardjs.com/vue-clipboard2地址：https://www.npmjs.com/package/vue-cli...

如果是点击上传文件夹，可以给input添加webkitdirectory属性，但是拖拽上传文件夹，拿不到文件所在路径，也就是webkitRelativePath值为空。下图所示：FileSystemDirectoryEntry接口的方法createReader()返回一个FileSystemDirectoryReader 可以被用于读取在该目录中的条目的对象。在vue中的示例代码...

Vue中Filter声明方式1.全局过滤器// filter.js export function dataFilter(val) { console.log("全局过滤",val)} // main.js 需要在main.js中引入过滤器函数import Vue from 'vue'; // 引入Vueimport filters from './f...

export default { methods: { getAllList() { this.$http.get('/api/list').then( res => { console.log(res) }) } }, mounted() {...

代码如下：// 生成四位随机数 generateMixed(n) { var chars = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y"...