随笔分类 -  vue

qiankun微前端的简单使用
摘要：微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 微前端借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少 阅读全文
posted @ 2023-10-11 17:14 王小美丶 阅读(201) 评论(0) 推荐(0)
vite 发布npm包
摘要：创建一个vite+vue项目 安装vite官网文档来搭建项目、然后在安装对应安装包、运行 npm init vite@latest my-vue-app -- --template vue cd ./my-vue-app npm i || pnpm i || yarn npm run dev 对目录 阅读全文
posted @ 2023-03-22 17:08 王小美丶 阅读(502) 评论(3) 推荐(0)
vue3 setup语法糖中component不支持字符串解决办法
摘要：组件中 <component :is="IndexRight" @enterStreet="enterStreet" /> setup 中 const componentsLeftData = reactive({ swiper: markRaw(defineAsyncComponent(() => 阅读全文
posted @ 2022-08-08 17:08 王小美丶 阅读(1161) 评论(0) 推荐(0)
vue 拖拽移动示例
摘要：<template> <div id="drag"> <div id="drag-box" class="drag-box" draggable="true" :style="{ top, left }" @dragstart.stop="onDragstart" @drag.stop="onDra 阅读全文
posted @ 2022-08-02 15:27 王小美丶 阅读(688) 评论(0) 推荐(0)
swiper 层叠轮播图 vue3版
摘要：<template> <div style="width: 696px; height: 800px; position: relative"> <swiper :slides-per-view="2.5" :loop="true" :watch-slides-progress="true" :ce 阅读全文
posted @ 2022-07-26 09:52 王小美丶 阅读(1674) 评论(0) 推荐(0)
vite 自动生成路由
摘要：安装vite插件库 npm i vite-plugin-pages vite-plugin-vue-layouts -D vite-plugin-pages 这俩是 vite 的插件，并且仅支持 Vue3 安装完成后在vite.config里面配置一下插件 官方文档 https://github.c 阅读全文
posted @ 2022-07-13 15:26 王小美丶 阅读(1855) 评论(0) 推荐(0)
webpack引入所有模块
摘要：import { createStore } from 'vuex' import getters from './getters' // 自动引入 const modules = {} const requireStore = require.context('./modules', true, 阅读全文
posted @ 2022-01-08 16:10 王小美丶 阅读(134) 评论(0) 推荐(0)
vue3 setup中使用await页面空白解决办法
摘要：<Suspense> // 用Suspense包裹子组件 <AsyncComponent/ > </Suspense> 官方介绍 阅读全文
posted @ 2022-01-08 15:33 王小美丶 阅读(2107) 评论(0) 推荐(0)
vue3 setup方法
摘要：setup 组合式API 官方定义：通过创建 Vue 组件，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。仅此一项就可以使我们的应用在可维护性和灵活性方面走得相当远。然而，我们的经验已经证明，光靠这一点可能并不够，尤其是当你的应用变得非常大的时候——想想几百个组件。处理这样的大型应用 阅读全文
posted @ 2022-01-02 23:20 王小美丶 阅读(1465) 评论(0) 推荐(0)
vue 3 Teleport
摘要：我们在做vue2项目的时候，往往弹窗设置都挺负责的需要各种z-indx，而vue3推荐的做法是使用Teleport <!-- index.html--> <body> <div id="app"></div> <div id="teleport-target"></div> <script type 阅读全文
posted @ 2021-12-26 11:26 王小美丶 阅读(223) 评论(0) 推荐(0)
vue3 $parent获取父组件的方法和值
摘要：import { defineAsyncComponent, ref, provide } from 'vue'; // 父组件 const emit = defineAsyncComponent(() => import('../../components/edit/index.vue')) co 阅读全文
posted @ 2021-12-20 22:28 王小美丶 阅读(7937) 评论(0) 推荐(1)
vue项目打包压缩
摘要：vue项目打包压缩 vue-cli-service build --report 打包完成会产生report.html 通过这个文件可以得知项目体积以及个个依赖大小，打包完成后开启nginx压缩 安装压缩包 npm i compression-webpack-plugin -D vue.config 阅读全文
posted @ 2021-12-12 15:04 王小美丶 阅读(1130) 评论(0) 推荐(0)
vuex辅助函数mapState, mapActions, mapMutations写法
摘要：在讲解这些属性之前，假如我们项目的目录的结构如下： ### 目录结构如下： demo1 # 工程名 | | dist # 打包后生成的目录文件 | | node_modules # 所有的依赖包 | | app | | | index | | | |-- views # 存放所有vue页面文件 | 阅读全文
posted @ 2021-02-23 16:56 王小美丶 阅读(882) 评论(0) 推荐(0)
VUEX刷新页面参数丢失的问题
摘要：App.vue文件夹加入以下代码 created() { //在页面加载时读取sessionStorage里的状态信息 if (localStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$sto 阅读全文
posted @ 2021-02-23 16:50 王小美丶 阅读(84) 评论(0) 推荐(0)
vue axios全局login
摘要：// main.js// 表示使用 this.$http.get() 会自动在路径前面加上/api const httpInstance = axios.create({ baseURL: '/api' }) //请求拦截 httpInstance.interceptors.request.use( 阅读全文
posted @ 2021-02-20 11:21 王小美丶 阅读(252) 评论(0) 推荐(0)
vue之组件（组件之间相互传参）
摘要：1.全局注册组件 Vue.component('button-cart',{ data () { return { count: 1 } }, template: '<button @click="count++">{{ count }}</button>' }) new Vue({el: '#ap 阅读全文
posted @ 2020-04-04 23:19 王小美丶 阅读(2698) 评论(0) 推荐(0)
vue中数据请求的三种方法
摘要：注意请求可能存在跨域问题，需要去配置好 这三种建议使用axios 1.resource Vue 要实现异步加载需要使用到 vue-resource 库。 Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 先导入一个线上cdn的地址，当然还可以去npm安装，但个人觉得不做项目的 阅读全文
posted @ 2020-03-14 14:11 王小美丶 阅读(9679) 评论(1) 推荐(0)
vue中v-if和v-show的区别
摘要：v-if、v-show顾名思义就是用来判断视图层展示效果的。 v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值的时候被渲染。 v-show 指的是单纯的切换元素的样式dispaly样式 v-if vs v-show v-if 是“真正”的条件渲染，因为它会确保在切换过程中条 阅读全文
posted @ 2020-03-12 19:54 王小美丶 阅读(817) 评论(0) 推荐(0)