NotionNext BLOG

CSS容器查询

Thu, 22 Sep 2022 00:00:00 GMT

容器查询@container类似于媒体查询@media，区别在于查询所依据的对象不同。媒体查询依据的是浏览器的视窗大小，容器查询依据的是元素的父元素或者祖先元素的大小。

有关容器查询的属性一共有三个，分别是container-type、container-name、container。

container-type：标识一个作为被查询的容器，取值范围为size、inline-size、block-size、style、state

container-name：被查询的容器的名字

container：container-type和container-name的简写

h5介绍及标签

Fri, 05 Nov 2021 00:00:00 GMT

h5介绍及标签

HTML5是什么？

网站建设步骤

买域名

租空间

网站设计，

特定工具将网站上传到空间中

推广

维护

标签的属性

span标签

span 标签用来定义文本内容，可以是单独的一句话，一些内容，也可以是段落里面的内容。如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。span 标签是不带任何默认样式的，所以它极大的提高了我们可以对文本内容自定义样式的需求。

span标签的特点：

不独占一行，可以和其他元素排列在一起

span标签不支持align属性

span不能设置宽度和高度

span标签设置背景时，字的宽度就是span的宽度

span标签可以嵌套在div或者p等标签内

div标签

div 标签，称为盒子。作用是设定内容的摆放位置。div 标签可以把文档分割为独立的、不同的部分。div 就相当于一个区域，我们把我们网页内容的都放在这个区域里面。

div的特点：

独占一行

支持align属性

可以设置宽度和高度

div 没有任何的默认样式，所以它不会像 P 标签和 H 标签一样，有上下间距

div 标签里面可以嵌套其他任意标签。

我们可以给某些单独的标签外层包裹一个 div，比如 img 标签，a 标签，这样方便我们后续为其设置样式。

单词总结：

webpack

Fri, 09 Sep 2022 00:00:00 GMT

基本概念

webpack模块（用来可以复用js代码块）打包（合并压缩翻译代码整合解析）工具

webpack可以根据我们配置的入口进行一步步的分析所有的代码模块，根据我们的配置进行自动化的打包并且根据输出位置进行打包之后的文件输出

gulp/grunt 在一个配置文件中，开发者指明需要让他们干什么（一步一步的指定）这个工具就会帮助我们按照我们的指定来完成功能

webpack plus版本的gulp它在gulp的基础之上包含了他所有的基本功能在此基础之上添加了一个特殊的功能就是可以对模块化代码进行自动化打包

4大配置

入口出口加载器插件

使用

webpack 核心包

webpack-cli webpack的命令行

1.下载 cnpm install -g webpack@4.39.3 webpacl-cli@3

2.创建配置文件 webpack.config.js

入口/出口

entry 入口

output 出口

配置好文件之后，在当前路径下输入webpack即可编译，但是会出现如下警告

production 生产模式压缩

development 开发模式不压缩

mode 打包模式

在入口出口的同级设置打包模式

mode："production/development"

打包多个文件怎么办？

1.entry配置一个对象用来设置多个入口文件

2.在出口的filename中使用[name]来进行多文件名的展示

plugin 插件

plugin主要就是用来扩展webpack的功能，让webpack有更多与构建项目无关的一些事情

clean-webpack-plugin 打包之后，清空原有的内容

https://www.npmjs.com/package/clean-webpack-plugin

html-webpack-plugin

就是把打包之后的内容动态插入到一个html页面中不需要我们手动进行引用

https://webpack.docschina.org/plugins/html-webpack-plugin/

但是注意 html-webpack-plugin的版本或者是是否缺失webpack包你要单独下次下载

devserver

npm install -g webpack-dev-server@3.4.0

启动webpack-dev-server

也可以在package.ison文件中进行配置

loader加载器

就是把浏览器不能识别的东西翻译成浏览器可以识别的东西

style-loader和css-loader

https://webpack.docschina.org/loaders/style-loader/

less-loader sass-loader

vue-loader

webpack有什么特点

1.依赖管理方便引用第三方模块让模块可以容易的复用

2.代码合并

3..各种插件

webpack打包的流程原理

webpack会把一个项目当成一个整体，通过给定的主文件，webpack会根据这个主文件然后依次分析他相关的依赖文件，并且使用loader来处理他们就进行编译最终打包成一个或多个浏览器可以识别的js文件

1.解析配置参数

2..注册配置中的plugin与loader

3.根据entry节点分析出这个项目中的模块关联关系。

4.根据loader的匹配条件进行逐一的文件转换

5.根据output把文件进行导出

Echarts

Fri, 09 Sep 2022 00:00:00 GMT

数据可视化–项目开发流程

vue3.0项目创建

1.电脑上安装node.js

网址：https://nodejs.org/zh-cn/

下载自己对应操作系统版本安装即可

2.全局下载项目脚手架

打开cmd 输入 npm install -g @vue/cli

3.创建项目

把cmd的路径切换到指定路径下 vue create 项目名

(3-1)选择项目配置模板 选择第三项自主选择你项目所需的配置

(3-2)选择项目配置选项勾选所需要的模块

(3-3)选择想要开始项目的Vue.js版本选择 3.x

(3-4)是否用history模式来创建路由直接回车默认项目

(3-5)选择CSS 预处理类型选择LESS

(3-6) 选择代码校验会犯选择第一项只进行报错提醒

(3-7)询问项目的什么时候校验格式(第一个是保存时，第二个是提交时)

(3-8)询问项目的配置文件放在那里 (1.独立文件 2.package.json中)

(3-9)是否保存配置当做后续项目的可选配置我们选择不保存

4运行项目

把cmd的路径切换到你项目名下

npm run serve 启动项目

拿到空项目怎么办？

1.删除src文件夹下的cpmponents文件夹下的Helloword.vue文件

2.删除views下的两个.vue文件

3.在views中新建我们的页面文件 homePage.vue文件

4.修改router下的index.js配置路由文件

5修改根组件默认显示内容与初始化项目样式

到此为止项目已经初始化完毕

项目分辨率响应式分析与实施

项目基本结构

整体轮廓分为上下结构

在下半部分区域分为左中右结构

技术栈

vue3.0+vue-router4.0+axios

flex布局

LESS

rem屏幕适配

echarts5.0

项目分辨率响应式创建

我们的项目是需要根据页面的大小改变做出响应式改变的所以我们可以使用

我们可以使用第三方插件flexible.js帮助我们修改html根节点的font-size大小从而控制当前页面的rem(会根据页面的html根节点font-size大小改变而改变)样式改变

flexible.js

flexible.js web自适应方案阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题。

1.下载 npm i -S lib-flexible

2.在main.js中进行配置

3.修改flexible配置

因为默认情况下只会在540px分辨率一下生效所以我们需要根据我们的项目分辨率进行调整

在node_module/lib-flexible/flexible.js中修改代码如下

这个时候重启项目大家打开浏览器调试器即可发现在浏览器大小改变的时候在html根节点上会自动设置一个font-size

cssrem插件

我们在写代码的时候发现如果我们都根据80px为1rem在编写代码的时候转换非常的麻烦所以我们可以在vscode中安装一个cssrem的插件帮助我们进行转换这样一来开发过程中会更加的方便

配置方式

在vscode扩展中找到 cssrem插件最新名字叫px to rem & rpx 安装到vscode中点击右下角设置

修改Root Font Size（基准font-size）配置项为80即可

测试与使用

在写css的时候就会出现相应的rem转换结果

项目顶部信息条创建

1.设置背景图

把图片方法assets文件夹中在app.vue中设置背景图

2.设置标题文字

页面主体创建

主体部分是下面的左中右

大容器

1.创建一个大容器来容纳绿色红色黄色三个区域

在homepage.vue页面中创建一个大容器

创建容器样式

左中右

接下来我们可以创建左中右这三个部分。那么他们的占比分别是3 5 3 这个时候我们可以使用flex布局来分割他们所占的区块大小

1.创建左中右三个页面容器

2.设置样式

运行之后会发现页面的左和右占比是页面各的3份。而中间是占比5份

左右图表展示区块容器样式

大家会发现我们要展示的4个区域的容器效果是一样的。所以我们可以剥离成一个组件然后重复调用即可。并且在其中放置slot槽口后期方便向容器内插入图表

创建容器组件

在components文件夹下创建 itemPage.vue

编写样式与插槽

在views下的homePage中引用调用使用

运行之后大家会发现左右区块就展现出4个容器

左右每个区块内容插入容器槽口

我们一共4个图标使用一个公共的组件容器所以我们编写这4个不同图表的组件并且分别显示

1.创建4个组件在components下 itemOne.vue等等一共4个

然后在4个文件中分别设置相关内容与样式（每个图表的标题不一样要修改）

在homePage.vue中引用调用使用这4个组件

中间地图区域容器样式

在views文件夹下的 homePage。vue 中设置中间区域容器样式

图表前期准备

全局设置Echarts与axios

Charts 全局引用

1.下载 npm install –save echarts

2.0的写法

在vue2.0中使用如下写法吧echarts挂载在vue实例上但是这招在3.0行不通了

在main.js中进行引用和调用

vue3中使用Provide/Inject依赖注入，将替代vue2中在原型链上挂载一些属性

在app.vue中使用provider来给后代们提供数据

在想使用的组件中使用inject来接受

在views下的homePage.vue测试

大家在console中可以看到可以正常使用了

axios全局引用

axios使用于上面相同方式

1.下载 npm install –save axios

2.在app.vue中使用provider来给后代们提供数据

在想使用的组件中使用inject来接受

在views下的homePage.vue测试

图表1基本设置

1.在components文件夹下的 itemOne.vue中设置图表1

2.我们要完成的横向柱状图

所以在设置echarts配置的时候。给xAxis 的type设置value数值轴。给yAxis设置 catehory类目轴

3 接下来我们需要图表展示的数据（数据使用json-server提供）

json-server提供数据

本地的mock-server来完全模拟请求以及请求回来的过程。json-server是一个很好的可以替我们完成这一工作的工具。我们只需要提供一个json文件，或者写几行简单的js脚本就可以模拟出RESTful API的接口。

1.安装

npm install -g json-server

2.在src下创建一个mock文件夹在其中创建一个json文件如下

3.启动服务

把终端的命令切换到你mock文件夹下输入json-server空格json文件名即可启动

设置axios请求

在组件内容请求json-server数据

设置请求基准路径

后续我们右很多的请求或者后期请求地址改变的时候我们在一个个组件的修改非常的麻烦所以我们可以设置请求基准路径方便修改

1.在app.vue中设置

2.在需要请求的地方只需要写请求的路由地址即可

处理数据

我们请求来的数据事一个数组对象那么我们需要把x轴的数据于y轴的数据取出来变成两个数组方便echarts使用

动态展示图表

添加echarts

echart图表本身是提供了一个resize的函数的。是当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas。

用window.onresize = myChart.resize; 可以完成自适应，就是把window的onresize事件赋值为echart的resize事件

图表一样式修改

柱状图圆角与线段渐变色设置

在components下的itemOne.vue

柱状图的柱状的位置与上面显示文字

图表2 地图展示

如果要展示地图那么需要中国地图的矢量数据与省份数据在public中的map文件夹已经提供了

由于数据实在我们本地所以我们在启动项目的时候可以直接在浏览器上输入

http://localhost:8080/map/china.json即可看到数据

我们在components文件夹下创建一个mapPage.vue组件用来容纳地图。同时在views下的homePage.vue中引用调用并且在页面中间的div中使用

获取地图数据

因为我们在项目中app.vue中设置了请求基准路径

axios.defaults.baseURL=“http://localhost:3000/”

所以我们不能在使用全局的axios 否则会使用基准路径完成请求

我们单独引用axios进行数据的请求

当然我们也可以直接引用数据不用请求

import china from ‘map/json/china.json’ //本地路径

就可以不用上面的请求使用

设置地图

echarts.registerMap（名字，数据）

设置地图样式

在地图上设置散点标记图

设置提示框组件的视觉映射效果（地图左下角效果）

设置标题

元素

Mon, 05 Sep 2022 00:00:00 GMT

行内元素：

块元素：

特殊符号：

标签的属性：

<标签属性1="属性值1" 属性2="属性值2">文字<标签>

a标签：

href–添加跳转链接，title–标题，target–页面跳转方式（1._blank新窗口打开，2._self当前窗口打开，_new新窗口打开）

ul标签：

ul>li{文字$}*5 (快捷键)

type=‘circle’ 实现无序列表效果变成空心的圆；

type=‘square’ 实现无序列表效果变成实心方块；

type=‘disc’ 实现无序列表效果变成实心的圆（默认的值，写不写都一样）；

ol标签：

type=“a” type=“A” type=“I” type=“i” type=“1”,定义有序列表表达效果

start=“3”，让列表从第三个开始

列表的嵌套：

图片：

src是图片的路径，alt是图片加载失败的提示文字，width是设置图片的宽度

所有的块级标签都支持align属性，属性值有center（居中），right（居右），left（居左）

块级元素，独占一行，可以设置宽高，ul,li,p,h1-h6,div,ol,dl,dt,dd

行内元素：不独占一行，可以和其他行内元素排列在一起，不能设置宽高，a,b,strong,sub,sup,i,u,s,em,

行内元素可以嵌套在块级元素中

vue接口请求

Tue, 06 Sep 2022 00:00:00 GMT

NotionNext BLOG

CSS容器查询

h5介绍及标签

h5介绍及标签

HTML5是什么？

网站建设步骤

标签

标签的属性

span标签

div标签

webpack

基本概念

4大配置

使用

入口/出口

mode 打包模式

打包多个文件怎么办？

plugin 插件

clean-webpack-plugin 打包之后，清空原有的内容

html-webpack-plugin

devserver

loader加载器

style-loader和css-loader

less-loader sass-loader

vue-loader

webpack有什么特点

webpack打包的流程原理

Echarts

数据可视化–项目开发流程

vue3.0项目创建

1.电脑上安装node.js

2.全局下载项目脚手架

3.创建项目

4运行项目

拿到空项目怎么办？

项目分辨率响应式分析与实施

项目基本结构

技术栈

项目分辨率响应式创建

flexible.js

cssrem插件

项目顶部信息条创建

页面主体创建

大容器

左中右

左右图表展示区块容器样式

左右每个区块内容插入容器槽口

中间地图区域容器样式

图表前期准备

全局设置Echarts与axios

Charts 全局引用

axios全局引用

图表1基本设置

json-server提供数据

设置axios请求

设置请求基准路径

处理数据

动态展示图表

添加echarts

图表一样式修改

柱状图圆角与线段渐变色设置

柱状图的柱状的位置与上面显示文字

图表2 地图展示

获取地图数据

设置地图

设置地图样式

在地图上设置散点标记图

设置提示框组件的视觉映射效果（地图左下角效果）

设置标题

元素

行内元素：

块元素：

特殊符号：

标签的属性：

a标签：

ul标签：

列表的嵌套：

图片：

vue接口请求

发送json对象给后端