随笔分类 - vue
vue相关
摘要：。 场景： 项目中有一个需求，发布故事线，发布会调用一个接口，改接口返回进度条的必要信息，进度信息由mqtt推送过来，在正常网络情况下，接口返回速度应该比mqtt推送先一步完成，但是在网络慢的情况下，接口就迟于mqtt推送的速度。 （mqtt会推送多条消息过来，执行多次）。这样会造成进度条卡死的现象
阅读全文
摘要：. 当前Vue实例是否运行于服务器，属性值为true表示实例运行于服务器，每个Vue实例都可以通过该属性判断。该属性一般用于服务器渲染，用以区分代码是否在服务器上运行。 <script> export default { mounted() { console.log(this.$isServer)
阅读全文
摘要：在网上查了一下，原因在于，我们在addRoutes加动态路由前，就配置了通配符404路由； 最后改成把动态添加过路由后吗，再最后push一下404通配符 就完美解决了 。
阅读全文
摘要：参考文章：https://www.cnblogs.com/bien94/p/12034249.html 目前电脑上装的是vue-cli4 执行命令创建一个项目： vue create fcom（项目名称） 看package.json文件 private字段改为false，证明不是私有的 增加main
阅读全文
摘要：文档地址：https://www.vue-select.cn/api/props.html 。
阅读全文
摘要：文档连接：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html 全局守卫：我写了一个 routerIntercopter.js // 路由拦截器 import router from "./router"; router.
阅读全文
摘要：博文链接：https://www.jianshu.com/p/84042c7b1b5b 。
阅读全文
摘要：vue-cli环境变量配置文档：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F 你可以替换你的项目根目录中的下列文件来指定环境变量： .env # 在所有的环境中被载入 .env.local # 在所有的环境中被
阅读全文
摘要：i18n：i18n是 Internationalization 这个英文的简写，即国际化的意思，vue-i18n是一款针对于vue开发的国际化插件,让项目支持多语言切换，以适应不同地区用户的需求。 安装vue-i18n： npm install vue-i18n --save main.js中全局引
阅读全文
摘要：以下是直接读取某一文件夹下的图片，感觉挺好用，记录以下。 methods: { // 动态引入图标 loadMenuImgs() { let routeImgs = require.context("@/assets/icon/menu", false, /\.png$/); console.err
阅读全文
摘要：今天发现项目启动时，没有获取ip地址，想在手机或者让别人浏览时，还得专门查一下本机ip，于是加一下自动获取ip地址： 新建build/get-ip.js // build/get-ip.js var os = require('os'), ip = '', ifaces = os.networkIn
阅读全文
摘要：子组件： <template> <div> <div class="group"> <label>{{title}}</label> <input type="text" placeholder="请输入" @input="changeData()" v-model="val"> </div> </
阅读全文
摘要：vue-resize-split-pane 插件做窗口分隔，之前没有用过，简单使用一下： npm地址：https://developer.aliyun.com/mirror/npm/package/vue-resize-split-pane 安装插件： cnpm install vue-resize
阅读全文
摘要：拿button组件举例 。 button.vue v-bind="$attrs" 让子组件拥有父组件所有的attr属性 （props除外） v-on="$listeners" 让子组件拥有所有父组件的事件（这个必须有，否则点击父组件不会触发事件） <template> <Button v-if="p
阅读全文
摘要：imgUpload.vue <template> <div> <div class="image-wrapper"> <div class="img-wrapper"> <div class="item" v-for="(item, index) in imgList" :key="index">
阅读全文
摘要：以下是仿照nutui的toast组件进行封装的： 文件结构：（在components下） index.js: import cusToast from './_toast'; import './toast.scss'; cusToast.install = function (Vue) { Vue
阅读全文
摘要：话不多说，这个篇博客只为了，将toast组件原滋原味的放到自己的项目，看源码，理解大致意思，后续会去封装属于自己的组件 首先：在components文件夹中创建如下文件： 下面我将按照逻辑顺序将各个文件的源码贴出来： index.js: (可以看到，给toast对象添加了自定义方法install，用
阅读全文
摘要：Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend + $mount 这对组合是我们需要去关注的。 官方文档：https://cn
阅读全文
摘要：messageList.vue： <template> <div class="message_list_box"> <ul :class="className" > <li class="message_list_item" v-for="(item,key) in list" data-type
阅读全文
摘要：首先在页面内引入swiper脚本，包括css、js <!-- swiper --> <link href="https://cdn.staticfile.org/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet"> <!-- swiper --> <s
阅读全文
