- 博客(18)
- 收藏
- 关注
RSS订阅原创 vue中如何解决跨域
1、配置代理跨域 config/index.jsproxyTable: { '/api': { target: 'http://shuige.wicp.vip/', //目标接口域名 changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '/' //重写接口 后台接口指向不统一 所以指向所有/ } }, cssSourceMap: false},2、使用jsonp...
2021-12-15 18:31:47
884
原创 vue中使用百度地图
1、申请百度地图开发者秘钥2、在index.html中引入 <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=你的秘钥"></script>3、在webpack.base.conf.js中添加配置 entry: { app: './src/main.js' }, externals: { BMap: "BMap"
2021-12-07 16:40:06
742
原创 vue中实现汉字转化拼音
1、npm ijs-pinyin2、import Pinyin from "js-pinyin";3、API console.log(pinyin.getFullChars('管理员')); //GuanLiYuan console.log(pinyin.getCamelChars('管理员')); //GLY console.log(pinyin.getCamelChars('1234')); //1234 console.log(pinyin.g.
2021-12-07 16:36:31
952
原创 如何在vue中实现拖拽
1、npm ivuedraggable2、在组件中引入import vuedraggable from 'vuedraggable';3、<template> <vuedraggable class="wrapper" v-model="list"> <transition-group> <div v-for="item in list" :key="item" class="item"> <.
2021-12-07 16:33:53
272
原创 如何使用vite搭建Vue3.0
1、npm ivite2、npminitvite-app<project-name>3、cd<project-name>4、npminstall5、npmrundev
2021-09-09 11:58:17
138
1
原创 vite初始化vue3.0项目——配置router和vuex
1、安装构建vue-routernpm i vue-router@next2、创建router/index.js文件import { createRouter, createWebHashHistory } from 'vue-router'import Home from '@/views/home.vue'const Router = createRouter({ history: createWebHashHistory(), routes: [{ path: '
2021-09-09 11:55:18
763
3
原创 Vue 3.0 到底怎么变快
1、diff算法优化，举例说明 vue2.0 vue3.0（diff算法加标记）2、静态提升 举例： 这就好比你每天去便利店买咖啡，每次买的时候店员都问你需要什么，当时间久了店员熟悉了你的习惯就省去了店员问你'要什么'的这个过程，直接给你所需要的商品。 顾名思义静态提升就是把不参与更新的静态元素给提升出来，说白了就是类似把变量变成常量不进行重新创建。 使用未使用3、事件侦听器缓存 如果我们用的这个...
2021-09-01 10:01:26
129
1
原创 vue项目使用rem做适配
1、npm iamfe-flexible2、npm ipostcss-px2rem3、vue项目中package.json文件中添加如下配置 "postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem": { "remUnit": 192 } } }
2021-08-28 10:27:49
138
1
原创 前端使用vue实现导出pdf
1、使用html2canvas和jspdf插件实现这个方式是通过html2canvasl来把html页面转换成图片，然后再通过jspdf将图片转换为pdf文件 （1）缺点生成的pdf质量不高，画面有些模糊，失真严重如果在分页的地方有图片的话，可能会把图片也给你一分为二了 （2）安装插件npm install --save html2canvasnpm install jspdf ...
2021-08-19 19:59:47
465
1
原创 vue的优化
key的使用 便于domdiff 对不需要展示到dom的属性 Object.freeze 的数据不会再被劫持 组件细分 异步组件和路由懒加载 keep-alive路由缓存 尽量使用 v-if 代替 v-show 使用 computed 代替一些函数，有缓存 预渲染（数据不够动态） 骨架屏 SSR（服务器端渲染）nuxt.js 长列表优化...
2021-08-14 16:40:05
91
1
原创 vue.config.js请求数据
vue.config.jslet mockData = require("./mockData");module.exports = { lintOnSave: false, // 是否开启ESLint devServer: { before(app) { // app express提供的 mockData(app); } }, productionSourceMap: false // 不产生sourcemap文件};建立mockDat.
2021-08-14 16:39:44
678
1
原创 如何封装请求
// 封装请求import axios from "axios";import store from "../store";import * as Types from "../store/mutations-types";import { Toast } from "cube-ui";class Ajax { constructor() { // 定义一些公共参数 this.baseURL = process.env.NODE_ENV === "product.
2021-07-23 17:51:00
569
2
原创 transition Vue内置动画组件
transition内置的组件App.vue<template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link>| <router-link to="/about">About</router-link> </div> <transition :name="m
2021-07-23 17:49:21
138
2
原创 Vue路由权限
一、路由权限1、服务端返回权限列表 rules: { // 路有权限，页面权限 page: { home: true, home_index: true, count_to: true, upload: false, form: true, store: true }, component: { // 组件权限 edit
2021-06-20 15:49:47
506
2
原创 js数据结构
JavaScript 中的变量默认是全局变量，严格地说，甚至不需要在使用前进行声明。如果对一 个事先未予声明的 JavaScript 变量进行初始化，该变量就成了一个全局变量。但本书遵循 C++ 和 Java 等编译型语言的习惯，在使用变量前先对其进行声明。这样做的好处是，声明 的变量都是局部变量。本章稍后部分将详细讨论变量的作用域。 在 JavaScript 中声明变量，需使用关键字 var，后跟变量名，后面还可以跟一个赋值表达 式。下面是一些例子： var number; ...
2021-06-14 21:38:34
5511
9
原创 Vue中使用骨架屏优化用户体验
骨架屏：在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。1、-npm install vue-skeleton-webpack-plugin
2021-06-07 14:17:52
325
1
原创 vue组件间通信方式
props $emit 和 $on eventbus vuex refs provide 和 inject $attrs 和 $listeners $parent 和 $children slot
2021-06-04 10:03:05
81
1
原创 Vue3.0底层原理详解
// 一）、proxy和defineProperty的区别1. proxy能代理数组2. 兼容性 proxy ie11以上 defineProperty 兼容 ie8以上3. proxy是代理，defineProperty是劫持4. 配合Reflect，Reflect有13种方法，处理数据更灵活// 二）、基本用法let obj = { name: 'lilei' };let proxy = new Proxy(obj, { // target目标对象，key 目标对象的key ge.
2021-05-24 20:14:27
1564
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人