![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 74
smileYuWei
记录自己的进步,加油
展开
-
vue-cli2使用monaco-editor + 报错处理
一、安装依赖cnpm install monaco-editor -Scnpm install monaco-editor-webpack-plugin -S二、具体使用步骤下载完依赖,首先需要在config/index.js文件下进行配置const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');module.exports = { plugins: [ new MonacoWebpackPl原创 2020-11-19 11:58:01 · 8003 阅读 · 8 评论 -
vue 如何在组件里使用import的工具函数
1.例如:在a.vue组件里引用下面的工具函数import * as util from '@/utils/validate'2.然后就直接在template里使用<p>{{ util.renderHeaderInfo }}</p>3.这时候就会直接出现vue warn解决方法:直接在main.js 里引入工具函数,挂载在vue上main.jsimport * as util from '@/utils/validate'Vue.prototype.$util原创 2020-11-17 16:10:26 · 2186 阅读 · 1 评论 -
Vue 为单页面提速----- 性能优化
开发方面:一,路由懒加载当打包构建应用时,所有的js 代码会打包到一个js文件里,会影响到页面加载,可能会导致首页白屏的情况,用户体验感超级差解决方法如下:将不同的路由对应的组件拆分成不同的代码块,只有当路由被访问时才会加载对应的组件(即让路由延迟加载)const HelloWorld= () => import(/* webpackChunkName: "HelloWorld" */'@/views/helloWorld.vue') // 引入组件//在路由里使用HellowWorl原创 2020-09-18 10:15:34 · 736 阅读 · 0 评论 -
vue工程 --- 动态改变窗口的标题(vue-wechat-title的使用)
安装npm i vue-wechat-title --save引用在main.js里进行全局引用import vueWechatTitle from 'vue-wechat-title'Vue.use(vueWechatTitle)使用前景:一般是进入到一个详情页,通过请求接口数据来动态改变窗口的标题title,这时只需要如下设置就可以了<div class="wrapper" v-wechat-title="$route.meta.title = title"></d原创 2020-09-10 19:48:14 · 286 阅读 · 0 评论 -
vue 模拟视频进度条组件(可支持点击,拖拽)
videoProgress.vue<template> <div ref="progressWrapper" class="video-progress" @click="onTrackClick" @mousemove="mouseMove"> <div class="video-progress-track" :style="{ 'width': progress + '%'}">原创 2020-08-15 16:09:11 · 1993 阅读 · 3 评论 -
vue 封装Form表单组件
- 前景在项目中很常见的交互:回显表单信息 + 验证表单 + 提交表单信息,而表单的类型也有很多(复选框,单选框,下拉框,输入框,文本框等等等)如果多个页面都有表单验证的交互且表单的内容不一样,难道我们就要去写多个表单组件吗???那该怎么办呢????- 作用根据element-ui 的Form表单组件,写了一个公共的组件,可以满足大多数的表单类型的验证,做的这个组件主要是以弹窗的形式在页面上展示主要的功能:-显示弹窗(根据传入的数据来决定来显示表单)-验证表单信息-提交表单信息- 具体代码原创 2020-07-07 20:17:09 · 7105 阅读 · 4 评论 -
解决Vue-markdown编辑器加入xss之后,code标签里的代码块会被转义的问题
mavonEditor一、简单的介绍一下关于vue-markdown的使用安装 npm install mavon-editor --save引入(在main.js中全局引入)import Vue from 'vue'import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css';...原创 2019-07-04 15:32:59 · 2475 阅读 · 0 评论 -
vue-cli3 配置多页面
1.介绍使用vue-cli3之后,会发现之前的配置文件都不见了,应该怎么配置呢?可以在与package.json文件同级目录下新建vue.config.js文件,这是一个可选文件,如果存在就会被@vue/cli-service自动加载。vue.config.js文件的格式如下:module.exports = { //选项}2.多页面的配置vue.config.jsmodule....原创 2019-10-14 14:48:56 · 413 阅读 · 0 评论 -
cropperjs上传头像组件
avatar.vue<template> <div class="user-head-portrait" :class="{'chang-en': $i18n.locale === 'en'}"> <span class="head">{{$t("m.user['头像']")}}</span> <div...原创 2019-07-04 16:16:42 · 311 阅读 · 0 评论 -
vue tree组件的实现
递归组件一个简单的递归组件如下例所示:tree.vue<template> <ul class="child-node"> <li class="vue-tree-item" v-for="(item, index) in treeDataList" :key="index"> <div class="...原创 2019-07-08 15:48:28 · 1973 阅读 · 1 评论