vue
beacon...
始于code,终于code
展开
-
vue使用lodash进行函数节流处理
1.npm i lodash 安装lodash插件2.在mian.js中进行配置import { _ } from "lodash";Vue.prototype._ = _;3. 使用节流函数export default {data() { return { }; }, methods: { confirm: _.throttle(function () { //this.dialogVisible = false; this.$post("原创 2021-02-19 10:18:19 · 861 阅读 · 0 评论 -
封装wangEditor富文本编辑器
wangEditor是一个轻量级富文本编辑器,前端常用的富文本编译器还有tinymce,ueditor,wangEditor,kindeditor…1.使用npm下载wangeditornpm i wangeditor2.在components下创建editor.vue文件<template lang="html"> <div style="width:80%;float:left" class="editor"> <div ref="toolbar" c原创 2021-02-04 13:32:05 · 322 阅读 · 0 评论 -
前端项目自动化部署
使用gulp+gulp-ssh实现项目自动化部署1.使用npm安装gulp+gulp-sshnpm i gulp gulp-ssh2.在根目录创建gulpfile.js文件const gulp = require('gulp')const GulpSSH = require('gulp-ssh')// eslint-disable-next-line @typescript-eslint/camelcaseconst APP_ENV = process.env.NODE_ENV;cons原创 2021-02-04 13:14:47 · 321 阅读 · 0 评论 -
vue计算属性和侦听器
计算属性缓存 vs 方法计算属性的实现<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p></div>var vm = new Vue({ el: '#example', data: { message: 'Hello'原创 2020-10-23 10:26:48 · 126 阅读 · 0 评论 -
vue-config.js优化
在vue-config.js中对vue项目进行优化const path = require('path') const CompressionPlugin = require("compression-webpack-plugin");const UglifyJsPlugin = require('uglifyjs-webpack-plugin');const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');funct原创 2020-10-13 14:14:20 · 1044 阅读 · 0 评论 -
element-ui使用cdn引入,按需引入
1.按需引入首先,需要安装element-ui, npm install element-ui --save然后,在main.js文件中按需引入import Vue from 'vue'import { Button, Message, Form, FormItem} from 'element-ui';//由于Message组件并没有install方法供Vue来操作的,是直接返回的,因此按照官方文档单独引入的方法会报错的,需要给 Message 添加 inst原创 2020-07-13 10:01:09 · 4697 阅读 · 2 评论 -
vue配置开发环境和测试环境
构建打包环境在vue.config.js文件中设置代理module.exports = { productionSourceMap:false, outputDir:process.env.NODE_ENV == 'production'?'dist':'test', //构建打包目录 devServer:{ proxy:'http://test.haitao.api.dxanm.com' }}创建.env.test文件NODE_ENV = 'ua原创 2020-06-18 09:54:54 · 599 阅读 · 0 评论