头部背景图片
小畅童鞋的学习笔记 |
小畅童鞋的学习笔记 |

使用flex布局来搭建基本的页面布局

2019-06-19

我们的目的是为了实现这样的布局:
Image1.png

Vue_CLI脚手架学习与搭建

2019-06-18

今天我们来学习一下Vue CLI脚手架,本文主要是总结Vue CLI脚手架搭建过程及总结遇到的问题,跟着我一起来学习吧~

1.node.js安装与环境配置

1.1 node.js安装
  • 安装包下载地址:https://nodejs.org/en/
  • 下载完成后,双击node-v10.16.0-x64.msi,开始安装Node.js,全程默认一直点击下一步(注意:安装地址最后不要默认选择C盘,选择D盘),安装完毕后点击finish结束安装进程,然后在VS code终端,依次输入命令:

    1
    2
    node -v
    npm -v
  • 如果正确输出版本号,说明我们的NodeJSNPM就安装好了,如下图所示:
    Image1.png

  • 此处说明下:新版的Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西

自定义构建Echarts问题描述

2019-06-15

今天我们来学习一下Echarts,本文主要是总结自定义构建Echarts遇到的问题,跟着我一起来学习吧~

1.使用命令行,创建自己的工程:
1
2
mkdir myProject
cd myProject
2.在 myProject 目录下使用命令行,初始化工程的 npm 环境并安装 echarts(这里前提是您已经安装了 npm):
1
2
npm init
npm install echarts --save

Image1.png

Echarts的学习与使用

2019-06-08

今天我们来学习一下Echarts,ECharts是一个纯JavaScript图表库,底层依赖于轻量级的Canvas类库ZRender,基于BSD开原协议,是一款非常优秀的可视化前端框架,本文基于Vue CLI脚手架,来实现Echarts的引用,跟着我一起来学习吧~

一.引入一个简单的图表

首先npm安装Echarts
1
npm install echarts --save
接下来打开public->src->main.js来引入echarts
1
2
import myCharts from './comm/js/myCharts.js'
Vue.use(myCharts)

VScode快捷键及常用插件

2019-05-31
VScode快捷键:

https://blog.csdn.net/hypon2016/article/details/80831266

VScode快捷键:
  • Auto Close Tag :自动闭合 HTML/XML 标签
  • Auto Rename Tag :自动重命名成对的 HTML/XML 标签
  • Babel ES6/ES7 : 添加 ES6/ES7 语法的颜色提醒
  • Canvas Snippets :Canvas 代码片段提示
  • Bracket Pair Colorizer :多层括号颜色匹配
  • CSS peek :可直接在 HTML 中查看 class、id 对应的 CSS 样式,并可以直接跳转
  • Document This : JSDoc comments for both TypeScript and JavaScript
  • filesize :编辑器左下角显示文件大小
  • git history、gitlens : git 使用必备,能够图形化显示 git 历史、编辑人物等
  • HTML CSS support : HTML、CSS 快捷操作
  • HTML Snippets : HTML 代码片段
  • Htmltagwrap : 选中代码快速增加 html 标签 - alt + w
  • Image Preview : 代码中直接显示图片缩略图
  • Import Cost :显示 import、require 引用的包的大小

flex布局排布

2019-04-25

作为前端必备知识点,flex为我们页面布局提供了灵活性,今天我们来学一下flex布局吧~

一、Flex布局是什么?

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局,行内元素也可以使用Flex布局, Webkit内核的浏览器,必须加上-webkit前缀。

1
2
3
.box{    
display: -webkit-flex; /* Safari */    
display: flex;}注意:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。

二、Flex布局基本概念

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
Image1.png

  • 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
  • 主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;
  • 交叉轴的开始位置叫做cross start,结束位置叫做cross end。
  • 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

十大排序算法

2019-04-01

今天我们来学习一下排序算法,排序算法是《数据结构与算法》中最基本的算法之一,虽说学过这门课,但几种排序总是讲述不清,今天来做一个系统的学习归纳,跟着我一起来学习吧~

排序算法可以分为内部排序和外部排序,内部排序是数据记录在内存中进行排序,外部排序是因排序的数据很大,一次不能容纳全部的排序记录,在排序过程中需要访问外存。常见的十大内部排序算法:冒泡排序选择排序插入排序希尔排序归并排序快速排序堆排序计数排序桶排序基数排序。用一张图概括:

Markdown基本语法

2019-03-31

进行完博客搭建,让我们来学习一下怎么写博客吧,学习一下Markdown的基本语法~
本站只是对Markdown语法进行简要叙述,如果想要加深一步学习,可以去Markdown官网上进行学习哦~

什么是Markdown?

Markdown 的目标是实现「易读易写」
Markdown 语法的目标是:成为一种适用于网络的书写语言
Markdown 的语法全由一些符号所组成,这些符号经过精挑细选,其作用一目了然。比如:在文字两旁加上星号,看起来就像强调。Markdown 的列表看起来,嗯,就是列表。Markdown 的区块引用看起来就真的像是引用一段文字,就像你曾在电子邮件中见过的那样。

markdown的优点:

  • 语法简单
  • 更专注内容而非排版,排版只是为了更清楚的展现内容
  • md轻松转换html及pdf,网络友好

Git基本用法

2019-03-28

Github是一个远程仓库,上传下载文件都需要运用到Git命令,让我们学习一下怎么运用Git吧~
本站只是对Github进行简要概括,方便运用时查找,如果想要加深一步学习,可以去廖雪峰Git教学网站上进行学习哦~

什么是Git命令?

Git是目前世界上最先进的分布式版本控制系统(没有之一)。
Git有什么特点?简单来说就是:高端大气上档次!

集中式版本控制系统(如CVS和SVN) :版本库是集中存放在中央服务器的,工作时从版本库下载,修改后重新上传版本库,完整的版本库保存在中央服务器,集中式版本控制系统最大的毛病就是必须联网才能工作。
分布式管理系统(如Git) :每个人电脑里都会有完整的版本库,只推送修改即可,不必联网。
Git的优势不单是不必联网这么简单,Git极其强大的分支管理,把SVN等远远抛在了后面。

Github+Hexo搭建个人博客

2019-03-22

作为一名技术小白,一直秉承着极高的热情向技术大佬们学习,可是学着学着就发现学过的东西很容易忘记,所以打算创建一个个人博客来进行记录总结,一方面可以总结学习过程中遇到的错误和困难,一方面也可以方便其他童鞋进行参考,接下来就和我一起学学怎么搭建个人博客吧!

我们先来看一下大体的搭建步骤:

• 获得个人网站域名
• 安装Git和Node.js
• GitHub创建个人仓库
• 安装Hexo
• 推送网站
• 绑定域名
• 更换主题

好啦,接下来就和我一起一步步进行操作吧~

Lililich's Blog