- 博客(45)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 Vue 的响应式原理
数据发生改变，界面跟着更新，如图所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2022-05-18 16:42:46
908
原创 NGINX 部署 Vue 项目
1. windows 下载 nginx: 官网链接https://nginx.org/点击下载稳定版本 stable version双击运行即可，在浏览器输入 localhost 回车来到以下界面：说明服务器启动成功。将打包的 dist 文件夹中的文件放到 html 文件夹内。刷新浏览器 localhost 如下：能够正常访问！...
2022-05-17 16:48:12
675
原创 Vue 组件的高级封装模式
一、传统模式我们在使用 vue 进行项目开发过程中，对组件的封装是不可避免的，组件式开发在很大程度上提高了代码的复用性，能够提高开发效率。一般情况下，我们使用最基础的封装模式，基本流程如下：创建 Xxx.vue 文件，对组件进行封装 通过 import 的方式将组件导入 import Xxx from '...' 对组件进行注册 componments:{ Xxx } 使用组件：<xxx/>示例：封装一个 Toast 弹窗组件1.创建 Toast.vue 文件&l...
2022-05-17 12:22:40
1752
原创 项目开发的一些初始化工作
一、目录划分二、CSS 初始化新建 css 文件 normalize.css，GitHub 上搜索并下载下来：在 base.css 文件中引入 normalize.css 文件并配置一些基本样式，然后在 App.vue 文件中引入：@import "./assets/css/base.css";三、 配置文件夹别名在 vue.config.js 文件中添加以下代码：module.exports = { configureWebpack:{ resol.
2022-05-09 21:28:42
398
原创 Vue + Openlayers 使用 Overlay 添加 Popup 弹窗
最近使用 Vue 和 Openlayers 写了一个简单的小 dom ，用到了 Overlay 的弹窗功能，记录一下！创建元素： <div ref="popCon" id="popup" v-show="isShow"><!-- 弹出信息框 --> <span class="iconfont icon-guanbi" @click="closePop"></span> <ul id="info"> <h
2022-05-08 22:26:38
1265
原创 Openlayers 坐标系全面解析
目录EPSG:4326 & EPSG:3857EPSG:4326 与 EPSG:3857 的坐标转换EPSG: 4490Openlayers 自定义坐标系（EPSG:4490 和 EPSG:4525)EPSG:4326 & EPSG:3857Openlayers 中常用的坐标系为 EPSG:4326 和 EPSG:3857，分别对应 WGS84 坐标系统中的地理坐标（经纬度）和投影坐标（X，Y）。EPSG:4326 通过经纬度记录坐标，方便存储，可读性高。Openl.
2022-05-07 12:17:06
9122
原创 Vue 安装 Element Plus
Vue CLI 3 下使用 Element Plus ，解决 icon 图标不显示的问题，亲测有效！！！
2022-05-05 12:58:49
14358
1
原创 Vue + Openlayers 基本使用----加载天地图影像
前面学习了一些 Vue 的基本使用，接下来结合 Openlayers 进行 WebGIS 开发的相关内容学习！使用 Vue CLI 3 创建项目：vue create vue-openlayers安装 Openlayers 框架npm i -S ol创建组件：Map.vue<template> <div id="map"> </div></template><script>//导入相关配置信息impo
2022-05-04 22:06:09
2081
1
原创 Axios —— 网络请求
安装框架：npm install axios --save基本使用：import Vue from 'vue'import App from './App'import router from './router'import axios from 'axios'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, render: h =&g
2022-05-03 17:41:48
829
原创 Vuex ——详细介绍
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。可以理解为：将多个组件共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的 Vue 实例中，让其他组件可以使用，它最大的特点是响应式。一般情况下，我们会在 Vuex 中存放一些需要在多个界面中进行共享的信息。比如用户的登录状态、用户名称、头像、地理位置信息、商品的收藏、购物车中的物品等，这些状态信息，我们可以放在统一的地方，对它进行保存和管理。
2022-05-02 23:10:20
42767
12
原创 Promise
Promise 是 ES6 中的一个特性，是异步编程的一种解决方案。基本语法处理方式一：new Promise((resolve,reject) => { //异步请求操作 setTimeout(() => { //成功时调用 resolve() resolve('Hello World')//执行 resolve() 函数后，会调用 Then() 函数 //失败时调用 reject()，一旦调用 reject()，就不会执行 resolve()
2022-05-01 21:14:38
225
原创 Webpack的使用
1、webpack起步新建文件夹目录：src文件夹：存放开发内容/源代码。dist文件夹（distribution:发布）：存放打包后的代码文件，最后将该文件交由服务器发布即可。src目录下新建main.js和mathUtils.js文件：mathUtils.jsfunction add(num1,num2){ return num1 + num2}function mul(num1,num2){ return num1 * num2}//模块化开发方式:c
2022-04-24 12:41:05
376
原创 Webpack的介绍与安装
Webpack介绍： Webpackhttps://www.webpackjs.com/简单来说，Webpack是一个前端模块化打包工具。Webpack支持前端模块化方案：AMD、CMD、CommonJS、ES6等。能够将模块化打包成浏览器可以识别的JS代码，帮助我们处理模块间的依赖关系。在Webpack中，不仅仅是JavaScript文件，我们的CSS文件、图片、json文件等都被当做模块来管理使用。 Webpack安装： webpack的运行必须依赖node环境，n..
2022-04-24 11:33:18
315
原创 前端模块化
常见的模块化规范：CommonJS、AMD、CMD、ES6的Modules模块化的两个核心：导出和导入CommonJS的模块化：（需要底层进行解析:node.js）CommonJS的导出：module.exports = { } CommonJS的导入：let { test，flag，sum} = require('moduleA')ES6中的模块化：导出：export 导入：import解决办法：VSCode中下载Live Server插件安装。...
2022-04-23 19:40:18
271
原创 Vue中父子组件的访问方式
父访问子：this.$children或this.$refs.ref 子访问父：this.$parent和this.$root示例一：<!-- 父组件 --><div id="app"> <h2>父组件</h2> <h2>{{message}}</h2> <button @click="btnClick">父组件按钮</button> <!-- <cpn :cmessage
2022-04-22 09:58:51
435
vue + openlayers dom
2022-05-08
vue 中关于 axios 网络请求的封装：包括请求拦截等内容，附有详细的代码说明！！！
2022-05-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人