cloveryuan-CSDN博客

原创 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创建rootReducersimport { combineReducers } from 'redux'import testRe.

2021-06-28 14:41:35 279

原创 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 116

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

我是放在数据获取到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 436

原创经纬度坐标系转换

我用的高德地图，后端需要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 1770

原创 3-5-Vite实现原理

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

2020-10-12 15:02:20 926

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

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

2020-10-12 15:01:55 1303

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

Compositon API一、Composition API使用1. 使用Vue3.0先创建一个空文件夹，然后进入文件夹执行npm init -y，再执行npm install vue@3.0.0-rc.1安装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 182

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

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

2020-10-09 14:55:11 475

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

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

2020-10-09 14:35:08 1019

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

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

2020-09-29 15:14:15 290

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

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

2020-09-27 10:24:14 1400

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

=》测试 -bui9biNuxtJS代码仓库地址：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 1664 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 2125

原创 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 195

原创 yeoman学习

一.安装yarn global add yoyarn global add generator-node二.创建自己的Generator1.mkdir generator-clover-vue2.cd generator-clover-vue3.yarn init / npm init4.yarn add yeoman-generatorgenerator-clover-vue目录下创建generators/app/index.js// 此文件作为 Generator 的核心入口/.

2020-09-21 10:54:58 115

原创自动化构建Gulp

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

2020-09-21 10:53:41 142

原创 3-3-现代化的服务端渲染（同构渲染）

一.传统的服务端渲染（SSR）1.案例npm i express art-templateindex.js//客户端服务文件const express = require('express')const fs = require('fs')const template = require('art-template')//服务端模板引擎const app = express()app.get('/',(req,res)=>{ // 1.获取页面模板 const

2020-09-21 10:51:58 239

原创 3-2-Vue.js 源码剖析-响应式原理、虚拟 DOM、模板编译和组件化

■ 1.请简述 Vue 首次渲染的过程。首先进行Vue的初始化，初始化Vue的实例成员以及静态成员。当初始化结束之后，开始调用构造函数，在构造函数中调用this._init()，这个方法相当于我们整个Vue的入口。在_init()中调用this.$mount()，共有两个this.$mount()。①第一个this.$mount()是entry-runtime-with-compiler.js入口文件，这个$mount()的核心作用是帮我们把模板编译成render函数，但它首先会判断一下

2020-09-21 10:50:52 241

原创 React获取DOM方法2018

以下提供三种方法：1. js 常规dom操作方式，通过id获取dom2.react原生函数findDOMNode获取dom3.通过ref来定位一个组件，切记ref要全局唯一（类似id）import React, { Component } from 'react';import ReactDOM from 'react-dom'; class Index extends Component { ...

2018-07-09 11:16:17 9827

原创 js字符串类型

##* **js字符串类型 ##indexOfLastIndexOftoLowerCasetoUpperCasereplaeslicesplittrimsearch

2017-10-26 13:39:35 216

原创欢迎使用CSDN-markdown编辑器

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2017-10-26 13:16:05 197

cloveryuan的博客