- 博客(121)
- 收藏
- 关注
RSS订阅原创 Mac安装flutter环境 operation not permitted: flutter
验证系统有没有限制 flutter，可以通过 brew 安装 flutterbrew 安装 flutter，系统会自动帮你配置好 flutter 环境，等安装完成后运行下面命令，能正常运行则说明安装成功，系统并没有限制 flutter终端输入 which flutter 查看应用路径这个路径是隐藏的通过，显示，卸载 brew 安装的 flutter。
2024-04-17 09:58:37
295
3
原创 git把旧仓库迁移到新的git仓库
将A仓库当前分支推送B仓库master分支并创建该分支，可以通过HEAD:分支名推送到自己想要的分支。添加新的远程连接，其中iter是为A仓库设置的远程仓库名，自定义的，但是不能与原有的相同；如何把就旧git仓库迁移到新的仓库，并附带旧仓库的提交记录，A是旧仓库，B是新仓库。将A仓库master分支推送到B仓库并创建master分支。查看A仓库有哪些远程仓库，默认是origin。拉取最新代码，确保迁移过去的是最新的； 拉取代码或者。
2024-01-28 13:25:21
508
原创 快速上手pinia状态管理
Pinia介绍去除掉Vuex中的Mutations，只有state，getters和actions，体积小，写法简单方便，更好的支持TypeScript语法，便捷的devTools操作。pinia安装，可以使用npm或者yarnyarn add pinianpm install pinia在main.ts中注册import { createApp } from "vue";import App from "./App.vue";import { createPinia } from "pi
2022-05-09 14:04:22
675
原创 类型别名type、接口interface与文字类型
类型别名类型别名就是给类型定义一个名字，然后用这个名字来代替这个类型，使用 type 来声明。可以定义对象类型，可以是联合类型，也可以是基元类型，或者其他的类型,一般使用大驼峰命名法。注意：type 定义的只是个类型，后面等于的就是类型的名字，并不是变量来的。对象类型例子type Point = { x: number y: number}function printCoord(pt: Point) { console.log(pt)}printCoord({
2022-05-06 23:57:23
573
原创 TypeScript联合类型
联合类型联合类型表示可以为多中类型中的一种当我们需要一个变量同时具备多个类型时，这时候就可以使用联合类型声明联合类型使用 | 分隔每个类型，只能赋值为声明的类型，不然就会报错例如：let str: string | numberstr = 5str = 'studyTs'str = true // 不能将类型“boolean”分配给类型“string | number”访问联合类型属性和方法当不确定一个联合类型的变量是不哪个类型时，只能访问此联合类型共有的属性和方法function g
2022-05-05 23:50:52
493
原创 TypeScript类型推论
类型推论如果没有明确指定类型，那么 TypeScript 就会更默认值推论出一个类型下面代码虽然没有指明类型，但是编译时会报错let str = 'ts'str = 7Type 'number' is not assignable to type 'string'上面代码等价于let str: string = 'studyTs'str = 7Type 'number' is not assignable to type 'string'如果定义的时候没有赋值，那么不管后面有没有赋值
2022-05-05 23:49:34
255
原创 Nginx配置同域名同端口不同项目
Nginx常用命令查看Nginx的版本号：nginx -V启动Nginx：start nginx停止或关闭：nginx -s stop重载：nginx -s reloadserver { #端口号 listen 8066; #项目域名或者ip地址 server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; #这里因为每个s
2022-05-05 17:11:08
1516
原创 TS创建与自动编写和parcel自动打包
步骤如下1、初始化项目 npm init -y2 、安装 typescript全局安装 npm i typescript -g本地安装 npm i typescript -Dyarn 安装 yarn global add typescript(全局)3、生成 tsconfig.json 文件tsc --init4、修改 tsconfig.json 中配置文件"outDir": "./dist" ts 编译后生成的 js 文件所在目录"rootDir": "./src" 编写 ts 源
2022-04-07 23:45:24
590
原创 git常用操作命令
掌握git操作是每位开发者必备的技能，记录一下日常操作命令。拉取仓库git clone '仓库地址'初始化gitgit init提交到暂存区git add . //将修改文件和未跟踪新添加的文件添加到暂存区，注意不包括删除git add -u //提交被修改和被删除文件添加到暂存区，不包括新文件git add -A //提交所有变化将暂存区的内容提交到仓库中git commit -m '提交说明'推送到仓库git push // 提交当前分支git push origin
2021-12-22 11:54:10
354
原创 vite基础应用配置
设置别名在 vite.config.js 配置不同文件引入时别名resolve: { alias: { /** * 例如@images代码的是项目中assets下面image的路径的别名， * 可以直接 require('@images/logo.png') * 其他文件参考这个配置别名 * */ '@images': '/assets/images' }}ts 校
2021-11-18 23:16:18
877
原创 快速上手vuex状态管理
Vuex是实现各个组件之间的互相通讯的状态管理模式Vuex五个核心概念state：存储vue的基本数据mutations：唯一能改变state中数据并触发视图更新actions：异步操作，并提交到mutations中getters：Vuex中的计算属性modules： 模块，可以把Vuex按照功能拆分成不同的模块state存在vuex的数据，全局都能调用，避免了组件之间频繁导入，注意：刷新页面时，state中的数据会回复到初始值，需要做好相关默认数据逻辑。在页面中可以使用 $store.s
2021-11-09 17:43:48
505
原创 金额格式化和转换为万、千万、亿
将大金额转换为万、千万、亿等/** * @param money 需要转换的金额 * @param digit 需要保留多少位数 * */export const simplifyMoney = (money=0, digit = 1) => { const numStr = money.toString(); const numSplit = numStr.split(".")[0]; const roundNum = parseInt(money);
2021-04-22 18:31:19
1070
1
原创 常用正则校验
正整数/^[1-9]\d*$/中文/[\u4e00-\u9fa5]/手机号码/^1[3-9]\d{9}$/校验金额/(^(([1-9]\d*)(\.\d{1,2})?)$|(0\.0?([1-9]\d?))$)/座机/^(0[0-9]{2,3}\-)([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/身份证/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(
2021-04-22 17:52:28
250
原创 动态改变echarts图表高度并重新渲染
<div id="line" style="width: 1000px;"></div> export default { // dom挂载再调用，因为created钩子里面dom还没挂载 mounted() { this.lineChart() }, methods:{ lineChart() { const myChar...
2020-10-13 17:17:03
2811
原创 echarts响应开发大屏可视化
大屏开发需要页面不满全屏，所以采用了vh单位。vh是根据视图高度进行自适应的 @function vh($px) { /*2700是设计图的高度*/ @return ($px / 2700) * 100vh }echarts的单位是px或者百分比，这时候需要写一个函数将px转化vhconst vh = px => { const screenH = window.screen.height; /*2700是设计图的高度*/ retu
2020-10-13 16:43:23
204
原创 echarts柱形图X轴Y轴相关配置
可配置XY轴刻度线，字体大小，柱形图大小颜色等 const options = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, textStyle: { /
2020-10-13 13:02:13
7410
原创 按需引入echarts组件
echarts组件非常多，有时候我们的业务就需要两三个不多，这时候如果全部引入的就会导致打包过大，这时候就可以按需引入。 const echarts = require('echarts/lib/echarts'); // 引入折线图 require('echarts/lib/chart/line'); // 饼图 require('echarts/lib/chart/pie'); // 引入提示框和标题组件 require('echart
2020-10-13 10:48:08
630
2
原创 npm 不是内部命令
这里介绍的是通过nvm来安装node，这样可以随意切换node版本。当然，也可以去node官网下载直接安装1、先nvm下载 点击下载,选择nvm-setup.zip(安装版)2、如果电脑装了杀毒软件，先关掉，获取安装的时候有提示选择允许所有操作，安装目录可以自定义，也可以选择程序默认的3、使用淘宝镜像 去到你的nvm安装目录(例如这里是c:/nvm)，打开settings.txt的文本文件， 增加两行node_mirror: http://npm.taobao.org/mirrors/node/
2020-07-08 23:39:38
324
1
原创 vue中全局引入scss
在项目的根目录下新建一个vue.config.js文件，配置如下，这样就不需要在页面引入公共的scss文件了，全局都能访问的到module.exports={ css: { loaderOptions: { sass: { // 旧版本 data:`@import "@/style/mixin.scss";` // 新版本
2020-06-15 16:45:50
315
原创 react 按需引入 Ant Design
如果不按需引入，项目大的情况下会影响性能，启动速度慢，需要对create-react-app 默认配置进行自定义 使用 react-app-rewired安装 react-app-rewired npm install react-app-rewired customize-cra --save 修改package.json, 把原来scripts里面的配置删掉，换成下面的 "scripts": { "start": "react-app-rewired start"
2020-06-09 16:19:19
517
原创 react使用ant报Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance
报错内容只有使用ant组件的时候才会报错，是因为react开启了严格模式去掉React.StrictMode，这样就不会报错了
2020-06-09 15:55:48
1272
原创 小程序封装一个表格组件
封装一个table组件关键就是要控制表头跟单元格之间的距离，建议不要使用flex:1；这个属性，有的机型会出现错位的情况，建议使用百分比或者rpx。首先创建一个table组件，在properties属性中定义表格相关的属性，便于遍历渲染，提高组件的复用性。开始传统的布局书写,表头跟单元格之间的循环分开来，通过循环表头的下标，来控制表头中的每个单元格之间的宽度。表格组件的行与列之间，先遍历后台返...
2020-04-25 00:19:32
1726
1
原创 小程序根据用户不同的身份动态切换底部导航（tabBar）
有时候，小程序的业务场景需要根据不同用户身份，展示不同的内容。这时候我们就可以采用自定义的形式，根据用户的身份来动态的展示底部tabBar，注意：底部tabBar最多只能显示5个，自定组件中的tabBar必须跟app.json中的一样。自定义实例可参考官方例子自定义tabBar自定义组件的生命周期创建四个文件，来模拟不同身份的用户，进行动态切换底部导航app.json{ "pages...
2020-04-21 01:11:51
18209
26
原创 vscode自动保存格式化eslint规则配置
在vscode插件中行下载三个插件如图ESLintPrettier - Code formatteVetur 因为使用了滴滴小程序开发框架，vetur高高版本不兼容，只能使用降低版本点击左下角的设置，搜索eslint，就可以看到setting.json文件，打开进行eslin配置{ "vetur.validation.template": false, "window.zoom...
2020-03-31 00:15:25
1665
原创 webpack Develoment 和 Production 模式的打包
Tree ShakingTree Shaking 在打包过程把声明但不引入的函数过滤掉，减少体积 只支持ES Module 模式，不支持require()模式，在webpack 开发环境下加入optimization模式optimization: { usedExports: true}还要在package.json 中加入 sideEffects属性可赋值为false...
2020-03-21 17:28:32
440
原创 使用 WebpackDevServer 提升开发效率
1、在package.json里面配置webpack --watch，只要配置了这项每次改变代码时都会自动打包代码，但是浏览器不会自动刷新，需要手动刷新 "scripts": { // watch键名自定义 "watch": "webpack --watch" }2、 npm安装webpack-dev-servernpm install webpack-dev-server ...
2020-03-08 15:26:36
125
原创 webpack环境安装
首先安装node.js建议安装左边的也就是（LTS）版本的，比较稳定初始化项目npm init -y 默认配置1、全局安装webpack和webpack-cli-g代表全局安装npm install webpack webpack-cli -save -g安装成功会显示如图通过webpack -v 查看webpack版本号通过npm uninstall webpack webp...
2020-03-01 23:55:41
138
原创 react部署之后到码云打开空白
1、修改package.json文件，添加"homepage":"."2、路由要使用HashRouter而不是BrowserRouterimport React from 'react';import { Provider } from 'react-redux';import { HashRouter as Router, Route } from 'react-router-dom...
2020-03-01 17:11:16
268
原创 React中动态切换类名
通过安装 classnames来管理类别npm install classnames --saveimport classNames from 'classnames';// high-speed-track 固定类名// 通过highSpeed是否存在来动态切换类名<div className={classnames('high-speed-track',{ 'item-...
2020-02-29 00:19:21
1333
原创 React中路由使用
安装router 官方文档npm install react-router-dom --save引入router精确匹配路由 exact// Link 相当于a标签import {BrowserRouter as Router, Route, Link} from 'react-router-dom';import Index from './pages/index';import...
2020-02-29 00:12:28
170
原创 React中state状态管理
使用immutable.js和redux-immutable来管理state中的状态，并进行每个模块state的拆分安装immutablenpm install immutable --save 安装redux-immutablenpm install redux-immutable 在App.js中引入 react-redux中的Provider ,引入store中的index.j...
2020-02-28 23:56:35
1107
1
原创 vscode自动编译less
打开vscode的插件商店搜索Easy LESS下载下载完成后点击当前的插件的右下角的设置，进行配置添加上着几句，然后保存，接下来编辑lees文件都会自动保存"less.compile": { "compress": false, //是否压缩 "sourceMap": false, ///是否生成map文件 "out": "../css/",//转化为css文...
2019-10-21 18:57:05
804
原创 vscode自动编译TS
先按照node.js，可以去官网下载node.js，然后直接安装node即可通过npm安装typescriptnpm install -g typescript在项目的根目录下创建 tsconfig.json 文件tsc --init 打开tsconfig.json文件，可以直接用一下代码替换掉原本的,或者找到outDir直接修改也行{ "compilerOptions": {...
2019-10-21 18:45:54
2421
原创 vue-cli3.0按需引入Element UI
如果按照官网引入会报错然后在main.js中引入import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'//引入组件名import { Button} from 'element-ui';import 'element-ui/li...
2019-09-29 19:05:44
1244
原创 小程序从手机相册选择图片或使用手机相机拍照
长按删除图片，点击预览图片<view class='photo' bindtap='changePhoto'>上传图片</view><view class="photo-list" > <image wx:for="{{photoList}}" wx:key="index" src="{{it...
2019-09-26 15:56:02
716
原创 vue实现自定义弹窗
在component下面新建一个toast文件夹，创建toast.vue和toast.js文件toast.vue<template> <div class="toast" :class="type? `toast--${type}`:''"> <p>{{content}}</p> </div><...
2019-09-26 10:59:37
3845
原创 微信小程序使用canvas绘制海报
在使用自定义组件绘制海报时，一定要传第二个参数this，不然绘制不成功。所有网络图片都需要通过wx.downloadFile下载下来，
2019-09-25 16:15:34
1469
原创 vue实现Loading
新建一个loading文件件，新增loading.vue跟loading.js两个文件loaing.vueloading弹窗组件<template> <div v-if="show" class="loading-content"> <div class="loading-animate"></div> <...
2019-09-25 14:34:01
2159
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人