在谷歌工作的时候,我们要做很多界面的原型,要求快速上手,灵活运用,当时用的一些现有框架,比如angular,太笨重了——尤雨溪(Vue.js 作者) vue.js是现在一个很火的前端框架,官网描述其简单易用,灵活度高,性能好.本篇文章基于Windows系统 公司的项目前端框架选择了vue,最近也一直在学习它,今天写一篇Vue-cli脚手架搭建的学习记录,以后忘记了再来查阅.那么如何从零开始要跑起一个vue.js项目?主要分以下几步: 1.Node.js(Javascript运行环境)安装 2.V

在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dist目录 可以看到 01.jpg被存放在 images目录下, 并且后面生成一串不固定的字符串, 这是由之前的 rules配置的  name: 'images/[name]-[hash:8].[ext]' 产生的, 同样 bundle后面的字符串也是由 filename: "scripts/bundl

接着从0开始搭建vue+webpack脚手架(一) 三.配置webpack-dev-server 1. webpack-dev-server自带一个node的服务器, 项目在服务端运行的同时可以实现热更新加载 2. 安装兼容环境变量的包 cross-env (1)原因: 构建项目时分生产环境和开发环境,此时webpack需要配置production和development模式,需要使用一个变量来作条件判断,而不同的平台上设置环境变量方式不同,在Mac平台是 NODE_ENV=production

前言: 在使用vue进行开发时需要搭建vue的运行环境,这里主要是使用淘宝镜像cnpm进行搭建vue的脚手架开发环境.主要是分为mac和window两个版本,两个环境的搭建都是大同小异. mac开发环境的搭建: 1.安装Node.js(这个只需要去nodeJS官网下载安装就可以了) 以下的命令都是在终端输入 2.在电脑终端使用命令 node -v 检查版本(检查安装成功) 3.安装淘宝npm镜像 sudo npm install -g cnpm --registry=https://regist

1. 前言 目前Spring Boot已经成为主流的Java Web开发框架,熟练掌握Spring Boot并能够根据业务来定制Spring Boot成为一个Java开发者的必备技巧,但是总是零零碎碎不够系统,所以萌生了从零搭建一个后端脚手架的想法.并把这个过程中的细节思路和之前的一些文章结合起来展现给大家,希望能够实实在在帮助学习Spring Boot的同学,当然能力有限如果有不足之处还请多多指教. 2. 面向的群体 首先,这个定位不是完全没有接触过Spring Boot的初学者,因为Spri

相信大家在前端开发中都使用过很多前端脚手架,如vue-cli,create-vite,create-vue等:本篇文章将会为大家详细介绍这些前端脚手架是如何实现的,并且从零实现一个create-kitty脚手架发布到npm上. pnpm搭建Monorepo环境 使用pnpm管理对项目进行管理是非常方便的,极大的解决了多个包在本地调试繁琐的问题. 什么是Monorepo? 就是指在一个大的项目仓库中,管理多个模块/包(package),这种类型的项目大都在项目根目录下有一个packages文件夹,

经过三个章节的学习,你已经学会搭建了一个基于webpack4的react脚手架.如果要更改配置,比如,你希望把编译后的js文件和css文件等单独放dist下的static目录下,你想想,是不是有点麻烦.你要去浏览webpack的配置文件,找到哪些配置项,然后去更改它,我们希望有个参数配置文件,只要更改参数配置,而无需更改webpack的配置文件. 1 添加参数配置文件 (1)在根目录创建config文件夹,在config文件夹内新建一个index.js文件,文件内容如下: 'use strict

搭建一个React工程的方式有很多,官方也有自己的脚手架,如果你和我一样,喜欢刨根究底,从零开始自己一行一行代码创建一个React脚手架项目,那你就来对地方了.本教程是针对React新手,以及对webpack还不熟悉的用户,或者是想了解当前前端工程化方案的用户.我会在整个系列通过webpack4的配置,从生产和开发环境分别入手,包含代码压缩,大文件gz压缩,webpack4的code split,postcss等插件如何引入,css编译,如何让环境支持各种css预处理器,cssModule配置化

1. 前言 今天开始搭建我们的kono Spring Boot脚手架,首先会集成Spring MVC并进行定制化以满足日常开发的需要,我们先做一些刚性的需求定制,后续再补充细节.如果你看了本文有什么问题可以留言讨论.多多持续关注,共同学习,共同进步. Gitee: https://gitee.com/felord/kono GitHub: https://github.com/NotFound403/kono 2. 统一返回体 在开发中统一返回数据非常重要.方便前端统一处理.通常设计为以下结构:

1. 前言 今天继续搭建我们的kono Spring Boot脚手架,上一文集成了一些基础的功能,比如统一返回体.统一异常处理.快速类型转换.参数校验等常用必备功能,并编写了一些单元测试进行验证,今天把国内最流行的ORM框架Mybatis也集成进去.使用的Spring Boot版本为2.3.2.RELEASE. Gitee: https://gitee.com/felord/kono 1.0.0.MYBATIS 分支 GitHub: https://github.com/NotFound403/

1. 前言 今天继续搭建我们的kono Spring Boot脚手架,上一文把国内最流行的ORM框架Mybatis也集成了进去.但是很多时候我们希望有一些开箱即用的通用Mapper来简化我们的开发.我自己尝试实现了一个,接下来我分享一下思路.昨天晚上才写的,谨慎用于实际生产开发,但是可以借鉴思路. Gitee: https://gitee.com/felord/kono day03 分支 GitHub: https://github.com/NotFound403/kono day03 分支 2

nodejs 安装  我先前用了nvm,觉得nvm挺厉害可以随时更换nodejs版本,但是研究了下,可能自己功力不够还是什么,并不好用,中间还出现了错误:所以最后还是卸载了: 本文图文并茂的一步一步的来,旨在好用简洁: 1]第一步:下载nodejs 中文官网: https://nodejs.org/zh-cn/download/ 如下图是最新的版本,不用怕这是最新的直接下载就可以了,选择windows版本,LTS是长期支持版本,箭头所示下载64位压缩版:个人觉得压缩版本就够了:(可能安装版的功能

1. Spring Data Elasticsearch Spring Data Elasticsearch是Spring Data项目的子项目,提供了Elasticsearch与Spring的集成.实现了Spring Data Repository风格的Elasticsearch文档交互风格,让你轻松进行Elasticsearch客户端开发. 2. 个人的一些看法 应粉丝要求特地将Elasticsearch整合到Spring Boot 中去.本来打算整合到kono脚手架中,但是转念一想这样并不

本章节,我们对如何在脚手架中引入CSS,如何压缩CSS,如何使用CSS Modules,如何使用less,如何使用postcss等问题进行展开学习. 1 支持css (1)在app目录,新建一个css,命名为index.css,输入样式: h1{ display: flex; height: 200px; align-items: center; justify-content: center; color: #8FBC8F; } (2)在index.js中引入css import './ind

html文件如何也同步到dist目录?bundle.js文件修改了,万一被浏览器缓存了怎么办?如何为导出的文件加md5?如何把js引用自动添加到html?非业务代码和业务代码如何分开打包?如何搭建开发环境?如何实现开发环境的热更新? 在上一节我们已经搭建了一个最基本的webpack环境, 这一节我们带着上节的一些疑问,继续优化我们的react工程.   1.整合html-webpack-plugin   public的index.html应该自动编译到dist目录,并且所有的js引用是自动添加的

基于多数情况下都是使用vue-cli初始化项目, 却始终未去了解其原理.从零开始搭建,可以让自己更深层次的理解框架. 首先从最基本的npm 开始, 至于安装npm 和 node就不用再赘述了,那是前端自动化开发最基本的能力. 一.初始化 1 新建项目目录, 生成package.json并创建项目基本信息. $ npm init --yes 2. 安装基本项目依赖模块 $ npm install -S vue $ npm install -D webpack webpack-cli webpack

1. 前言 在上一文中我根据Mybatis中Mapper的生命周期手动实现了一个简单的通用Mapper功能,但是遗憾的是它缺乏实际生产的检验.因此我选择更加成熟的一个Mybatis开发增强包.它就是已经获得Gitee获得 6900 star 的Mybatis Plus. Gitee: https://gitee.com/felord/kono day04 分支 GitHub: https://github.com/NotFound403/kono day04 分支 2. Mybatis Plus

1. 前言 上一文我们整合了Mybatis Plus,今天我们会把缓存也集成进来.缓存是一个系统应用必备的一种功能,除了在减轻数据库的压力之外.还在存储一些短时效的数据场景中发挥着重大作用,比如存储用户Token.短信验证码等等,目前缓存的选型还是比较多的,EHCACHE.HAZELCAST.CAFFEINE.COUCHBASE以及本文要整合的REDIS.接下来我们将会在kono脚手架项目中集成Spring Cache以及Redis. Gitee: https://gitee.com/felor

1. 前言 文件服务器是一个应用必要的组件之一.最早我搞过FTP,然后又用过FastDFS,接私活的时候我用MongoDB也凑合凑合.现如今时代不同了,开始流行起了OSS. Gitee: https://gitee.com/felord/kono day06 分支 欢迎Star GitHub: https://github.com/NotFound403/kono day06 分支 欢迎Star 2. 什么是OSS 全称为Object Storage Service,也叫对象存储服务,是一种解决

本章节,我们一起来探讨以下问题:如何对编译后的文件进行gzip压缩,如何让开发环境的控制台输出更加高逼格,如何更好的对编译后的文件进行bundle分析等. 1 gzip压缩 如果你想节省带宽提高网站速度,压缩是一种简单有效的方法.我们模拟一次html的请求,想象一下浏览器和服务器的对话: 浏览器:嘿,给我来一个 index.html文件 服务器:好的,让我去找找它是不是在~ 服务器:找到它了,我会返回一个成功的状态码(200 ok),我正在发送文件…… 浏览器:100kb? 我滴天……等啊……等

vue作为现在主流的前端框架,有必要学习一下. vue的官方文档还是不错的,开源中文,一个爽字形容. 如果不是实际开发需要vue-cli构建项目,那么可以在加一个爽. 然而要构建的时候发现官方文档还是不够用,像下面介绍的全家桶看着就头皮发麻. 那么学习vue需要什么呢: vue.js有著名的全家桶系列,包含了vue-router,vuex, vue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成. vue-cli 这个构建工具大大降低了 webpack 的使用