Smile.ls-优快云博客

原创 webstorm 下载安装教程

安装包下载官网下载地址：WebStorm: The Smartest JavaScript IDE, by JetBrains这里可以选择自己想要安装的版本。具体安装过程双击安装程序，点击下一步。点击【Browse】选择安装目录，点击下一步。所有的都选上(默认全选)，点击下一步。更新上下文菜单。就是在任意一个文件上，鼠标右键，可以通过 Webstorm 打开。选择在开始菜单的名字，这里可以使用默认，点击安装。点击完成，...

2022-05-28 22:31:39 16177 5

原创 vue-cli3+ 搭建pc端管理项目（五, axios 使用及封装）

任何一个系统，和后端的数据交互都是必要的。vue 项目推荐使用 axios安装npm install axios使用第一种方式，将 axios 添加到 Vue 原型上。(不推荐)// main.jsimport Vue from 'vue'import App from './App.vue'import './registerServiceWorker'import router from './router'import store from './store'impo

2021-09-07 22:00:36 467

原创 vue-cli3+ 搭建pc端管理项目（四, 按需引入 element-ui，支持修改主题色）

pc 端的项目，ui 推荐使用 element-ui。毕竟 element-ui 是基于 vue 的，契合度会更高一些。element-ui 有两种引入方式：全部引入，和按需引入。全部引入：先安装：npm i element-ui -S// main.jsimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);按需引入：安装：

2021-09-06 22:31:02 543

原创 vue-cli3+ 搭建pc端管理项目（三, css预处理器scss使用）

项目中使用 css 预处理器，可以提高 css 开发效率，合理应用预处理器的特性，也可以提高 css 代码的可维护性。目前常见的 css 预处理器有三种：less，scss(sass升级版)，stylus。不管是哪一种，最基本的variables，extend，mixin，import 这些都是有的，只不过具体的用法和写法各有不同罢了。大家可以根据自己的喜好，选择自己喜欢的预处理器。我选择的是 scss。具体原因是：element-ui 的theme-chalk 使用 scss编写，项目中如果也..

2021-09-05 23:34:29 932

原创 vue-cli3+ 搭建pc端管理项目（二, 不同环境配置[开发，测试，生产]）

项目开发中，会使用到不同的运行环境，例如：开发环境，测试环境，生产环境。1. 配置打包命令package.json文件中修改 serve，build 命令，并添加 test 命令。如下：// package.json"scripts": { "serve": "vue-cli-service serve --mode development", "build": "vue-cli-service build --mode production", "test":

2021-09-01 23:40:24 523

原创 vue-cli3+ 搭建pc端管理项目（一, 项目创建）

写在最前：node 版本要求 >= 8.9 。安装安装脚手架： npm install @vue/cli(如果是全局安装，安装命令加 -g)检验安装成功：在命令窗口中输入命令： vue --version 或者 vue -V (v大写)出现版本号即为安装成功搭建项目1. vue create 项目名称（项目名称中，不要有大写字母）2. 选择手动配置后，配置如下：3. 选择 vue 版本（2.x）4. 是否使用 class.

2021-09-01 23:15:04 704

原创 Vue watch 使用方法详解，及路由监听

Vue 中可以通过 watch 自定义侦听器，来响应数据的变化，支持对 data，props，computed 中的数据进行监听。基本用法基本类型监听data () { return { name: '小黑', age: 300, isSpirit: true }},watch: { name: function (newVal, oldVal) { console.log('name发生了变化：newVal:' + newVal + '

2021-07-24 20:02:33 1100

原创 Vue异步组件的三种实现方式

异步组件异步组件的特点：Vue 只有在这个组件需要被渲染的时候才会从服务器端请求组件的相关js，且会把结果缓存起来供未来重渲染。异步组件的好处：提高性能。在大型应用中，我们可以将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。通常的使用就是在配置路由的时候，使用异步组件的加载方式，只有路由被触发时，才会加载对应的组件。而不是一次性加载所有的组件，这样很有利于提高性能。异步组件三种实现方式工厂函数// 全局注册Vue.component('child1'

2021-07-19 20:16:21 2800 1

原创 javascript 实现对象和数组深拷贝的几种常见方法

JavaScript 中的数据类型可以分为：基本类型：string，number，boolean，undefined，null 引用类型：array，object （array 本质上也是 object）假如存在两个变量，a 和 b ，在执行 a = b 的操作时，基本类型采用值传递，引用类型采用地址传递。关于值传递和地址传递，大概就是，值传递会在内存中单独的开辟一片空间存储数据，a 在内存中有自己的存储空间，b 在内存中也有自己的存储空间，a 和 b 已经没有什么关系了。而地址传递只是增加了一个地

2021-06-29 14:06:29 2984

原创 vue 的组件之间传值（父子组件，兄弟组件，祖孙组件，任意组件）

1. props / $emitprops 父组件传值给子组件 $emit 子组件传值给父组件props：// 父组件<template> <div> <Child v-bind:list="users"></Child> </div> </template><script> import Child from "./components/Child" //子组件

2021-05-18 13:57:24 761

原创 uni-app 上拉加载函数 onReachBottom 不触发

记一次问题解决记录。问题：uni-app 上拉加载函数不触发。首先我已经在 pages.json 文件中配置了 enablePullDownRefresh 为 true，且配置正确。{ "path": "pages/list/list", "style": { "enablePullDownRefresh": true }},查资料之后，有一种说法是onReachBottomDistance 这个值的设置太小，会导致不触发函数，建议设置为 150。onReachBottomD.

2021-05-14 17:42:56 9136 4

原创 uni-app 实现下拉刷新和上拉加载

移动端，列表页的下拉刷新和上拉加载是非常常见的功能，本文介绍了使用 uni-app 时，如何实现此功能。基础配置uni-app 中定义了onPullDownRefresh 和onReachBottom 处理函数，分别用于监听该页面用户下拉刷新事件和上拉加载事件。（这两个处理和onLoad等生命周期函数同级）但是如果要使用这两个函数，首先需要在 page.json 文件中配置 enablePullDownRefresh 为 true，假设需要在 list 页面中使用这两个函数，配置内容如下：..

2021-05-14 11:34:16 2422

原创 Error: Can‘t find Python executable “python“, you can set the PYTHON env variable

记一次问题解决记录。问题：在执行 npm install 的时候，报了【Error: Can‘t find Python executable “python“, you can set the PYTHON env variable】的错误。错误截图如下：网上百度之后，有两种解决方法：方法一：安装python环境，但是python必须是2.7。如果安装的是其他版本，则无效。安装完成后，且需配置环境变量。方法二：执行 npm install --global --production

2021-05-11 18:19:35 3320 1

原创 vs code 下载安装，git 配置，插件安装

window 10 系统下载安装1.打开官网地址： https://code.visualstudio.com/2.进入下载入口：3. 下载 zip 文件4. 解压到非系统盘，运行 code.exe 即可或者1. 打开官网，下载安装程序2. 双击运行安装程序3. 同意协议4. 选择安装地址5. 选择开始菜单文件夹在这一步可以更改开始菜单文件夹名字，或者不创建开始菜单文件夹，此步骤不管怎么选择，对以后的使用并没有...

2020-09-17 18:05:49 28345

原创移动端，录音之前判断是否已经获取录音权限

项目背景：项目是用 vue 写的，最终打包为 apk ，其中涉及到录音的功能，利用 h5+ 实现的。(在vue中集成 html5 plus，参考 https://www.cnblogs.com/luobiao/p/10552030.html)需求：长按录音，录音之前判断是否已经获取录音权限，如果没有权限，则需要获取权限；如果有权限，则开始录音。录音功能，使用了触摸事件，触摸开始，则录音开始，触摸结束，则录音结束。并且限制录音时长最长为一分钟<div class="record.

2020-06-11 11:59:37 4466 5

原创基于 jsPlumb 的流程图编辑器的实现（四，按钮的操作）

1.清空画布清空画布，简单粗暴的方法就是清空html$('#delete').click(function(){ $('#flow-main').html('')})2.保存流程图保存流程图是将流程图中的节点信息，连线信息和 label 信息序列化之后，利用 Ajax 传递到后台。节点和 label 可以利用 jQuery 直接获取 dom 信息，jsPlumb 提供了...

2019-06-18 15:31:05 2773 4

原创基于 jsPlumb 的流程图编辑器的实现（三，document的操作）

由于节点，连线，label 在点击时，会获取焦点。那么，点击页面的其他地方，就应该失去焦点。点击其他地方需要做的事情：1.如果有在编辑的节点和 label ，要完成赋值2.节点，连线，label 失去焦点3.要取消 document 的键盘按下事件（如果这里不取消，在编辑输入框时，如果过按了 Backspace 和 Delete 键，会有报错。因为，在删除连线时，为 documen...

2019-06-18 15:27:27 2015

原创基于 jsPlumb 的流程图编辑器的实现（二，连接线的操作）

连接线支持单击选中，backspace 和 delete 可删除；双击可以为连接线添加 label。完整代码： /** * 单击删除连线 * */ clickLine:function(){ var that = this; jsPlumb.bind("cl...

2019-06-18 15:25:53 4162 1

原创基于 jsPlumb 的流程图编辑器的实现（一，节点的操作）

写在最前，就是第一次写博客，不免感慨，可以直接跳过 O(∩_∩)O这是自己第一次写博客，经验不充分，如果觉得代码不详细，文章底部有源码地址，欢迎大家下载。基本的功能都实现了，测试有限，如果发现问题，欢迎反馈，一起讨论。参考文章：jsPlumb插件做一个模仿viso的可拖拉流程图jsplumb 中文基础教程功能点：1.流程图节点可以拖拽添加2.节点支持单击选中 backs...

2019-06-18 15:24:37 9246 31

原创移动端适配

下边有两种方法，原理是一样的，就是写法上，有稍微的不同。第一种：<script type="text/javascript">(function (doc, win) {var docEl = doc.documentElement,isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X...

2018-08-15 19:35:17 283

转载 canvas画图

效果图：源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <canvas id=

2018-07-11 16:04:59 333

Smile0L0的博客