- 博客(50)
- 收藏
- 关注
RSS订阅原创 webpack配置详解
webpack 基础配置总结文件大致结构entry**output****mode****loader****module****Plugins**sourceMapWebpackDevServerBabel处理ES6配置React打包环境多⻚⾯打包通⽤⽅案⽂件监听配置别名 resolve.aliasresolve.extensions配置使⽤静态资源路径publicPath(CDN)压缩css压缩HTMLdevelopment vs Production模式区分打包基于环境变量区分tree Shakin
2021-05-22 13:11:58
2409
4
原创 umi+antd+dva项目搭建
记录项目搭建的大致流程，详细的可以查看 Ant Design 实战教程（beta 版），或者Umi文档及Dva文档1. 项目初始化全局安装umiyarn global add umi新建项目文件夹及mkdir my-appcd my-app初始化package.json文件yarn init -y新建src文件mkdir src命令方式新建组件文件umi generate pages index/index // 创建pages目录并在当前目录下新建index文件夹以及在.
2020-07-17 15:46:17
1924
转载 Vue父组件调用子组件事件的两种方法
原文：Vue父组件调用子组件事件的两种方法首先我们要了解$on和$emitvm.$on( event, callback )：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。vm.$emit( event, […args] )：触发当前实例上的事件。附加参数都会传给监听器回调。父组件中：<template> <div> <div @click="click">点击父组件</d
2020-06-05 14:32:16
7348
原创 React核心基础知识总结
react核心基础知识的总结以及学习过程中认识的一些小技巧的记录1. JSXjsx是JavaScript 的语法扩展，写法上是HTML和JavaScript参杂着写，编译之后也就是JavaScript 对象。一般写法：import React, { Component } from 'react'import ReactDOM from 'react-dom'import './index.css'class Header extends Component { render () .
2020-05-30 13:46:25
414
原创 Error: [vuex] do not mutate vuex store state outside mutation handlers
1. 问题解析通常出现这种错误是因为 在 mutation 函数外修改了 state 里面的值，如：我这里的参数data是一个对象， 对象为引用类型， 像这样直接赋值只是把地址赋值到当前变量上， 地址指向的值还是同一个对象。 所以在其他地方修改参数data的时候相当于是在修改state里面的selectedSpec， 然后就会报错了。数组同理。2. 解决方法可以通过值拷贝的方式把参数data拷贝一份再赋值给state里面的变量，如果只是简单引用类型的值，可以通过浅拷贝的方式数组也可以使用as
2020-05-29 16:00:36
2460
原创 vue 使用ECharts
安装echartsyarn add echarts在组件中引用import echarts from 'echarts'根据官方文档用例定义容器<template> <div> <div id="main" ref="bar" style="width: 600px;height:400px;"></div> </div></template>在mounted中获取DOM节点通过refcons
2020-05-15 16:21:10
203
原创 webpack配置项目并启用静态服务运行项目
demo仓库地址1. 新建一个js文件2. npm init -y 初始化建立package.json文件3. 安装webpack和webpack-cliyarn add webpack -Dyarn add webpack-cli -D4. 新建webpack.config.js文件， 并开始填写以下内容引入node模块pathconst path = require('pa...
2020-04-11 18:40:49
599
原创 Taro使用wxParse富文本组件
官方使用例子：Taro使用wxParse项目开发主要使用的ts， 但是ts直接在标签中import可能会报错， 于是按照官方给的示范例子， 单独封装成一个富文本组件。下载wxParse， 并把它放在components文件夹中新建富文本组件wxParseComponent.js文件import Taro, { Component } from '@tarojs/taro'impo...
2020-03-24 14:44:10
1879
2
原创 Taro 实现购物车 点击修改商品数量 阻止事件冒泡
场景描述：使用：Taro框架、 TaroUi框架组件：(InputNumber 输入框)、 小程序原生组件(Checkbox)问题： 购物车商品展示实现一般都是多选框包裹住商品信息，但这样随之而来的问题是，在点击数量增减的时候， checkbox的点击选中事件也会触发。解决： 网上搜索Taro相关的阻止事件冒泡方法， 查到了 stopPropagation()方法， 在onClick事件上...
2020-03-17 10:55:41
716
原创 npm 或 yarn安装依赖报错 EPERM: operation not permitted, unlink 解决方法
1. 权限问题检查是否限制为只有管理员才能操作，打开当前项目的文件夹然后选中要打开的项目文件，在点击左上角的 文件 然后以管理员身份运行。在里面执行安装命令npm i ...,yarn add ...2. 缓存问题npm清理缓存命令：npm cache clean --forceyarn清理缓存命令: yarn cache clean执行命令之后，若还是安装依赖失败，可以到C:\U...
2020-03-14 22:14:44
14385
1
原创 Flex 布局 元素被挤压的问题
Flex 意为 “弹性布局”，是一种在开发静态页面过程中常用的布局模式。开发购物车使用flex布局的时候遇到的一种场景：具体如图所示， 当商品名称超出两行文字时显示省略号， 但是使用flex布局， 占位较多的子元素会去挤压别的子元素。解决方法很简单， 就是使用flex-shrink属性；flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，它还有另外...
2020-03-13 11:53:44
16609
5
原创 CSS Module 在vue和react中的多类名写法
vue：<van-panel :class="[$style.others, $style.panel]"/>动态添加类名：:class="[$style['tag-active'], {[$style['tag-normal']]: bool}]"/> // bool 为定义的bool值变量， true时添加对应的类名， false则反之react:classNa...
2020-03-10 11:52:17
1594
转载 解决VSCode没有代码提示的问题
在使用vscode写代码的过程中，有时候会遇到代码提示没有了，还有自己定义的常用的代码片段，比如console 或者是const等等；// 自定义的代码片段"Print to console": { "prefix": "cl", "body": [ "console.log($1, '<-$1->');", ], "descripti...
2020-03-07 13:45:29
30712
4
原创 商城添加商品到购物车中逻辑
一般都会把商品信息存储于缓存之中，web端cookie可存的容量较小，sessionStorage关闭当前页面便会销毁数据，所以一般选择localStorage存储购物车的数据，小程序直至使用get/setStorageSync,本例为小程序，使用了uni-App框架。addToCart() { // 1 获取缓存中的购物车数组，初始为不存在，所以会得到一个空数组 let...
2020-02-26 15:54:29
738
原创 微信小程序商城
微信小程序电商平台视频学习：零基础玩转微信小程序跟着视频中老师敲了一遍，自己换了数据接口又折腾了一遍。数据使用的是：api工厂 ，免费使用，有配套的后台管理，更详细的使用可以前去官网查看相关文档。学习：微信小程序商城项目地址：https://github.com/Kotoba209/wx-mallapi工厂的使用：前往后台管理注册账户信息并登录登录后台，左侧菜单 “工厂设置” -...
2020-02-24 23:27:15
1492
原创 git 报错以及解决归纳
1. ! [rejected] dev -> dev (non-fast-forward)（远程仓库代码改变，本地未更新）解决方法：git fetch origin dev //获取远程dev分支的修改git merge origin dev // 合并远程dev分支git pull origin dev // 更新本地的代码...
2020-02-21 11:36:20
11826
原创 微信小程序学习五(使用wxParse解析html)
rich-text标签可以可以简单满足需求，但有时候体验上还是会稍微差些，这时候可以使用wxParse富文本组件来提升用户体验。在github上clone wxParse组件 https://github.com/icindy/wxParse每个小程序页面都会有四个文件.js 、.json、.wxml、.wxss.wxParse除了对应的json文件，其他都有在想要使用富文本组件的页面分...
2020-02-20 17:26:47
858
原创 git常用命令归纳
查看状态：git status与远程仓库建立连接并提交代码git初始化：git init与远程仓库建立连接：git remote add origin 仓库地址添加文件到暂存区：git add 文件名 //.表示提交全部文件，如 git add .（这一步在vscode中的可视化操作：点击下图中的√）添加文件到仓库： git commit -m '提交信息'//提交信息一般为...
2020-02-15 17:06:27
1279
原创 自定义vant组件样式
学习修改vant组件样式无法显示的问题由于scoped只对当前.vue文件中的template模板标签内的结构有效，所以在含有scoped属性的style标签中修改vant组件样式是无效的。所以先确保.vue文件的style标签没有使用scoped属性，然后在浏览器中查看想要修改的组件的类名即可。如上图中使用类名.van-button--default修改button的背景颜色<s...
2020-02-12 15:41:41
13745
原创 微信小程序学习四(WXS 语法)
主要记录学习过程中使用次数较多的内容WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。WXS 语法参考对于 WXS 和 JavaScript 的性能比较，官方给出的数据是：由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 J...
2020-01-20 14:54:18
617
原创 微信小程序学习三(wxml语法)
主要记录学习过程中使用次数较多的内容官方文档-框架数据绑定wxml中的动态数据均来自对应的Page的data简单绑定数据绑定使用Mustache语法（双大括号）将变量包起来。内容<!-- index.wxml --><view> {{ message }} </view>// index.jsPage({ data: { ...
2020-01-17 20:23:12
1341
原创 微信小程序学习二(App、Page)
主要记录学习过程中使用次数较多的内容官方文档-框架APP(Object object)注册小程序，接收一个Object参数。其指定小程序的生命周期回调等。App()必须在app.js中调用，必须调用且只能调用一次。App({ onLaunch (options) { // Do something initial when launch. }, onSho...
2020-01-17 17:05:51
654
原创 微信小程序学习一(小程序配置)
主要记录学习过程中使用次数较多的内容官方文档-框架欢迎使用Markdown编辑器pages用于指定小程序由哪些页面组成，每一项都对应一个完整的页面路径（含文件名），文件名不需要些后缀，框架会自动去寻找对应位置的.json，.js，.wxml，.wxss四个文件进行处理。数组的第一项为初始页，即程序运行时第一个加载页。小程序中页面的新增&减少都需要对pages数组进行修...
2020-01-17 15:41:36
1213
原创 vue 解决路由参数变化 当前页面以及页面内的组件未更新的问题
需求描述：当前路由不变，参数改变，页面进行动态渲染如：/users/1 -> /users/2 ，参数由1变为2，页面数据需要更新，但是一般情况下原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。先介绍用到的两个方法watch一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名...
2020-01-10 12:10:33
3111
原创 iview爬坑之路（一）render以及renderHeader函数
在此之前由于习惯了vue template的写法，使用render函数进行标签定义有些不大习惯，因此记录于此，以便日后参考。在项目中使用render函数最多的是iview的Table组件，所以以此为例自定义表内容用render函数自定义表内容语法： render: (h, params) => { return h(' 定义的元素 ', { 元素的性质 ...
2020-01-09 11:48:25
3974
1
原创 vue实现购物车页面操作 商品的单选和全选以及商品单价和总价的动态变化
vue框架搭建，UI库使用的是iview，购物车页面使用iview的table组件，没有用到element，不知道实现起来效果怎么样，感觉iview有点坑。准备工作：数据源shoppingCart：[ ];该数据数据结构如下const items = { id: data.id, num: data.num, img: data.img...
2020-01-08 17:42:21
2654
原创 vue 对象属性数组从对象数组中动态渲染值
数据格式如下arr1 = [ "规格", "重量" ]arr2 = [ { "规格": "7号", "重量": "10斤" }, { "规格": "5号", "重量": "8斤" }, { "规格": "7号", "重量": "9斤" } ]用v-for就完事了，循环两次<div v-for="(s, index) in arr1" :key="index"> ...
2019-12-30 16:25:40
2907
原创 js给变量赋布尔值的特殊写法
var i = 4;var j = 5;var bool = (i > j);// bool = false;var bool = (i < j);// bool = true;
2019-12-13 23:11:37
1146
原创 vue 解决连续点击按钮多次提交表单的问题
做表单提交的时候遇到一个问题：表单以及其他的数据提交，如果连续点击提交按钮，不做处理的话会导致同一个表单提交多次到数据库。一开始想到这个问题，简单，在data函数中定义一个变量然后绑定到按钮的disable属性中点击提交按钮后把disable设为true，这样就会禁用按钮了，然后发出请求提交数据后在回调函数中再把disable改为false大功告成！但是问题来了如果后端出现问题导...
2019-12-04 18:14:41
6744
原创 axios封装的请求方法
import axios from 'axios';import { getToken} from '@/utils/auth';// eslint-disable-next-lineimport Message from 'iview/src/components/message';const service = axios.create({ baseURL: process...
2019-12-02 17:35:11
300
原创 vue父组件通过props传值设置子组件的样式
一. 子组件在元素中绑定样式在props中写入style绑定的变量二. 父组件引入子组件并注册在子组件元素中绑定需要传的变量并给值
2019-11-27 09:37:47
2683
转载 vue Eslint 报错 Expected linebreaks to be 'LF' but found 'CRLF'
由于与原使用的操作系统不一致导致的错误。找到.eslintrc.js文件在rules项添加如下代码'linebreak-style': [0, 'error', 'window'],
2019-11-26 14:55:11
413
转载 VScode 配置Vue ESlint + 格式化代码
1. 安装插件ESlintveturPrettier - Code formatterManta’s Stylus Supremacy2. 在setting.json文件中添加配置代码依次打开 ： 文件（file）–>>首选项（preferences）–>>设置（settings）在搜索框中输入setting.json在大括号中添加如下代码// v...
2019-11-26 12:07:05
784
原创 vue 图片懒加载
1. 安装插件yarnyarn add vue-lazyloadnpmnpm i vue-lazyload -S2. 在入口文件main.js中引入import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)3. 在组件中使用<ul> <li v-for="img in list"> ...
2019-11-25 17:16:46
120
原创 JSON学习笔记
JSON学习笔记一. 简介JSON（JavaScript Object Notation） 是一种轻量级的文本数据交换格式，使用 Javascript语法来描述数据对象，语法上与创建 JavaScript 对象的代码相同，所以在JavaScript 中处理 JSON数据无需解析器（API或工具包）。二.语法数据在名称/值对中“username” : “kotoba”数据由逗号分...
2019-11-21 11:50:28
122
原创 vue3版本跨域 axios解决
vue3版本跨域 axios解决先在根目录下（与src同级）新建vue.config.js文件// vue.config.jsmodule.exports = { outputDir: 'dist', // build之后的目录名称 assetsDir: 'assets', // 静态资源目录 lintOnSave: false, // 是否开启eslint devS...
2019-11-18 16:15:59
415
原创 Vuex中的辅助函数mapState，...mapState对象展开符学习笔记
最近找了个项目来练习，发现项目中有几处出现…mapState函数，遂去官网查看文档以及各路大佬分享的经验之谈，于是准备写点东西加深印象。关于Vuex可前往官网查看更多内容，开始正文mapState是state的辅助函数，其实也就是state的语法糖1.不使用mapState// store.jsVue.use(Vuex);export default new Vuex.Store(...
2019-08-16 17:58:39
830
原创 vue项目中引入iconfont及引入图标后显示方块问题
先进官网iconfont找到想要添加的图标，然后点击添加到购物车。2. 点击添加到项目，如暂未存在项目则点击添加至项目后可新建项目（iconfont需登录）3. 选择Symbol然后点击下载至本地4. 解压后，不需要前两项，剩余的在项目中新建一个iconfont文件夹并把这些文件添加到文件夹中5. 在入口文件main.js中引入css文件6. 在需要添加的图标的地方加上一...
2019-08-16 15:18:09
6415
9
原创 vue.js父子组件通过Prop传值
前言：本文主要记录父子组件之间通过prop进行数据传递的方法一，即将Prop中的值赋值给本地定义的属性，不涉及prop的其他特性父组件向子组件传值先写一个简单的子组件，内容如下<template> <div> <span class="child">{{msg}}</span> <br> </d...
2019-08-16 13:23:41
2482
原创 vue选项组通过点击实现Class切换
首先使用v-for指令动态生成选项组html<ul class="content clear"> <li v-for="(item, index) in items" :key="index">{{item.title}}</li> </ul>jsdata() { return { ite...
2019-07-31 10:49:42
439
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人