vue
文章平均质量分 56
aら 淼
这个作者很懒,什么都没留下…
展开
-
arcgis自定义dem高程实现地形抬高 - 操作矢量,转tin、adf(tif),cesiumlab切高程服务
地形抬高:arcgis处理:矢量 → tin → adf → tif → cesiumlab → dem服务 → nginx →cesium加载原创 2024-02-01 17:51:40 · 2555 阅读 · 0 评论 -
js 实现拖拽滚动、滚轮缩放元素函数和案例
js拖动滚动、滚轮缩放元素原创 2022-04-15 17:31:04 · 2639 阅读 · 0 评论 -
vue引入postcss-plugin-px2rem,px转rem
npm install --save-dev postcss-plugin-px2remvue.config.jsmodule.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-plugin-px2rem')({ rootValue: 16, //换算基数, 默认100 ,1 / fontsize(html) = x原创 2021-06-28 12:12:18 · 696 阅读 · 0 评论 -
vue集成iconfont、fontawesome和图标选择器(含fontawesome、el-icon和加入的iconfont)
一、将图标加入购物车阿里巴巴矢量图标库:二、新建(添加至)项目右上角的购物车 → 添加至项目 → 进入到项目页面三、下载后项目中引入点击下载至本地,解压缩包,只需要这四个文件此时.ttf和.woff文件已经保存了前面步骤的图标,将其复制于 src/assets/iconfont (看个人爱好)然后main.js全局引入这个css就行// 引入自定义iconfontimport "@/assets/iconfont/iconfont.css";在iconfont.css文件中原创 2021-06-23 10:06:41 · 2786 阅读 · 0 评论 -
vue element form中input等组件不能输入值
<el-input v-model="form[item.prop]" />此时form只是一个空对象{},当主动设置 form.inputVal = “” 后input却无法输入值,这是因为属性没有get和set,需要用vue内置属性设置:this.$set(this.form, item.prop, "");...原创 2021-04-23 17:30:19 · 1001 阅读 · 0 评论 -
vue使用process.env搭建自定义运行环境
一、vue-cli项目下默认有三种模式:development:在 vue-cli-service serve 时使用。production:在 vue-cli-service build 和 vue-cli-service test:e2e 时使用。test:在 vue-cli-service test:unit 时使用。对应的 NODE_ENV 值分别为 development、production、test。二、可以通过环境文件来指定环境变量,环境文件有一下几个类型:.env: 在所原创 2021-04-12 17:01:17 · 4799 阅读 · 0 评论 -
axios把post的RequestPayload格式转为formdata
方法一:配置transformRequest,缺点:其他请求格式的数据也会被重新格式话const service = axios.create({ //设置axios为form-data 方法1 // headers: { // post: { // "Content-Type": "application/x-www-form-urlencoded" // }, // get: { // "C原创 2021-03-26 16:43:00 · 1251 阅读 · 0 评论 -
vue3打包后无法加载页面
1、配置输出路径// vue.config.jsmodule.exports = { publicPath: './'}2、不能使用history路由// ...export default new Router({ // mode: 'history', routes: [ { path: '/', name: 'home', component: Home } ]})...原创 2021-03-17 14:25:23 · 825 阅读 · 0 评论 -
js滚动条滚动到指定元素
this.$nextTick(() => { let item = document.getElementById("card-item"); // 指定的元素 let wrapper = item.parentElement.parentElement; // 其父元素 - 必须是产生滚动条的元素 // el.focus(); // 元素聚焦法定位 , 有时定位不全, 可用 outline:none; 除去聚焦产生的框; 对于默认没有聚焦的元素需要主动原创 2021-03-04 17:38:06 · 9334 阅读 · 1 评论 -
自定义v-drag指令(横向拖拽滚动)
Vue.directive('drag', { // 钩子函数,被绑定元素插入父节点时调用 (父节点存在即可调用,不必存在于 document 中)。 inserted: (el, binding, vnode, oldVnode) => { console.log(el, binding, vnode, oldVnode) let drag = el; // 要拖拽的元素...原创 2021-03-04 17:01:38 · 1067 阅读 · 1 评论 -
Vue 当子组件需要v-modal父组件传入的数据时
父<template><Child :user="users" @on-user-change="onUserChange" /></template><script>export default { components: { SelectPanel, }, data(){ return{ users:["admin"] } }, methods:{ onUserChange(val){ th原创 2021-02-26 15:49:14 · 284 阅读 · 0 评论 -
vue3.0、cli4项目引入element plus
element团队为新版的 vue-cli4 准备了相应的 Element Plus 插件安装依赖npm install element-plus --savemain.js全局引入,样式文件需要单独引入import { createApp } from 'vue'import ElementPlus from 'element-plus';import 'element-plus/lib/theme-chalk/index.css';import App from './App.vue原创 2021-02-20 14:08:18 · 2674 阅读 · 0 评论 -
给谷歌浏览器安装vue调试工具:vue-devtools
安装vue-devtools一、拉取项目二、install、build三、添加扩展一、拉取项目vue-devtools:git地址(master分支)非master分支在build的时候会报错。二、install、build1、打开cmd进入项目目录,可以选择npm/cnpm/yarn 进行install;如果有类似503等错误可能需要删掉node_modules尝重试几次。npm installcnpm installyarn install2、然后输入npm run bu原创 2021-02-20 13:43:09 · 359 阅读 · 0 评论 -
前端个人笔记
安装新依赖/插件时忘记–save,下次install的时候有可能会报错(XX not found),安装错误信息重新安装依赖即可;如果没有报错就麻烦了,比如样式问题,怎么才能知道之前安装过什么依赖?目前我的一个办法是把以前的node_modules粘过去,运行时就会报错误信息,按照提示安装即可。若之前的node_modules无了,就不知道了。...原创 2021-02-04 13:48:32 · 184 阅读 · 0 评论 -
vue引入全局less实现全局变量的控制
vue引入全局less1.设置全局样式变量的好处:2.以less为例(sass等同原理)1.vue-cli2搭建的项目(1)2.vue-cli2搭建的项目(2)3.vue-cli3、vue-cli43.vue-cli2和vue-cli3的区别4.vue-cli3和vue-cli4的区别5.vue-cli3配置项目的三种办法1.根目录下创建vue.config.js2.运行 vue ui,然后打开浏览器进行可视化配置3.直接在依赖中找到并修改6.分清vue版本和vue-cli版本1.设置全局样式变量的好处:原创 2021-01-21 17:24:16 · 925 阅读 · 1 评论 -
vue 监听路由变化
1.watch监听$route($router的对象)// 监听,当路由发生变化的时候执行watch:{ $route(to,from){ console.log(to.path); }},===========================================================// 监听,当路由发生变化的时候执行watch: { $route: { handler: function(val, oldVal){ console原创 2021-01-11 11:17:04 · 1876 阅读 · 2 评论 -
vue-router query,parmas,meta传参
1.query,显示在导航栏?后,相当于get请求传参this.router.push({path:'/login',query:{ 'redirect':'/home'}})this.router.push({name:'Login',query:{ 'redirect':'/home'}})2.parmas,不会显示,相当于post请求传参this.router.push({name:'Login',parmas:{ 'redirect':'/home'}}) // 目前测试没有query不行原创 2021-01-11 11:08:09 · 1933 阅读 · 0 评论 -
vue mock模拟后台接口数据
一、Json server轻量级,将已有的json文件跑在服务器上供前端调用npm install -g json-server启动JSON数据服务器:json-server --watch json文件名或json-server --watch json文件 --port 指定端口二、Mock 服务很多前端框架,如 Reactor、 Angular、Vue 等都带有 mock 服务,将已有的json文件跑在服务器上供前端调用。支持 GET / POST / PUT支持返回 j原创 2021-01-08 15:16:13 · 435 阅读 · 0 评论 -
Vuex使用总结
仓库主仓库// store/index.jsimport Vue from "vue";import Vuex from "vuex";// 引入子仓库import home from './modules/home.js'Vue.use(Vuex);const state = { //要设置的全局访问的state对象,赋予初始属性值 index: 'home', isIndex: false,};const getters = { //实时监听state值的变化(最原创 2021-01-07 12:13:20 · 306 阅读 · 1 评论 -
vue项目中按需引入viewUI
一、按需引入npm install babel-plugin-import --save-dev// .babelrc{“plugins”: [[“import”, {“libraryName”: “view-design”,“libraryDirectory”: “src/components”}]]}// main.js 可以统一打包一个js放这个import { Button, Table } from ‘view-design’;Vue.component(‘Butt原创 2020-12-31 14:45:39 · 2556 阅读 · 0 评论 -
vue目录结构
这里写目录标题参考一参考二参考三参考一目录一级二级bulid项目构建的一些 js 文件config配置文件项,index.js 比较重要,打包上线需要修改配置dist项目打包后的文件node_modulesnpm安装包位置src项目的开发目录-assets图片、字体等资源-components公共组件部分-config开发分支和生产分支的切换配置,以及 fetch.js 对于前后台数据交互的封装-pl原创 2020-12-30 17:53:34 · 187 阅读 · 0 评论 -
vue/cli4 创建vue项目选项详解
多版本创建项目一、vue-cli@2.x二、vue-cli@3.x三、vue-cli@4.xtips:1.查看 vue 版本:项目中,找到package.json文件夹 找"dependencies"中的vue ;若无项目,在cmd中输入 where vue,cd到vue目录下输入 npm list vue ,即可看到。2.查看 vue-cli脚手架 版本:vue -V (很多人会把这个认为是查看vue版本)3.安装最新版本 vue 和 cli :npm install vue -g (-g原创 2020-12-30 17:46:49 · 4670 阅读 · 0 评论 -
为什么element的el-backtop会不管用,来看这里
<template> Scroll down to see the bottom-right button. <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop></template>把target指向你要产生“回到顶部”按钮的组件,这个组件一定要是产生滚动条的组件!这个组件一定要是产生滚动条的组件!这个组件一定要是产生滚动条的组件!举原创 2020-05-23 16:55:22 · 5877 阅读 · 2 评论 -
Vue.js中的8种组件间的通信方式;3个组件实例是前6种通信的实例,组件直接复制粘贴即可看到运行结果
一、$children / $parent二、props / $emit三、eventBus四、ref五、provide / reject六、$attrs / $listeners七、localStorage / sessionStorage八、Vuex原创 2020-05-22 17:27:53 · 447 阅读 · 0 评论 -
Vue使用Vuex一步步封装并使用store
文章目录一、安装Vuex依赖二、一步步封装store1. main.js中全局引入store仓库(下一步创建)2. this.$store3. this.$store.state4. this.\$store.getters(this.\$store.state的升级)5. this.$store.commit('mutations')6. this.\$store.dispatch('actions')(this.\$store.commit('mutations')的升级)三、modules 模块化四、原创 2020-05-12 23:38:48 · 9283 阅读 · 3 评论 -
vue项目将token存在(vuex)store和localstorage中
文章目录一、准备工作和token1、准备工作1、介绍token用法二、创建storage,store,request1、src目录:2、创建storage(可选)3、创建store4、创建request三、配置代理,封装路由router、设置路由守卫,在main.js中引入router一、配置代理二、封装路由router,并设置路由守卫三、在main.js中引入router四、登录页面实际使用仔......原创 2020-02-19 23:58:14 · 22063 阅读 · 15 评论 -
vue 入门notes
文章目录1、js基础2、封装缓存3、组件4、生命周期(钩子)函数1、js基础2、封装缓存3、组件组件挂载。页面由组件组成。路由:动态挂载组件。创建组件,开头大写,组件=template+js+scss,所有内容要被根节点包含起来,组件必须包含根元素(一般是div)。自定义标签名不能重复。4、生命周期(钩子)函数...原创 2020-01-13 13:26:21 · 425 阅读 · 1 评论 -
nodejs和Vue和Idea
文章目录Vue环境搭建Idea安装Idea中配置Vue环境Node.js介绍npm介绍Vue.js介绍[^3]Idea介绍Vue环境搭建概述:vue环境搭建:需要npm(cnpm),而npm内嵌于Node.js,所以需要下载Node.js。下载Node.js:Node.js官方下载安装Node.js:双击 - 选择目录 - 一路next(安装程序会自动把node、npm环境变量...原创 2020-01-08 08:56:46 · 1515 阅读 · 3 评论