柳柳Elena-CSDN博客

原创【重点突破】—— Typescript走进类型的世界

一、编程语言的类型动态类型语言静态类型语言二、Typescript究竟是什么Javascript that scales Javascript的超集静态类型风格的类型系统从es6到es10甚至是esnext的语法支持兼容各种浏览器，各种系统，各种服务器，完全开源三、官网typescriptlang.org四、为什么要使用Typescript程序更容易理解问题...

2022-08-15 15:41:00 468

原创【仿美团点餐App】—— 首页（二）

一、实现下拉刷新在page->main->main.vue新增代码如下：<script> import {mapState,mapActions} from "vuex"; export default { //下拉刷新 onPullDownRefresh() { this.getShop({page:1,lng:this.lng,lat:this...

2022-07-30 09:59:00 994

原创【仿美团点餐App】—— 首页（一）

一、首页布局pages.json的代码如下{ "pages": [ { "path": "pages/main/main", "style": { "navigationBarTitleText": "点餐小程序", "navigationStyle": "custom", "enablePu...

2022-07-29 16:55:00 2644 2

原创【黑马商城App】—— 项目开发重点笔记

黑马商城实战项目项目搭建利用HBuilder X创建基本项目结构运行项目整理基本项目结构，并修改窗口外观"globalStyle": { "navigationBarTextStyle": "white", "navigationBarTitleText": "黑马商城", "navigationBarBackgroundColor": "#1989fa", ...

2022-07-17 10:42:00 660 1

原创【黑马商城App】—— uniapp的基本使用

uni-app的基本使用基础部分：环境搭建页面外观配置数据绑定uni-app的生命周期组件的使用uni-app中样式学习在uni-app中使用字体图标和开启scss条件注释跨端兼容uni中的事件导航跳转组件创建和通讯，及组件的生命周期uni-app中使用uni-ui库uni-app介绍官方网页uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开...

2022-07-17 09:59:00 485

原创【跨端应用】—— uniapp黑马商城App学习笔记（二）

一、设置微信小程序调试HBuilderX点击【工具】 --【设置】--【运行配置】，找到【微信web开发者工具】安装所在的文件夹。复制路径，填写到【小程序运行配置】-- 【微信开发者工具路径】先打开微信开发者工具，进入编辑器页面后。点击【设置】 – 【安全】，开启【服务端口】，然后关闭设置窗口，关闭开发者工具。重新点击【运行】 – 【运行到小程序模拟器】-- “微信开发者工具 -...

2022-07-15 20:50:00 785

原创【重点突破】—— pinia中文文档学习之action处理业务逻辑

Actions 相当于组件中的 methods。actions可以是异步的，您可以在其中await任何 API 调用甚至其他操作！

2022-07-12 18:14:00 300

原创【重点突破】—— pinia中文文档学习之访问传参Getter

Getter 完全等同于 Store 状态的计算值。Getters只是幕后的computed属性，因此无法向它们传递任何参数。但是，您可以从getter返回一个函数以接受任何参数。...

2022-07-12 17:52:00 553

原创【重点突破】—— pinia中文文档学习之访问修改监听state

可以通过store实例访问状态来直接读取和写入状态。可以通过调用 store 上的$reset()方法将状态重置到其初始值。可以使用mapWritableState()写入这些状态属性。...

2022-07-12 17:28:00 529

原创【重点突破】—— pinia中文文档学习之定义Store

Store 是使用defineStore()定义的，并且它需要一个唯一名称，作为第一个参数传递。这个name，也称为id，是必要的。

2022-07-12 16:57:00 703

原创【重点突破】—— pinia中文文档学习之与Vuex比较

pinia是Vue3.0中可以替代Vuex的更好的状态管理工具。中文文档地址：https://pinia.web3doc.top/

2022-07-12 16:45:00 219

Quasar (pronounced /ˈkweɪ.zɑɹ/) is an MIT licensed open-source Vue.js based framework, which allows you as a web developer to quickly create responsive++ websites/apps in many flavours:上面一段是官方对于Quasa...

2022-07-01 16:13:00 1247

原创【国外框架】—— quasar app Vuex Store

我们不会详细介绍如何配置或使用 Vuex，因为它有很好的文档。相反，我们只会向您展示在 Quasar 项目中使用文件夹结构时的样子警告：Vue 团队弃用了 Vuex，转而支持Pinia。...

2022-06-29 11:08:00 551

原创【国外框架】—— quasar 应用程序插件

一个应用程序插件是一个简单的JavaScript文件，需要导出一个函数。当启动应用程序时，Quasar将调用导出的函数，并将具有以下属性的一个对象传递给该函数。...

2022-06-28 14:04:00 461

原创【国外框架】—— quasar.conf.js 结构与配置选项

quasar.conf.js会导出一个函数，该函数接受ctx(context)参数并返回一个对象。这使您可以根据此上下文动态更改您的网站/应用配置。quasar指南地址

2022-06-28 08:07:00 252

原创【国外框架】—— quasar cli 启动文件

启动文件实现了一个特殊的目的：它们在应用程序的Vue根组件被实例化之前运行代码，同时允许您访问某些变量，如果需要初始化库、干预Vue路由器、注入Vue原型或注入Vue应用程序的根实例。中文教程地址...

2022-06-27 16:00:00 162

原创【重点突破】—— quasar中文教程学习笔记（一）

本文主要学习《Qursar Cli —— 处理资源》。中文教程地址：http://www.quasarchs.com/quasar-cli/handling-assets#%E5%B8%B8%E8%A7%84%E8%B5%84%E6%BA%90-src-assets一、常规资源 vs 静态资源二、资源处理规则三、Vue仅绑定所需的静态资源请注意，无论什么时候您将“src”绑定到V...

2022-06-27 15:39:00 694

原创【国外框架】—— quasar项目代码结构分析

Quasar指南组件文档地址：http://v0-16.quasarchs.com/guide/app-quasar.conf.js.html#devServer属性执行玩创建项目目录的命令后，我们就会得到一个像下面一样结构的项目，其中的src就是存放我们业务逻辑代码的地方，也是多端复用最为关键的部分。但是这里需要插一句，就是Quasar的src里居然没有实例化vue对象的那个main.j...

2022-06-27 14:06:00 667

原创【重点突破】—— quasar的艰难安装&创建目录

出现的问题Quasar的版本更新过很多版本，对node.js的版本要求是不一样的。每次执行创建目录的命令都让执行替代命令，然后执行过以后，仍然创建不了目录解决方法：1.在中文教程的QuasarV2升级篇中特别说明了对node、npm、yarn的要求2.执行安装命令(确保安装的是最新版本@latest)3.安装：@quasar/app-webpackv3、quasarv2、vue...

2022-06-27 12:32:00 669

原创【重点突破】—— quasar 与 uniapp 选型简单对比

文章来自不饿不饿不饿的掘金博客对于这两个框架我都分别用来写过不大不小的项目, 所以对比还算客观, 因为我是推荐用 quasar 的, 所以我先从一定不会选 quasar 的场景开始不选 quasar 的场景有开发小程序需求对于只想一套代码就能有不错的原生 app, 这里提一句, 对于 app 的生成, quasar 是用 Cordova 做的套壳 app, 本质还是网页, 而 u...

2022-06-27 12:08:00 1657

原创【碎片学习】—— Vue项目重要知识点笔记（一）

前言：本文学习摘要自掘金作者愣锤的博文一、列表进入详情页的传参问题<router-link :to="{path: 'detail', query: {id: 1}}">前往detail页面</router-link>http://localhost:8080/#/detail?id=1，可以看到传了一个参数id=1，并且就算刷新页面id也还会存在。此时在c...

2022-04-26 11:12:00 1213

原创【Vue优化】—— Vue项目上线可以做的一些基本优化

前言：优化方法来自掘金作者wangly19的总结博客开发过程1、优先使用v-ifv-if和v-show理论上都是作用于元素的显示隐藏，只是一个是直接对DOM，一个是通过CSS的display来操作的。在项目中大部分的时候都直接使用v-if直接代替使用v-Show只有当DOM频繁进行显示和隐藏的时候，用v-Show。(这种场景很少见，比如信息同送优先级中使用，项目中一直通过WebS...

2022-04-24 16:46:00 235

原创【专项学习】 —— Webpack5从入门到精通课程学习（七）

这篇主要介绍《webpack详细配置》。(demo代码github地址)知识点包括：webpack详细配置之entrywebpack详细配置之outputwebpack详细配置之modulewebpack详细配置之resolvewebpack详细配置之devserverwebpack详细配置之optimizationwebpack4至webpack5详细变化一、webpa...

2022-03-09 11:30:00 466

原创【专项学习】 —— Webpack5从入门到精通课程学习（六）

这篇主要介绍《webpack优化环境配置(下)》。知识点包括：懒加载和预加载懒加载预加载PWA(离线可访问)多进程打包externalsDLL(动态链接库)一、懒加载和预加载懒加载懒加载就是，在实际项目中，某个.js文件，还没有用到，此时不进行加载，当网页中进行某个功能，有需要时在加载。1、复制代码分割工程文件，修改其中的webpack.config.js，...

2022-03-08 15:09:00 189

原创【专项学习】 —— Webpack5从入门到精通课程学习（五）

这篇主要介绍《webpack优化环境配置(中)》。知识点包括：tree shakingcode split(代码分割)第一种方法第二种方法第三种方法一、tree shaking1、复制上一篇的生产环境缓存工程文件。然后重命名。tree shaking(树摇)：去除无用的代码。2、在src文件夹下新建test.js，测试使用该功能，是否会把没有引用的js代码也打包。t...

2022-03-08 11:21:00 305

原创【专项学习】 —— Webpack5从入门到精通课程学习（四）

这篇主要介绍《webpack优化环境配置》。知识点包括：开发环境性能优化(HMR)source-maponeOf一、开发环境性能优化(HMR)1、将webpack生产环境配置汇总工程完整复制一份，并重命名。在终端输入npx webpack serve启动热更新服务。然后我们简单修改index.less内的样式，会发现只单独更新了样式模块。2、此时在简单修改index...

2022-03-07 15:54:00 263

原创【专项学习】 —— Webpack5基础配置详细教程学习（三）

一、提取css成单独文件1、先用以往的开发模式来打包。创建以下文件夹，build里的内容是打包后生成的。index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl...

2022-03-04 14:51:00 285

原创【专项学习】 —— Webpack5基础配置详细教程学习（二）

一、打包其他资源1、字体图标等属于其他资源，即不需要做优化做压缩的资源。首先去阿里矢量图标库下载一些图标。2、下载后解压，里边有这些东西。demo_index是使用说明3、然后我们将iconfont.css等文件放到工程文件夹下。我们需要对css文件、html文件、js文件、ttf文件进行打包。4、那么在webpack.config.js配置文件中写代码。cons...

2022-03-03 17:23:00 568

原创【专项学习】 —— Webpack5基础配置详细教程学习（一）

一、webpack简介vscode中先下载插件esay-less，自动把写的less样式转换为css样式。1、新建如下文件2、然后在终端打开，输入npm init3、然后输入webpack_test进行打包，会运行产生一些默认值，直接回车就可以。4、然后输入npm i jquery下载相关包。5、下载完成后，整个文件夹内容如下<!DOCTYPE html&g...

2022-03-03 10:44:00 1497

原创【重点突破】—— vue+webpack+axios初始化搭建项目框架（转）

前言：这个教程从零开始一步一步说明搭建一个完整实用vue项目的所有流程，vue-cli + webpack + vue-router + ant-design-vue +axios。在原教程基础上完善了axios封装请求，UI组件库换用ant-design-vue，项目github地址。(教程转载自GQguoqi博客)一、准备工作在用Vue.js构建大型应用的时候推荐使用NPM安装方法，...

2022-02-23 13:23:00 752 1

原创【金融大屏项目】—— Echarts水滴图（echarts-liquidfill）

api文档：https://github.com/ecomfe/echarts-liquidfill#apiLiquidfillChart组件代码：import React, { PureComponent } from 'react';import echarts from 'echarts/lib/echarts';import 'echarts-liquidfill';imp...

2022-02-21 14:20:00 1460

原创【金融大屏项目】—— Echarts 极坐标和柱状图实现圆角环形图（polar）

ProgressCircleChart组件代码：import React, { PureComponent } from 'react';import echarts from 'echarts/lib/echarts';import 'echarts/lib/chart/pie';import 'echarts/lib/chart/bar';import 'echarts/lib...

2022-02-21 14:02:00 953

原创【金融大屏项目】—— Echarts电池效果柱状图（PictorialBar）

barChart组件代码：import React, { PureComponent } from 'react';import echarts from 'echarts/lib/echarts';import 'echarts/lib/chart/bar';import 'echarts/lib/chart/pictorialBar';import styles from '....

2022-02-21 13:48:00 1626

原创【金融大屏项目】—— SVG实现弧形文本

前言：react大屏项目中有如下弧形文字需求，试用网上的arctext.js动画库无法实现环形文字，最终只有通过SVG调试出合适的文本path路径可以解决这一问题。<svg xmlns="http://www.w3.org/2000/svg"> <defs> <path id="myTextPath1" d="M10.399993896...

2022-02-21 11:44:00 457

原创【金融大屏项目】—— umi-request配置通用请求处理

前言：目前没有发现有vue项目中使用umi-request的例子，用这个请求库的多为react项目，umi本身和dva也都是react周边的工具。utils/request.js：配置通用请求中的异常处理和默认参数/** * request 网络请求工具 * 更详细的 api 文档: https://github.com/umijs/umi-request */import ...

2022-02-21 11:00:00 1922

原创【重点突破】—— umi-request 基于fetch的网络请求库（转）

背景在做中台业务应用开发的过程中，我们发现在请求链路上存在以下问题：请求库各式各样，没有统一。每次新起应用都需要重复实现一套请求层逻辑，切换应用时需要重新学习请求库 API。各应用接口设计不一致、混乱。前后端同学每次需重新设计接口格式，前端同学在切换应用时需重新了解接口格式才能做业务开发。接口文档维护各式各样。有的在语雀(云端知识库)上，有的在 RAP (开源接口管理工具)上，有...

2022-02-21 10:36:00 1566

原创【高级课程笔记】—— Echarts高级应用（二）

一、视觉映射注：visualMap 以前叫dataRange，如果你看到了比较老的教程或博客，里面有dataRange，要知道那就是视觉映射 visualMap<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>视觉映射&...

2021-10-20 15:44:00 1537 1

原创【高级课程笔记】—— Echarts高级应用（一）

一、多坐标轴多坐标轴的常见应用就是一个坐标系有两个y 轴多坐标轴的设置方法：在yAxis 中写入两组数据，让两组数据的行数保持一致在series 中设置数据时，使用 yAxisIndex 属性设置系列与哪个y 轴相关联<!DOCTYPE html><html lang="en"><head> <meta charset=...

2021-10-20 11:07:00 885 1

原创【高级课程笔记】—— Echarts常用图表

一、折线图 line折线图主要用来展示数据相随着时间推移的变化。折线图非常适合用于展示一个连续的二维数据，如某网站访问人数或商品销量价格的波动。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>折线</title&...

2021-10-19 17:39:00 1590

原创【高级课程笔记】—— Echarts入门&常用组件

官网一、浏览器画图方式有两种canvas ：点阵图，缩放失真，适合图形数量非常大的图表 svg：矢量图，缩放不失真，适合图形数量较少的图表二、echarts 的绘图步骤建立dom 容器引入 ECharts 实例化echarts 建立图表配置项显示图表<!DOCTYPE html><html lang="en"><head>...

2021-10-19 16:28:00 419

空空如也

空空如也