- 博客(38)
- 收藏
- 关注
RSS订阅
原创 vue3+taro+Nutui 开发小程序（二）
然后打开终端输入 npm i 如果报错有可能是你的node版本过高，可以输入 npm i --legacy-peer-deps。这就是基本的框架结构，我们一步一步来完善，首先我们找打page.json。interface：这里放置了Ts的一些基本泛型，不用Ts的可以忽略。app.config.Ts 这里是小程序基本根目录下的一些配置。service：这里二次封装了小程序的http请求。pages：这里放置了小程序的所有页面。app.Ts 这里是小程序的入口文件。api：这里存放用到的接口。
2023-07-21 10:46:04
1813
原创 vue3+taro+Nutui 开发小程序（一）
最近在调研开发小程序，发现现在taro框架逐渐成熟，能完美地使用vue3来进行开发，调研中发现京东的Nutui也不错所以准备写一个由0到1的vue3+taro+Nutui的小程序。这篇我们首先搭建一个框架：vscode插件准备环节：
2023-07-21 10:15:24
1589
原创 vue如何实现web端与h5端整合在一起
如果报错-----无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1，因为在此系统中禁止执行脚本。第四步：在router文件夹里设置h5端的路由和web端的路由，切记在h5main.js和main.js引入对应的路由，我这里h5main.js引入的是h5端的路由。前言：由于已经提前写好web端的系统，h5端与web端展示的内容不一样，所以需要在一套系统里写两版代码，这就需要我们使用webpack打包工具来实现。
2023-06-19 16:36:47
2219
原创 vue关于动态绑定class的那些事
今天在写vue弹窗组件时，需要弹窗出来时不能点击除了弹窗之外的组件，需要用到css属性 pointer-events:none;这就需要我们动态的添加class，vue中尽量不要用js来添加class属性，会导致有时候页面刷新不出来，所以就在这整理了vue常见的几种动态的添加class的方法vue动态绑定class的方式一、绑定单个classhtml部分：<div :class="{'active':isActive}"></div>js部分：通过isAct..
2022-02-15 10:41:55
894
原创 微信小程序——云函数操作数据库实现登录
在开发微信小程序时，使用传统的操作云数据库的方法有很多缺点，比如代码冗余不好维护修改，所以现在都是基于云函数来操作数据库或者其他逻辑。正好我在做一个集合商城、垃圾分类、后台系统的微信小程序模板，通过这个案列我们来学习一下云函数。也方便我以后直接copy。需要的工具：1、node.js2、tcb-router这里默认大家会node.js基本知识不再多说打开微信小程序点云开发生成的模板，右击cloudfunctions新建node.js云函数函数名为db(意思为操作数据库的函数都在这)，新建
2022-01-29 09:31:50
5825
原创 微信小程序——云开发的安全规则
安全规则是一个可以灵活地自定义数据库和云存储读写权限的权限控制方式，通过配置安全规则，开发者可以在小程序端、网页端精细化的控制云存储和集合中所有记录的增、删、改、查权限，自动拒绝不符合安全规则的前端数据库与云存储请求，保障数据和文件安全。正常的云数据库只有这四种权限：但是实际应用我们肯定还需要更多对应的权限，比如只能增加不能删除但能修改，只能查看不能修改但能删除等等。这就需要我们自定义安全规则：我们先来看简易权限配置所有用户可读，仅创建者可写、仅创建者可读写、所有用户可读、所有用户不可读写所
2022-01-19 10:51:06
4014
原创 vue正确的使用vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。现在大型项目基本上都需要使用vuex，所以专门写一遍如何配置与使用vuex供人探讨。一、安装vuex1、终端安装 npm install vuex --save2、创建store文件夹，文件夹里新建index.js与modules文件夹（vuex模块化）index.js代码如下：import Vue from 'vue'import Vuex from 'vuex'//引入模块import a from './mod
2022-01-04 16:18:12
706
原创 Vue项目配置路由以及设置路由守卫的正确方式（无坑可食用）
一、首先安装路由插件cnpm install vue-router --save-dev二、新建一个router文件夹，文件下新建一个index.js文件三、index.js中引入router，代码如下import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export const constantRoutes = [ { path: '/PixiDemo', componen..
2021-12-23 16:10:31
2795
1
原创 WebGis——Pixi开发vue项目之使用遮罩实现图形缓慢填充颜色（三）
本代码为小白本人原创，转载请标明出处效果图：因为制作gif图就用了五张，实际效果肯定是连贯自然的写的不好各位大神可以提点宝贵意见，本着无坑快速易懂的原则，代码我都一一注释，放心使用----------------------------------------------------✂-------正文分割线----------------------------------------------------需求：因为做的是天气系统，需要实现在地图对应的点添加雷暴、降水图形实现如上效果，百
2021-12-20 16:25:39
2564
原创 分享一个自己的vscode中vue自定义模板
因为在公司都是用scss 规范化的代码，这里写一个自己的vue模板方便以后自己或者他人使用一、ctrl + shift + p 在vscode打开弹窗输入snippets然后点击再输入vue点击会进入vue.json文件二、编辑如下代码"Print to console": { "prefix": "vue", "body": [ "<template>", " <div class=\"\">$0</div>", "</t
2021-12-20 10:20:29
172
原创 WebGis——Pixi开发vue项目之实现闪烁点功能（二）
接着上一章写目的是让我们这张笑脸不断地放大缩小来实现闪烁的功能如果我们以js的思想来做肯定是要做一个定时器，这里pixi给我们提供了一个类似于计时器的东西ticker，除了用Pixi的ticker去创造一个游戏循环，你还可以使用requestAnimationFrame（个人喜欢ticker，按照个人习惯）在ticker里有一个delta，delta = (当前帧的时间 - 上一帧的时间) / (1000 / 60); 其中1000是指1000ms，即1秒， 60是1秒种执行60次。 (1000 /
2021-11-25 15:54:39
1538
3
原创 WebGis——Pixi开发vue项目之创建pixi应用并显示一个精灵（一）
Pixi中文网：Pixi.js中文网使用vue-cli初始化一个vue项目我就不多说了，在我的这边文章里已经写过：从零开始vue项目使用cesium开发三维地图（一）_yinzisang的博客-CSDN博客创建完成后我们安装pixi插件：npm install --save vue-pixi@5.1.2安装成功后page.json里面查看：新建一个PixiDemo.vue文件，后续我们都是通过这个Demo来操作pixiPixiDemo初始化：<temp..
2021-11-24 09:51:04
2136
原创 WebGis——从零开始vue使用cesium通过nginx发布3d地形数据并展示（续二）
需要的工具：cesiumlab ：http://www.cesiumlab.com/nginx：nginx: downloadcesiumlab上一章已经讲了如何使用简单说一下nginx打开nginx所在的文件夹cmd进入该文件夹输入nginx -v查看版本号nginx常用命令：启动Nginx：start nginx 或者 nginx快速停止或关闭Nginx：nginx -s stop正常停止或关闭Nginx：nginx -s quit配置文件修改重...
2021-11-18 11:29:05
6496
9
原创 WebGis——从零开始vue使用cesium添加多个图层以及坐标转化（三）
参考资料cesium中文文档：Cesium中文api文档 | Index - Cesium Documentation一、添加多个图层一个地图场景中只能加载一个图层显然不满足大多数应用需求，cesium在viever对象中提供了imageryLayers属性，可以操作场景图层。例如同时叠加影像ImagerLayerProvider和注记NoteLayerProvider两个图层，并设置注记图层在上面。使用的api：addImageryProvider具体示例：var viewer.
2021-11-18 10:04:13
4846
原创 从零开始vue使用cesium开发3d地形terrainProvider（二）
先上图：第一步：使用cesiumlab制作地图切片cesiumlab官网：Cesium实验室官网我这里下载的是2.5版本的，3版本有bug不能注册账号因为是后端提供给我的切片数据，所以我不需要下载直接将数据放进打开cesiumlab 选择地形切片，点击添加，储存类型选择散列文件其余随意添加完成后出现这一堆文件将该文件放在项目中的public里，这只是测试所以我放在了public里，正常需要通过tomcat（推荐nginx发布）来发布引用在viewer里写如下代..
2021-11-15 18:06:43
4398
原创 从零开始vue项目使用cesium开发三维地图（一）
上图：参考网上很多文档，都是webpack打包之类的，复杂且容易出错，通过vue-cli-plugin-cesium这个插件可以快速帮你创建一个demo示例，然后根据自己的需要创建三维地图一、vue-cli快速创建一个vue项目框架（必须使用vue-cli3以上版本，要不然不能使用vue-cli-plugin-cesium插件）1、vue --version 查看版本（我这里是最新版4.5）2、 若不是vue-cli3版本以上需要安装最新版本 npm install -.....
2021-11-12 15:55:26
8526
6
原创 leaflet使用domtoimage插件与h5 canvas实现截图功能并下载
canvas参考：https://blog.csdn.net/u012468376/article/details/73350998?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163642386816780261954825%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163642386816780261954825&.
2021-11-09 14:41:42
1780
原创 vue项目引入路径前面的@符号是什么？（简化路径）
webpack 配置在 js 中 import 相对路径代码的时候经常出现路径层级较深的情况，引入起来比较麻烦（虽然 webstorm 支持提示简化了不少），所以在 webpack 中可以做如下配置：configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title
2021-11-08 10:25:38
1226
2
原创 element checkbox复选框实现全选功能
应一个小姐姐的要求写一下实现复选框全选功能，这里推荐先看下elementui文档，里面属性写的明明白白。首先上代码：html： <div class="singleSearch"><span class="searchSpan">模型类型：</span> <el-checkbox v-model="checkAll" label="全部" :indeterminate="isIndeterminateModel" @change
2021-11-05 16:27:50
7743
6
原创 隐藏el-table-column过多的内容并进行浮窗展示
element官方文档给我们提供了一个column属性:show-overflow-tooltip="true"，意思是超出宽度内容会隐藏鼠标移动上去浮窗显示案例展示：不隐藏的话显得很臃肿，而且column会随内容变化高度很不美观我们加入样式看看：效果图：这样就能把多余内容隐藏起来了。...
2021-11-03 10:55:06
1877
原创 vue项目实战之点击小眼睛实现input密码框内容显示与隐藏
实现思路：我用的是element ui，实现方法和html一样。1、给右侧小眼睛设置一个点击事件，通过点击事件修改密码输入框<el-input>的：type属性，：type的值在data里设置一个passworedtype属性，进行双向绑定，值为password时密码是密文形式，值为空显示。2当data中passwordtype值变化时，眼睛小图标根据值变换样式，根据三目运算符。3在点击事件方法使用this.$nextTick重新渲染dom元素具体代码: <e
2021-11-02 10:24:03
8095
原创 element踩坑记录之 element table 获取所点击行数据
在做项目时自定义一个element table，想要获取点击行的数据传给别的页面，一开始百度到一个笨方法，在<el-table>标签上添加一个@row-click方法来获取点击行数据，但是会覆盖你这一行别的按钮事件，查看文档发现更简单的方法。实现方法为：通过Scoped slot可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据例子：<template> <el-table :data="tabl..
2021-11-02 09:47:23
4184
2
原创 Vscode如何配置自己的eslint实现自动格式化代码
一、打开vscode ，点击左下角图标点击设置，在搜索框中输入setting json，点击在setting json中编辑。二、设置setting json文件{ // "editor.fontFamily": "'monaco','Roboto Mono'", // "terminal.integrated.fontFamily": "monaco", "editor.fontSize": 16, "editor.fontWeight": "400", .
2021-11-02 09:30:19
1375
原创 Vue项目二次封装request并且使用拦截器增加请求头token
第一步、创建request.js文件项目的框架整体如图在该文件里具体代码如下：import axios from 'axios'import { MessageBox, Message } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'// create an axios instanceconst service = axios.create({ ba.
2021-11-01 14:12:28
3526
原创 v-if 和 v-show在切换时vue生命周期钩子的执行
v-if初始渲染初始值为false组件不会渲染，生命周期钩子不会执行，v-if的渲染是惰性的。初始值为true时，组件会进行渲染，并依次执行 beforeCreate,created,beforeMount,mounted 钩子。切换false => true依次执行 beforeCreate,created,beforeMount,mounted 钩子。true => false依次执行 beforeDestroy,destroyed 钩子。v-show...
2021-11-01 13:37:24
1477
原创 如何使用sourcetree+gitlab拉取项目代码
今天入职公司要求使用sourcetree+gitlab拉取项目代码，中途出现了很多问题，记下来与大家分享，（纯小白勿喷）1下载相关文件首先下载sourcetree，官网下载地址：Sourcetree | Free Git GUI for Mac and Windows下载git，官网下载地址：链接链接:Git - Downloads.下载完git后新建文件夹右击出现git bush here时下载成功下载完毕后会出现打不开sourcetree的问题解决办法：在目录C:\Users..
2021-10-27 17:50:04
2799
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人