vue
这是个问题
被前端供养的人
展开
-
vue3 .env 环境变量的配置及应用
vue3 .env环境文件的配置与使用原创 2022-11-18 16:56:46 · 3003 阅读 · 0 评论 -
vue3 vite proxy代理用法
1)vite.configs.ts文件server: { host: "0.0.0.0", port: 4001, // 设置服务启动端口号 open: true, // 设置服务启动时是否自动打开浏览器 cors: true, // 允许跨域 proxy: { // 此处为抽取的接口 端口后的统一部分 // 例如: http://199.199.9.9:8080/mars/v1 http://199.199.9原创 2022-05-27 15:58:47 · 1639 阅读 · 0 评论 -
vue router中如何使用i18n
1)准备翻译2)写入原创 2021-06-29 16:02:10 · 2601 阅读 · 1 评论 -
如何在vue3中使用后i18n
Vue3项目中插件不能全局引用了,要在页面内按需引入因此在main.js/.ts中写的不生效1)安装npm install vue-i18n --save在src文件夹下创建文件 src/i18nPlugin.jsimport { ref, provide, inject } from "vue"; const createI18n = config => ({ locale: ref(config.locale), messages: config.messages,原创 2021-06-29 15:37:56 · 1466 阅读 · 1 评论 -
vite + TS + Vue3.0项目搭建
环境Node.js 版本 12及以上npm 版本 6及以上搭建项目npm init @vitejs/app vite-vue3-starter --template vue-ts一句话直接把项目名称及所用模板指定好跑起来项目npm installnpm run dev4. 修改vite.config.ts文件(Vite配置)import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'..原创 2021-05-14 14:45:00 · 245 阅读 · 0 评论 -
vue项目 localhost 换成本地ip 访问项目打不开
打开config文件夹下index文件将host值改为: ‘0.0.0.0’原创 2020-12-04 09:06:06 · 638 阅读 · 0 评论 -
iview 锚点的使用方法,保证你看完就会用
官网的案例太过于抽象,研究了好久,太坑人了我做的效果是左边点击 右边变化1)讲官网的代码赋值到页面<AnchorLink href="#basic_usage" title="Basic Usage" /> <AnchorLink href="#static_position" title="Static Position" /> <AnchorLink href="#API" title="API"> &原创 2020-09-01 16:30:07 · 1630 阅读 · 5 评论 -
将html2canvas生成截图上传到服务器
// html2canvas(Dom元素)html2canvas(this.$refs.project).then(canvas => { let base64 = canvas.toDataURL("image/png") // 先转化为base64 let bstr = atob(base64.split(',')[1]); // atob是将base64编码解码,去掉data:image/png;base64,部分原创 2020-07-27 10:52:59 · 664 阅读 · 0 评论 -
点击元素以外区域 隐藏此div
1)选定到一个当前页面最外层的div加入点击事件2)被点击元素的不在我们框定的范围内(找不到)就隐藏<div @click=hide> <div id='container' v-show=show''></div></div>hide(){ var sp = document.getElementById("container"); if(!sp.contains(event.target)){ this..show原创 2020-06-03 15:12:25 · 402 阅读 · 0 评论 -
vue 点击复制到粘贴板
点击复制功能其实也是模拟 手动选中后再复制的动作1) 先创建一个input节点 const input = document.createElement('input') document.body.appendChild(input)2) 给input赋值input.setAttribute('value','aaa')3)选中input框内的数值input.select(...原创 2019-12-26 11:11:57 · 244 阅读 · 0 评论 -
axios 传参超大数据 后端返回400
直接用params的话,url会把传递的所有数据编码后一起带着跑,导致过长报错可以把params换成 data,或者可以直接用 FormData()方便前后端,开心你我他let data = new FormData();data.append('uniqueid',saveR[2].id);data.append('info',JSON.stringify(saveR[2]));t...原创 2019-11-05 16:00:15 · 1317 阅读 · 0 评论 -
Vue自定义树形插件(添加、编辑、删除节点) (iview样式)
项目需求,要自己封装一个树形插件来模拟后端的类期间遇到了几个问题1) 添加子节点时,原来触发的事件不生效了解决方案: if (!item.children) { this.$set(item, 'children', []) this.$set(item, 'expand', true) } item....原创 2019-09-23 16:34:30 · 5423 阅读 · 0 评论 -
vue打包后,用js更新部分功能及内容
修改DOM内容document.getElementById('app').innerHTML='<div>uiuiuiuiui</div>'原创 2019-08-28 17:22:14 · 559 阅读 · 0 评论 -
iview表单校验 结束日期晚于开始日期
rules: { sTime: [ {required: true, type: 'date', message: '开始时间不能为空', trigger: 'change'} ], eTime: [ {required: true, type: 'date', message: '结束时间不能为空', trigger: 'change'}, { ...原创 2019-08-06 09:51:29 · 643 阅读 · 0 评论 -
vue 搭建新项目(必备插件)
1) icon 不显示build文件夹下 webpack.prod.conf.js module: { rules: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: false, //此处改为 false usePostCSS: ...原创 2019-06-12 09:04:43 · 309 阅读 · 0 评论 -
vue + up7 大文件上传插件
将up7所用文件放到文件夹在引用界面引入 up7import up7 from '***/up7'components:{ up7 },改造其他js将所有涉及到的方法 export default {***}up.js import进来,并修改相关引用代码触发函数设置全局变量cbMgrthis.cbMgr = new up7.HttpUploader...原创 2019-03-11 17:16:08 · 903 阅读 · 0 评论 -
Vue axios
安装cnpm install axios使用import axios from 'axios'Vue.prototype.$ajax = axios //axios不是vue的插件,不可以用use请求//请求this.$axios.get('http://192.168.191.2:8998/ConfigPlatform/project/projectList')...原创 2017-12-14 20:36:42 · 362 阅读 · 0 评论 -
iview
1.安装cnpm install iview --save2.使用main.jsimport iView from 'iview'import 'iview/dist/styles/iview.css'3.栅格每行分为24格<Row> <i-col span='12'>12</i-col> <i-col span='12'>12</i-col></Row>带间距的分格<Ro原创 2017-12-06 17:01:57 · 2425 阅读 · 0 评论 -
Vue 路由 vue-router
1. 安装 cnpm install vue-router --save2. 使用 main.js import VRouter from 'vue-router' Vue.use(VRouter) let router = new VRouter({ mode: 'history', //接受前后替换 routes: [原创 2017-12-06 15:29:35 · 253 阅读 · 0 评论 -
Vue(2.5) 从 json 文件读取数据
1.准备工作 1.1 webpack.dev.conf.js在 const portfinder = require(‘portfinder’) 的下面加上以下代码const express = require('express')const app = express()var appData = require('../data.json')//加载本地数据文件的路径var le原创 2017-12-07 21:32:28 · 1421 阅读 · 0 评论 -
vue-grid-layout(脚手架版本)
项目需要,可灵活布局的组件 网上搜了vue-grid-layout 写法为单文件引入模式的,才疏学浅,研究了一下1. 安装cnpm install --save vue-grid-layout2. 使用直接在要用的组件里import就可以//script标签下import { GridLayout,GridItem } from 'vue-grid-layout'/...原创 2018-04-10 09:19:12 · 7185 阅读 · 0 评论 -
在vue中使用 echarts
1. 安装cnpm install echarts --save2. 使用//main.jsimport echarts from 'echarts'Vue.prototype.$echarts = echarts//组件<div :id="['echart-'+item.i]" style="height: 100%">{{item.i}}</di...原创 2018-04-10 11:07:27 · 949 阅读 · 0 评论 -
VUE 字符串拼接 各种拼接
1. :style 同时绑定对象与属性:style="[{color: this.color}, this.layout == 'left'? this.item:this.item]"2. 字符串拼接:id="['ecahrt'+n+'-layout'+layout]"3. 绑定数值 与字符串数值 :class="{red:changeRed==n,['layout'...原创 2018-04-03 15:58:40 · 34408 阅读 · 0 评论 -
Vue 原生可拖动div(带手柄)
//HTML<div id="app1"> <div id="drag" > <div v-drag class="toolBarTitle move">移动工具栏</div> </div></div>//自定义指令directives:{原创 2018-04-10 21:51:29 · 4561 阅读 · 1 评论 -
VUE 技巧 —— watch
1. 善用 watch 的 immediate 数据 create(){ this.initFuction();},watch(){ abc(){ this.initFunction(){ } }}如果有需求,初始化时执行一次,监听改变后再执行一次 可以采用下面的写法:watch(){ abc(){ ...原创 2018-04-12 16:30:45 · 140 阅读 · 0 评论 -
VUE一次性注册多个组件
经典写法,但是好多组件,要引入多次,注册多次import BaseButton from './baseButton'import BaseIcon from './baseIcon'import BaseInput from './baseInput'export default { components: { BaseButton, BaseIcon, ...原创 2018-04-12 16:37:18 · 1022 阅读 · 0 评论 -
vuex 使用注意事项
一、 安装npm install vuex --save二、 使用在main.js中import vuex from 'vuex'Vue.use(vuex);var store = new vuex.Store({//store对象 state:{ show:false }})//注意事项,store对象中 数据必须写到state对象里面...原创 2018-07-27 14:25:20 · 582 阅读 · 0 评论 -
vue + 海康摄像头
必须使用ie浏览器使用方法:将NetVideoActiveX23.cab放到文件夹上object &lt;object style="width:100%;height:100%;" ref="HIKOBJECT1" classid="CLSID:CAFCF48D-8E34-4490-8154-026191D73924" standby="原创 2019-02-20 17:17:35 · 4420 阅读 · 10 评论 -
Vue router 参数传递
接收参数let router = new VRouter({ mode: 'history', routes: [ { path: '/apple/:color', //接收参数 name: 'apple', component: Apple },{ path:'/banana/:color/detail/:type',原创 2017-12-14 14:31:19 · 431 阅读 · 0 评论