pengjunlee的博客

js-cookie 官方文档里面就详细的介绍了es5怎么引用，以下是ES6以上的用户。一、安装npm install js-cookie --save二、引用import Cookies from 'js-cookie'三、一般使用存到Cookie去// Create a cookie, valid across the entire site:Cooki...

通用Ctrl+Shift+P, F1 打开命令面板 Ctrl+P 快速打开文件 Ctrl+Shift+N 打开新窗口/实例 Ctrl+Shift+W 关闭窗口/实例 Alt+Shift+R 打开所在文件夹基础编辑Ctrl+X 剪切当前行 Ctrl+C 复制当前行 Alt+ ↑ / ↓ 向上/向下移动当前行 Sh...

目录使用方法1. 引入jQuery和Tooltipster's文件2. 设置你的HTML3. 激活 Tooltipster4. 定义你的tooltips风格5. 在HTML内使用你的tooltips6. 使用插件附录：参数插件描述：Tooltipster是一个jQuery提示框插件，用于对HTML元素的拖动、移入、点击等鼠标事件或其他键盘事件弹出效果炫酷的提示框...

Express简介Express是一个基于 Node.js 平台，快速、开放、极简的 Web 开发框架。Express 在 node.js 基础上扩展了 Web 应用所需的功能，并提供了丰富的 HTTP 实用工具以及来自Connect框架的中间件，使得创建强健、友好的 API 变得快速而且简单。NodeJS下安装Expressnpm install express -g // 全局安...

本篇文章我们一起来看一看 npm 的 package.json 的配置细节。首先，你需要知道的是我们在 package.json 中配置的内容不仅仅是一个 Javascript 对象，它实际上还是一个JSON对象。而且这里面有很多配置项的表现都会受到 npm-config 配置文件中一些配置的影响。下面进入正题，逐个对 package.json 的配置项进行说明。name如果你打算...

Axios简介Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，用来发送 HTTP 请求，其作用类似于jQuery 的 ajax() 方法。Axios 支持如下特性：从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请...

英文地址：https://eslint.org/docs/rules/indent嵌套的代码块或者语句需要具有一定的缩进，类似下面这样：function hello(indentSize, type) { if (indentSize === 4 && type !== 'tab') { console.log('Each next indenta...

英文地址：https://eslint.org/docs/rules/semiJavaScript 在众多的类C语言中是独一无二的，因为它不需要你在每个语句的末尾添加分号。在多数情况下，JavaScript 引擎能够自行确定在某个位置是否需要分号，并在需要时为我们自动添加上分号。这一特性被称作自动分号插入（automatic semicolon insertion，简称ASI），并且成为了J...

Ctrl+Shift+P，F1 展示全局命令面板Ctrl+P 快速打开最近打开的文件Ctrl+Shift+N 打开新的编辑器窗口Ctrl+Shift+W 关闭编辑器Ctrl + X 剪切Ctrl + C 复制Alt + up/down 移动行上下Shift + Alt up/down 在当前行上下复制当前行Ctrl + Shift + K 删除行Ctrl + E...

第一种方式是前端创建超链接，通过a标签的链接向后端服务发get请求，接收后端的文件流，非常简单：<a :href='"/user/downloadExcel"' >下载模板</a>另一种情况是创建div标签，动态创建a标签：<div name="downloadfile" "downloadExcel()">下载</div>fun...

代码示例：this.$store.commit('loginStatus', 1);this.$store.dispatch('isLogin', true);规范的使用方式：// 以载荷形式store.commit('increment'，{ amount: 10 //这是额外的参数})// 或者使用对象风格的提交方式store.commit({ type...

1 本地图片动态绑定img的src属性一般我们在html中或者vue组件文件中引用图片是这样，这是不需要做特别处理的。我们将图片放入assets中或者重新建立个文件夹img什么的都可以，随意～。但是我们这时候可能会有个需求就是我们要动态绑定一组本地图片。将图片当成模块先引进来，再绑定。但是这种做法局限性比较大，模块化差，代码不好看 。如果我做的是纯静态的网站...

前面篇介绍了项目初始化，下面就要开始对项目webpack进行配置，由于vue-cli3将webpack的基础配置全部内嵌了，这就导致我们初始化项目完成之后发现原先的webpack的config配置全部都消失不见了，那该怎么办呢？别慌，vue-cli3早就考虑到了这一点，它预留了一个vue.config.js的js文件供我们对webpack进行自定义配置。vue.config.js官方配置指南...

// 首先 vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的,// 在点击的函数中 添加$event 参数就可以// 比如:<button @click = “clickfun($event)”>点击</button>methods: { clickfun(e) { // e.target 是你...

之前使用jquery都是每个组件引入import $ from 'jquery'这种方式需要在每个要使用jquery的组件里面引入一下，比较麻烦，分享一下全局引入的方法1.下载jquerynpm install jquery2.vue.config.js中webpack配置configureWebpack添加jquery插件vuecli3中修改webpack配置...

一,配置highcharts环境如果你只是自己单独的写个测试demo，请先安装 highcharts，命令：npminstall highcharts--save二,新建组件在src ------> components (组件目录下)，新建一个charts.vue页面，代码如下：<template> <div class="x-bar"...

在看项目时，突然看到预览图片的弹窗，感觉好僵硬，不能放大，不能切换，于是便在网上找下关于图片预览的插件，有找到三个插件，具体的优劣势的看自己的使用吧，我目前只是在电脑查看效果，分别是viewerjs插件、基于photoswipe的vue-photo-preview插件以及vue-picture-preview插件第一种：viewerjs使用介绍1、先安装依赖npm install...

简介  Vue-cli 是一个基于 Vue.js 进行快速开发的完整系统，可以用来为开发单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。  Vue-cli 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基...

关闭eslint直接注释掉package.json文件中eslint的配置就可以了（以下是vue-cli的默认配置）： "eslintConfig": { "root": true,////此项是用来告诉eslint找当前配置文件不能往父级查找 "env": { "node": true//此项指定环境的全局变量，下面的配置指定为node环境 ...

vue2组件引入本地图片的的两种方式：1，使用@引入：这是在组件内直接引用和普通的html方法一样，代码如下：<img src="@/assets/test.png" alt="test.png">2，使用vue的方法引入：这是典型的vue思想，使用数据来操纵dom； 首先在组件内使用 import ... from 引入：import imgUrl fr...

VUE简介Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。NodeJS和NPM安装Node.js 是一个基于...

（1）安装 Vetur 和 VueHelper 插件，安装完成后需要重启 VScode。在扩展插件搜索框中找到如下 Vetur 和 VueHelper 两个插件，注意看图标，千万别安装错插件了。（2）为 vue 添加模板代码片段。选中vue 项。在打开的 vue.json 中加入你的模板代码片段。{ "vue": { "prefix": "vue"...

Vue-Router简介在传统的MVC架构中，是由服务端对用户的请求进行拦截，并根据请求URL的不同来返回不同的页面，这种路由方式叫做服务端路由。与之相对的还有另外一种前端路由方式，即把这些路由的工作交给前端来实现，由前端来根据不同的请求返回不同的页面。在单页面应用中，由于大部分的页面结构相对固定，需要改变的内容只占其中很小一部分，所以更适合使用前端路由。Vue Router 就属于前端路...

如果想在普通的HTML页面引入jQuer库的话，直接使用<script src="jQuery.js"></script>即可。但是如果要在Vue组件中使用jQuery库的话，使用这样的方式就不行了，需要使用以下方法。一、安装jQuery依赖在使用jQuery之前，我们首先要通过以下命令来安装jQuery依赖：npm install jquery --save...

Bootstrap是一个简洁、直观、强悍的前端开发框架，在Web开发中使用频率很高，本文主要记录一下如何在 webpack项目中引入Bootstrap4.x。由于Bootstrap在各个Vue组件中经常会被用到，为了避免在每一个组件中重复引入，本文将直接在index.html 中引入Bootstrap。文件下载npm install jquery --save // Bootstra...

目录安装ToolTipster创建提示框组件使用提示框组件参考文章Tooltipster是一个简单易用且功能强大的jQuery提示框插件，用于对HTML元素的拖动、移入、点击等鼠标事件或其他键盘事件提供效果炫酷的提示框，有助于丰富系统的提示功能。本文主要记录一下如何在 webpack项目中使用ToolTipster来构建自己的提示框组件。官网地址：http://down.a...

如果你之前使用过vue.js，你一定知道在vue中各个组件之间传值的痛苦，在vue中我们可以使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新，那么接下来我们就来学习一下vuex是如何修改状态值的：我们新建一个vue项目（这里由于我们是讲解vuex，所以对于vue项目的创建我们不会讲解太详细）；在命令行输入 vue init webpack web（使用w...

文章系列：基于Vue的管理后台设计（布局篇） 基于Vue的管理后台设计（登录鉴权篇） 基于Vue的管理后台设计（打包部署篇）前言我打算把接下来要写的几篇文章写成一个系列，用来记录一下如何基于Vue一步一步地搭建一个后台管理系统。文章前传：《Vue组件中引入jQuery》《Webpack项目中引入Bootstrap4.x》《Webpack项目中使用ToolTipst...

BodyParser简介在http请求种，POST、PUT、PATCH三种请求方法中包含着请求体，也就是所谓的request-body，在Nodejs原生的http模块中，请求体是要基于流的方式来接受和解析。body-parser是一个HTTP请求体解析的中间件，使用这个模块可以解析JSON、Raw、文本、URL-encoded格式的请求体。Node原生的http模块中，是将用户请求数...

目录方法一：使用命令行主题工具安装工具初始化变量文件修改变量编译主题引入自定义主题方法二： 直接修改element样式变量创建vue-cli项目安装vue安装vue-cli创建webpack项目（ vue-project）启动项目安装scss插件安装element-ui安装sass-loader，node-sass改变element样...

文章系列：基于Vue的管理后台设计（布局篇） 基于Vue的管理后台设计（登录鉴权篇） 基于Vue的管理后台设计（打包部署篇）页面布局设计完，本篇接着来说一说登录与鉴权。Login.vue首先你需要有一个登录页面，在这里我直接从网上download了一个，页面效果如图所示：下面是登录页面的完整代码：<template> <div id="logi...

本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标。IconFont官网：https://www.iconfont.cn/1、打开IconFont官网并登陆自己的账户。2、挑选你喜欢的图标，添加入库。3、进入购物车查看已挑选的图标，下载代码。4、将下载后的图标代码解压，文件如下。5、将解压文件复制到项目的 src/assets 目录下。...

vue-router 按需加载vue的单页面（SPA）项目,必然涉及路由按需的问题。以前我们是这么做的。// require.ensure是webpack里面的，这样做会将单独拉出来作为一个chunk文件const Login = r => require.ensure( [], () => r (require('../component/Login.vue')));...

1.新建的vue项目启动后报错No PostCSS Config found in: /Library/WebServer/Documents/WebserveProjects/shopapp-wechat/node_module2.此时需要对webpack 3.0进行配置postcss.config.js是针对webpack3.0做的特殊处理。在项目根目录新建postcss....

一 什么是localStorage对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage。sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载 localStorage（长期存储） ：与 sessionStor...

今天做项目时踩到了vue-router传参的坑（query和params），所以决定总结一下二者的区别。直接总结干货！！！1.query方式传参和接收参数传参: this.$router.push({ path:'/xxx', query:{ id:id } }) 接收参数:this.$rout...

文章系列：基于Vue的管理后台设计（布局篇） 基于Vue的管理后台设计（登录鉴权篇） 基于Vue的管理后台设计（打包部署篇）管理后台终于开发完了，本篇就来说一说如何打包和部署。vue-cli项目打包vue-cli项目开发完成之后，我尝试执行 npm run build 命令构建生产包，并部署到 tomcat。结果，一启动，吓我一跳，全是 404 。通过查看别人的博客，发现...

目录Vue.js介绍MVVM模式Hello World示例双向绑定示例Vue.js的常用指令v-if指令v-show指令v-else指令v-for指令v-bind指令v-on指令v-bind和v-on的缩写综合示例总结Vue.js介绍Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。...