素者素心-CSDN博客

原创 webpack从入门到会玩（5）- js语法检查

概述实际工作中很多时候都是多人协同开发一个项目，这时需要保证大家的代码可读性和规范性，所以webpack提供了js语法检查功能eslint，可以让团队中的每位成员都保持相近的编码风格。准备工作新建一个项目eslint-demo，基本配置一下webpack。index.js（写一个格式很丑的js）：function sum(a,b){ return a+b}sum(1,2)index.html：<!DOCTYPE html><html lang="en"&g

2020-08-31 23:44:16 396 1

原创 webpack从入门到会玩（4）- 其他资源

概述前端项目中出了html、js、css、图片等资源之外，还会有其他的资源，比如视频、iconfont等。这些资源一般不需要webpack怎么处理，直接输出到指定的目录就可以了。下面就用iconfont来举个例子吧，新建一个media-demo项目，然后去阿里巴巴的iconfont.cn下载一些图标，放到项目里，图标文件放到media目录，css文件放到styles目路，css文件里面读取图标资源的路径记得改一下，index.js中引用iconfont.css，在index.html中添加图标引用，we

2020-08-31 00:05:30 172

原创 webpack从入门到会玩（3）- 图片资源

文章目录环境准备安装loader配置loader图片提取构建环境准备免得配置开启了太复杂，重新创建一个image-demo项目，并对webpack作一些简单配置。index.js：console.log('入口模块')index.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=

2020-08-29 13:22:12 204

原创 webpack从入门到会玩（2）- 样式资源

webpack处理样式文件前面讲到了webpack默认只能处理JS和JSON文件，那么项目中的其他资源有怎么处理呢？我们先来看看样式文件的处理方式吧。把demo项目的目录定义的规范一些：把index.js移动到js目录中，新建了一个styles目录，里面新建一个index.css，简单写一些样式。index.css：html, body { margin: 0; padding: 0;}.box1 { width: 100px; height: 200px;

2020-08-27 10:16:32 120

原创 webpack从入门到会玩（1）- 简介

什么是webpack在目前的大前端时代，前端工程化和模块化开发已经非常普遍，从一个入口的JS文件开始，通过require函数或者import关键字等方式建立起一个复杂的模块依赖网络，加上CSS预处理less/sass/stylus等技术的广泛使用，可以说前端项目现在已经变得空前复杂。遗憾的是，浏览器并不认识模块化的JS代码，也不认识CSS预处理的样式代码，所以需要一个工具将这些模块化的代码转换成浏览器认识的原生的静态资源，webpack的核心功能就是这个。本质上，webpack 是一个现代 JavaSc

2020-08-25 23:59:47 702

原创 webpack学习笔记

什么是webpackwebpack是前端打包工具，能让浏览器支持模块化，自动分析项目的所有依赖关系，然后按照指定的规则生产对应的静态资源。官网在这：https://www.webpackjs.com/webpack核心主要进行 JavaScript 资源打包如下图，它可以结合其他插件工具，将多种静态资源css、png、sass 分类转换成一个个静态文件，这样可以减少页面的请求。可集成 babel 工具实现 EcmaScript 6 转 EcmaScript 5 ，解决兼容性问题可集成 http

2020-07-31 11:55:57 357

原创 Vue源码学习(3)——计算属性computed实现原理

文章目录前言实现原理分析initStateinitComputeddefineComputedWatcher对计算属性的处理总结前言看这篇文章之前最好先对Vue的MVVM实现原理有一定的认识，因为这是Vue的核心概念，其他的工具大部分都是在此之上锦上添花，如果你不是很了解，可以先看看这篇文章：Vue的MVVM原理实现原理分析initState在Vue源码的src/core/instance/state.js中，我们可以看到有个initState方法，里面有一个initComputed方法的调用，

2020-07-28 19:07:33 734 1

原创 Vue源码学习(2)——Vue侦听器watch实现原理

文章目录前言实现原理分析initStateinitWatchcreateWatchervm.$watch实现侦听总结前言看这篇文章之前最好先对Vue的MVVM实现原理有一定的认识，因为这是Vue的核心概念，其他的工具大部分都是在此之上锦上添花，如果你不是很了解，可以先看看这篇文章：Vue的MVVM原理实现原理分析initState在Vue源码的src/core/instance/state.js中，我们可以看到有个initState方法，里面有一个initWatch方法的调用，在这个初始化wat

2020-07-27 16:38:24 628

原创 Vue源码学习(1)——Vue的MVVM原理

前言虽然很多人写过这样的文章了，但是看别人的一百遍还不如自己写一遍，整理好写出来就是自己的了，不会忘记。所以还是自己写一次吧，哈哈！什么是MVVMMVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。（来自百度的解释_）其实就是通过ViewModel的处理，将View和Model的解耦，不需要自己根据Model的数据变化去操作View的DOM，达到的效果就是我们可以专注写业务

2020-07-25 15:14:20 389 2

原创 TypeScript学习总结

TypeScript看看以前的代码这是一个main.js文件，里面有一些函数function init() { console.log("各种初始化操作");}function compute() { console.log("各种逻辑运算");}function domHandle() { console.log("各种dom操作");}如果我们需要使用这些函数来完成一定的操作，我们会这样(function(){ init(); compu

2020-07-21 10:49:29 465

转载 NPM版本管理

npm采用了semver规范作为依赖版本管理方案。semver 约定一个包的版本号必须包含3个数字MAJOR.MINOR.PATCH 意思是主版本号.小版本号.修订版本号MAJOR 对应大的版本号迭代，做了不兼容旧版的修改时要更新 MAJOR 版本号MINOR 对应小版本迭代，发生兼容旧版API的修改或功能更新时，更新MINOR版本号PATCH 对应修订版本号，一般针对修复 BUG 的版本号当我们每次发布包的时候都需要升级版本号：npm version major # 大版本号加 1，其余版

2020-07-19 17:06:20 200

原创类Windows界面的前端项目，基于TypeScript、Vue、ViewUI开发

heart-front-end简介heart-front-end是一个类Windows界面的前端项目，基于Vue 2.x + TypeScript + ViewUI(IView 4.x) + Sass开发，由于公司要求，后端暂时对应的是Jeesite的规范，如果想要对接其他后端就要做一些修改哦。这个项目使用了TypeScript，引入了面向对象和面向接口编程的思想，易于扩展，可以做出各种好玩的东西，喜欢的尽管拿去用吧，我也是刚刚入门，所以肯定会存在不少问题，如果发现有不爽的地方记得告诉我哦_代码传送

2020-07-19 16:33:06 1190

原创基于Spring Security5 和 JWT做前后端分离安全验证实践

基于Spring Security + JWT的权限管理的简单实践项目介绍这是一个基于Spring Security + JWT的前后端分离权限管理小例子，方便入门Spring Security的朋友学习，用到的框架和数据库如下：Spring Boot 2.2.2Spring SecuritySpring Data JPAjjwtEhcacheMySQL 8.0.16主要功能是用户登录验证后返回token，根据token可以访问其他资源token有效期为30分钟，每次请求成功都会

2020-07-19 16:22:53 552 1

tq26556570的博客