cloveryuan-CSDN博客

原创微信小程序互助

小程序平台给个人开发者带来了福音，它的盈利模式也是非常简单清晰，变现门槛也很低，个人觉得互联网时代，学习或者使用WEB开发的，完全可以尝试一下，如果能够变现，一方面或多或少会有点收入，另外一方面，对自己的开发经验也是一个提升。总所周知，现在微信小程序广告组件最近全面开放，门槛比较低，只需要累计独立访客（UV）不低于500，并且没有严重违规记录。但是，累计500个独立的访客，对某些人，比如我这种不是很善于交际，也不好意思请朋友发朋友圈推广的个人来说，是很有难度的。微信小程序互助（流量主之前）

2024-08-06 17:12:40 190

原创 1-1使用store

- 建立store文件夹，写入index.ts - -建立reducers，写入index.ts - reducers里面创建test.reducers.ts(名字自己起) export default function testReducers (state:number=0){ return state } - reducers里面的index.ts创建rootReducers import { combineReducers } from 'redux' import testRe.

2021-06-28 14:41:35 343

原创 rem.js

//rem.js (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!client

2021-06-03 15:46:04 175

原创锚点定位跳转，滑动自动样式改变

我是放在数据获取到v-if里面，所以下面的scroll监听是在获取数据后，就要放到$nextThick里面 data(){ scrollBox: null, activeMenu: 0, topArr: [], } //跳转 jumpTo(procmain,i) { if (!procmain.uuid || !document.getElementById(procmain.uuid)) return; this.activeMenu =..

2021-03-17 10:51:56 507

原创经纬度坐标系转换

我用的高德地图，后端需要84坐标系，安装不上gcoor，所以本地下载引入使用的需要用到的组件里面 import gcoord from ‘@/utils/gcoord.js’ 使用 eg:把102高德地图坐标系转为84坐标系 const result = gcoord.transform( this.currentLocation, // 经纬度坐标 gcoord.GCJ02, // 当前坐标系 gcoord.WGS84 // 目标坐标系

2020-11-11 13:37:47 2041

原创 3-5-Vite实现原理

一、Vite介绍 1. Vite概念： Vite是一个面向现代浏览器的一个更轻更快的web应用开发工具它基于ECMAScript标准原生模块系统（ES Modules）实现 2. Vite项目依赖： Vite @vue/compiler-sfc 3. 基础使用： vite serve / vite build 在运行vite serve的时候不需要打包，直接开启一个web服务器，当浏览器请求服务器，比如请求一个单文件组件，这个时候在服务器端编译单文件组件，然后把编译的结果返回给浏览器，注意这里.

2020-10-12 15:02:20 1112

原创 3-5-Vue.js 3.0响应式系统原理

一、介绍 1. Vue.js响应式回顾 Proxy对象实现属性监听多层属性嵌套，在访问属性过程中处理下一级属性默认监听动态添加的属性默认监听属性的删除操作默认监听数组索引和length属性可以作为单独的模块使用 2. 核心函数 eactive/ref/toRefs/computed effect track trigger 二、Proxy对象回顾 1. 在严格模式下，Proxy的函数得返回布尔类型的值，否则会报TypeError Uncaught TypeError: ‘set’ on.

2020-10-12 15:01:55 1636

原创 3-5-Vue3.0 Compositon API +todo demo

Compositon API 一、Composition API使用 1. 使用Vue3.0 先创建一个空文件夹，然后进入文件夹执行npm init -y，再执行npm install [email protected]安装vue3.0 创建index.html，vue3.0的使用 <body> <div id="app"> x: {{ position.x }} <br> y: {{ position.y }} <br> </div.

2020-10-12 15:00:54 252

原创 3-4-搭建自己的vue-ssr

搭建自己的SSR、静态站点生成（SSG）及封装 Vue.js 组件库搭建自己的SSR 一、渲染一个Vue实例 mkdir vue-ssr cd vue-ssr npm init -y npm i vue vue-server-renderder server.js const Vue = require('vue') const renderer = require('vue-server-renderer').createRenderer() const app = new Vue(

2020-10-09 14:55:11 544

原创 3-5-Vue.js 3.0 介绍

一、Vue.js 源码组织方式 1. 源码采用TypeScript重写提高了代码的可维护性。大型项目的开发都推荐使用类型化的语言，在编码的过程中检查类型的问题。 2. 使用Monorepo管理项目结构使用一个项目管理多个包，把不同功能的代码放到不同的package中管理，每个功能模块都可以单独发布，单独测试，单独使用。 packages 目录结构 pageages 目录下都是独立发行的包，可以独立使用，以compiler 开头的包，它们都是和编译相关的代码 compiler-core和平台无关的

2020-10-09 14:35:08 1088

原创 3-4-封装Vue.js组件库

封装Vue.js组件库一、组件库介绍 1. 开源组件库 Element-UI IView 2. 组件开发方式CDD 自下而上从组件级别开始，到页面级别结束 3. CDD的好处组件在最大程度上被重用并行开发可视化测试二、处理组件边界情况 vue中处理组件边界情况的API 1. $root 01-root.vue <template> <div> <!-- 小型应用中可以在 vue 根实例里存储共享数据组件中可以通过 $

2020-09-29 15:14:15 361

原创 3-4-Gridsome 生成静态站点的基础

1. Gridsome是什么一个免费、开源、基于VUE.js技术栈的静态网站生成器官方网址：https://gridsome.org GitHub: https://github.com/gridsome/gridsome 2. 什么是静态网站生成器静态网站生成器是使用一系列配置、模板以及数据，生成静态HTML文件及相关资源的工具这个功能也叫做预渲染生成的网站不需要类似PHP这样的服务器只需要放到支持静态资源的WebServer或者CDN上即可运行 3. 静态网站的好处省钱：不需要

2020-09-27 10:24:14 1713

原创 3-3-nuxt.js实现 realworld-nuxtjs项目，同时学习部署在自己服务器上

=》测试 -bui9bi NuxtJS 代码仓库地址：https://gitee.com/cloveryuan/realworld-nuxtjs 一、Nuxt.js是什么一个基于Vue.js生态的第三方开源服务端渲染应用框架它可以帮我们轻松的使用Vue.js技术栈构建同构应用官网：https://zh.nuxtjs.org/ Github仓库：https://github.com/nuxt/nuxt.js 二、Nuxt.js的使用方式初始化项目已有的Node.js服务端项目直接把N

2020-09-21 11:11:18 1852 1

原创使用webpack打包后的项目如何运行（express）

https://github.com/cloveryuan/expressDemo 我们知道使用webpack打包项目后会生成一个dist文件夹，dist文件夹下有html文件和其他css、js以及图片等，那么打包后的文件该如何正确运行呢？其实可以将生成的dist文件部署到 express 服务器上运行 1）、安装express-generator生成器。 npm install express-generator -g // 也可使用cnpm比较快 2）、创建一个express项目。 exp

2020-09-21 10:56:53 2275

原创 plop学习

一.项目根目录下 yarn add plop --dev 二.要在根目录新建plopfile.js（plop入口文件需要导出一个函数，此函数接受一个plop对象，用于创建生成器任务） module.exports = plop => { plop.setGenerator('component', {//这里定义生成器的名字component description: 'application component', prompts: [ { type.

2020-09-21 10:55:49 246

原创 yeoman学习

一.安装 yarn global add yo yarn global add generator-node 二.创建自己的Generator 1.mkdir generator-clover-vue 2.cd generator-clover-vue 3.yarn init / npm init 4.yarn add yeoman-generator generator-clover-vue目录下创建generators/app/index.js // 此文件作为 Generator 的核心入口 /.

2020-09-21 10:54:58 160

原创自动化构建Gulp

ctrl+e ctrl+1 browser-sync . --file **/*.js https://unpkg.com/ https://www.cnblogs.com/xqbiii/p/8406978.html yarn init --yes yarn add gulp --dev 一.基本使用 exports.foo = (done) => { console.log('任务foo') done() // 标识任务执行完成 }//yarn gulp foo // defau

2020-09-21 10:53:41 184

cloveryuan的博客