随笔分类 - vue
vue相关
摘要：文档连接：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
阅读全文
摘要：以下是模仿element-admin框架中的那种模式，感觉非常好用，所以就搬到了自己的项目中，在此记录以下。 首先我们需要有一个request.js:(封装axios的拦截器，并返回axios实例对象) import axios from 'Axios'; import tools from '@/
阅读全文
摘要：切记 数据文件要放在static文件夹中； 假如homeData.js中放了我们需要的数据 下面封装专门请求本地数据的方法 叫fetch.js import axios from "Axios" function fetch(url) { return new Promise((resolve,re
阅读全文
摘要：直接进入正题 文档地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html 目前还未完成网页授权，不过已经遇到问题了，借此记录一下问题以及解决方法 目前我知道的是
阅读全文
摘要：最近在看他人vue项目中发现别人使用了$bus,感觉使用很方便 查了查，bus主要是解决无关系组件之间的交互问题，当然父子组件我们可以通过自定义事件来交互（子传父） 另外一种解决无关系组件间的交互问题就是使用vuex，也很方便。 那么bus最主要的是无关系组件间的交互响应，相当于父子组件的自定义事件
阅读全文
摘要：chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) .set('tim', resolve('src/tim.js')) }, 。
阅读全文
浙公网安备 33010602011771号