2 高级前端工程师Vue方向

尚未进行身份认证

我要认证

专注于Vue的前端工程师

等级
TA的排名 3k+

使用pm2管理应用前端应用

. 使用 pm2 管理应用 ① 在服务器中安装 pm2:npm i pm2 -g ② 启动项目:pm2 start 脚本 --name 自定义名称 例如:pm2 start .\app.js --name web_vueshop③ 查看运行项目:pm2 ls④停止项目:pm2 stop 自定义名称或者idpm2 stop 0⑤ 重启项目:pm2 restart 自定义名称或者idpm2 restart 0...

2020-07-14 09:01:15

vue配置路由懒加载【路由分组加载】优化项目

1.下载依赖cnpm install --save-dev @babel/plugin-syntax-dynamic-import2.在babel.config.js中配置// 项目发布结局需要用到的babel插件const prodPlugins = []if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console')}module.exports = { p

2020-07-14 07:00:01

vue项目中定制首页内容

1.vue.config.jsmodule.exports = { chainWebpack: config => { // 发布模式 config.when(process.env.NODE_ENV === 'production', config => { // 定义生产环境入口 config.entry('app').clear().add('./src/main-prod.js') // 生产环境cdn引入外部资源

2020-07-14 06:41:03

vue移动端直播评论功能实现

1.barrage.vue<template> <div class="barrage"> <div class="comment"> <div class="comment-wrap" ref="wrapper"> <ul class="list" ref="list"> <li v-for="item in list" :key="item.id">

2020-07-13 14:25:06

通过cdn和vue.config.js配置来优化vue-cli3.0打包体积

1.再vue.config.js中设置module.exports = { chainWebpack: config => { // 发布模式 config.when(process.env.NODE_ENV === 'production', config => { config.entry('app').clear().add('./src/main-prod.js') config.set('externals', { vu

2020-07-13 09:32:20

vue-cli3项目设置开发环境和生产环境的不同入口

1.创建vue.config.jsmodule.exports = { chainWebpack: config => { config.when(process.env.NODE_ENV === 'production', config => { config.entry('app').clear().add('./src/main-prod.js') }) config.when(process.env.N

2020-07-13 08:52:49

vue-cli3项目在生产环境中移除所有console

1.安装依赖npm install babel-plugin-transform-remove-console --save-dev2.在babel.config.js// without options{ "plugins": ["transform-remove-console"]}

2020-07-13 06:51:06

vue在项目中添加进度条

1.下载依赖 cnpm i nprogress --save2.main.js中的请求和响应拦截器中使用// 导入NProgress包对应的JS和CSSimport NProgress from 'nprogress'import 'nprogress/nprogress.css'// 配置请求的根路径axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1'// 在request拦截器中,展示进度条 NProg

2020-07-13 06:38:52

vue中使用lodash深拷贝对象和合并对象

1.下载依赖npm i lodash --save2.组件中使用<script>import _ from 'lodash'methods:{ // 添加商品 add() { console.log(this.addForm) this.$refs.addFormRef.validate(valid => { if (!valid) { return this.$message.error('填

2020-07-11 09:21:49

vue中使用腾讯云视频播放器

1.index.html<!-- 引入腾讯云视频 --> <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.0.js" charset="utf-8"></script>;2.使用<!-- * @Author: your name * @Date: 2020-07-09 14:16:25 * @LastEditTime: 2020-07-10 1

2020-07-10 16:46:14

vue直播评论滚动到最底部

<style lang="less">#cute-barrage { width: 100%; height: 100px; /*确定弹幕长度*/ overflow-y: auto; /*横向超出部分隐藏*/ position: absolute; // display: flex; // flex-flow: column-reverse; // align-items: baseline; .barrage-div { height: 0.6re..

2020-07-09 21:48:55

vue-quill-editor限制字数

<quill-editor v-model="addForm.useExplain" :options="editorOption" ref="myQuillEditor" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change=".

2020-07-09 11:30:13

el-update超出限制不显示上传图标

首先我通过浏览器找到了这个上传图片按钮的class名称为 .el-upload–picture-card 我知道不可以直接修改,所以决定给这个组件绑定一个class名:class="{hide:hideUpload}"之后data里面设定一个初始的状态值hideUpload: false在el-upload中绑定一个on-change事件和on-remove事件,这个事件有两个参数(file,fileList)并且在添加文件、上传成功和上传失败时都会被调用:this.hideUp

2020-07-08 11:15:21

微信小程序webview缓存处理

缓存问题大家都知道,浏览器缓存是个非常有用的特性,它能够提升性能、减少延迟,还可以减少带宽、降低网络负荷。关于浏览器的缓存机制可以总结成下面 2 句话:浏览器每次发起请求,都会先在浏览器缓存中查找该请求的结果以及缓存标识 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中更进一步,我们可以粗略了解一下强制缓存和协商缓存的运行机理。若强制缓存(Expires 和 Cache-Control)生效则直接使用缓存,若不生效则进行协商缓存(Last-Modified/If-Modifie

2020-07-02 20:33:12

重启Nginx服务

重启Nginx服务方法一:进入nginx可执行目录sbin下,输入命令./nginx -s reload即可

2020-07-05 13:21:14

js字符串分割成数组,并控制每一项的显示和隐藏的妙用

res.data.forEach(item => { item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : [] // 控制文本框的显示与隐藏 item.inputVisible = false // 文本框输入的值 item.inputValue = '' })...

2020-07-04 10:35:35

js字符串转数组解决数组中有空元素的问题

res.data.forEach(item => { item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : [] })

2020-07-04 10:01:50

nginx配置重定向

location /njDist { rewrite /njDist /102 last; } location /102 { proxy_pass http://127.0.0.1:8887/njDist; }

2020-07-03 10:08:31

vue实现直播弹幕功能

1.barrage.lesshtml,body{ width:100%;}.cute-barrage{ width: 100%; height: 100px; /*确定弹幕长度*/ position: absolute; top: 1.5rem; /*确定弹幕高度*/ left: 0; overflow-y: hidden; /*横向超出部分隐藏*/ .barrage-div{ position: absolu

2020-07-01 21:21:40

vue实现直播间点赞功能

1.style.cssbody { --bubble_time: 3s; --bubble_scale: 0.8s;}.praise_bubble { width: 100px; height: 200px; position: relative; background-color: #f4f4f4;}.bubble { position: absolute; width: 40px; height: 40px; left: 30px; bottom

2020-07-01 20:04:18

查看更多

勋章 我的勋章
  • 签到新秀
    签到新秀
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 专栏达人
    专栏达人
    授予成功创建个人博客专栏的用户。专栏中添加五篇以上博文即可点亮!撰写博客专栏浓缩技术精华,专栏达人就是你!
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 1024勋章
    1024勋章
    #1024程序员节#活动勋章,当日发布原创博客即可获得
  • 勤写标兵Lv4
    勤写标兵Lv4
    授予每个自然周发布9篇以上(包括9篇)原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。