2017年11月_Stangor

原创如何在VSCode中同步代码到github （on Mac）

在VSCode中使用git，将本地code提交到github，这本是一件非常容易的事情，就像你在本地开发，然后将代码同步到github上面一样，可是我几乎没往github提交过代码，虽然会在上面查问题，[打脸][打脸][打脸][打脸][打脸]。先在VSCode中初始化一个本地Repo，这个Repo就会存放从github pull 下来的代码，怎么创建呢？先点出最左侧导航栏的分支图标，在『源代码管理』

2017-11-28 15:39:17 25878 2

原创 VSCode 常用快捷键与插件

command + B : show left pane or hide it;ctrl + ~ : show or hide terminal;command + shift + F : 在左边pane中搜索；command + P : 搜索某个文件并可以打开它，此时预览模式，如果想要编辑该文件应该hit 右箭头（->）即快速导航到某一个文件；command + P + : ：输入一个数

2017-11-28 08:37:15 8365

原创 Webpack 3.x 通过PurifyCSS Plugin按需加载bootstrap css样式

之前通过webpack把bootstrap css 样式引入到模板中，但是注意到的是把全部bootstrap css样式加载进来，但是当前的template中只有简单的些button/div/img/h1/等，而且这些元素只用到了一小部分样式，没有必要把全部的样式都加载进模板，所以需要改进，怎么办呢，PurifyCSS Plugin可以做到只加载当前页面所需要的样式。先安装：npm i -D p

2017-11-27 18:37:51 3449

原创 Webpack3.x 通过Webpack加载Bootstrap的CSS/Scss/JS 及更改CSS样式

如何用webpack去加载bootstrap的css/scss 及JS呢，先准备一个bootstrap 模板b-index.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal

2017-11-27 17:34:40 2916 1

原创 Webpack 3.x 在CSS和Template中使用file-loader及解决image-webpack-loader 优化图片问题

如何在CSS或是template中使用图片？在CSS中使用，先安装file-loader：npm i -D file-loader安装完成后，在package.json中看到的当前版本："file-loader": "^1.1.5"接着在app.scss中加入下面的样式：html, body{ height: 100%; min-height: 100%; backgroun

2017-11-27 08:31:39 15437 2

原创 Webpack3.x Hot Module Replacement的使用 && switch to prot env to use ExtractTextPlugin

关于HMR，它的介绍：Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running without a page reload并且它只是针对dev model :HMR is not intended for use in production, meaning it

2017-11-26 11:24:23 371

原创 Webpack 3.x 尝试使用Pug(Jade)模板引擎

关于Pug模板引擎，之前的名字叫Jade，关于它的介绍：可以参考这里，它是一个Pug – robust, elegant, feature rich template engine for Node.js。这里还有一个关于JS模板引擎的常用的几个：JS template engines。先安装:npm i -D pug pug-html-loader安装完成后，它的当前最新版本是："pug-html

2017-11-25 22:05:04 3505

原创 Webpack 3.x 创建多个template及rimraf使用

如果是使用的webpack-dev-server模式的话，它是从内存中去读取目标模板的，也就是说如果现在磁盘上的index.html被删除了，对它读取index.html没有任何影响，那么现在我要做这样的件事，将目标模板index.html更换一下目录位置，也就是说这种情况会是在使用webpack -d的模式下才有意义，所以现在就切换回这种模式： "scripts": { "dev": "

2017-11-25 18:02:04 2619

原创 Webpack 3.x 通过webpack安装React和Babel

之前用最原始的方式写过一个React的hello world，参见：原始React hello world在React的官网上面会介绍好几种方式去安装React，下面尝试通过Webpack来安装：npm i -D react react-dom安装完成后的版本："react": "^16.1.1","react-dom": "^16.1.1",在使用React的时候，必须要熟悉ES6与Babel，

2017-11-25 16:27:38 1386

原创 Weapck 3.x 安装与配置webpack dev server

关于webpack dev server,看官网上的介绍：Use webpack with a development server that provides live reloading. This should be used for development only.It uses webpack-dev-middleware under the hood, which provides

2017-11-24 15:51:23 1081

原创 Webpack 3.x 中 style/css/Sass loaders

上篇里已经通过html webpack plugin生成了html 模板，并且可以配置像title, hash, minify, 接下来分析如何将css也bundle 进去，webpack是通过loaders来完成，可以参考这里：https://webpack.js.org/concepts/loaders/，还有中文版本的：https://doc.webpack-china.org/concept

2017-11-24 14:20:27 7052

原创 Webpack3.x 中 html-webpack-plugin的用法

继上篇webpack 入门，安装与配置完后，是时候去把这些绑定好的file放到html中使用，使用!+tab，快速在一个.html文件中创建一个模板(index-manual.html)：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width

2017-11-23 23:43:09 3369 1

原创 webpack 3.X 安装与配置

组件如何接收属性，所有的属性都可以通过this.props对象获取，像下面这样去使用：<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script crossorigin src="https://unpkg.com/react@16/umd/react.

2017-11-23 16:25:44 8620

原创在React中使用extends React.Component定义的组件

在《React 快速上手开发》的第二章，组件的生命周期，创建组件的API是这么写的：var MyComponent = React.createClass({ render:function(){ return (<h1> hello world </h1>) }});ReactDOM.render( React.createElement(MyCompo

2017-11-22 22:16:54 7743 2

原创 React.js hello world

React 官网上对它的介绍：A JavaScript library for building user interfaces从图书馆借了一本《React 快速上手开发》–Stoyan Stefanov写的，很薄，不到200页，开始啃。从它官网的宣传语可以看出来，React应该侧重点在于构建用户界面，它通过组件的方式来构建，实际开发中应该是根据需要自定义组件，再将这些组件通过一定的方式进行组合，来

2017-11-22 15:09:17 3267

原创设置Sublime 3的默认浏览器与打开浏览器的快捷键

浏览器的兼容问题是个大坑，你用一个浏览器调试半天发现没有任何卵用，其实就应该考虑到是你当前用的浏览器可能有问题，换个浏览器试试。个人比较喜欢Chrome浏览器，简洁高效，所以想把sublime的默认浏览器改成Chrome，之前的默认浏览器是Firefox。下面这个package先要安装下：view in browser shift+command+p,打开上面的command palet

2017-11-21 21:32:40 40452 2

原创 JavaSE review -- final 、static

1. 对于final类型的成员变量，它的赋值方式一般有两种，第一是声明的时候直接赋值，第二种是在声明的时候不予于赋值，而在该类的所有构造方法中都要给该成员变量赋上值：public class FinalTest{ final int a; public FinalTest(){ a = 0; } public FinalTest(int b){

2017-11-05 15:14:54 281

原创 JavaSE review -- 面向对象、封装、继承、多态、抽象

1. 计算机系统中的数据表示，最小单位是『位，bit』，只有0和1两种状态 1 byte = 8 bit; 00000000，可以取到2的8次方个数，即256个值：-128~127。但是为什么从-128开始呢，这得研究一下进制问题，待解决。可以参考这里： http://jun123.blog.51cto.com/9893428/1657732 2. 单精度浮点型 float 双精度

2017-11-04 09:25:12 264

原创 Git branch - fix conflict

现在有两master 和 branch02两个分支，并且两个分支下面的文件一致：分别修改test.txt中的文本，再合并两个分支，造成冲突：两个分支下的test.txt中的文本已经不一样了，现在去merge两个分支：让文本保留成原先样子，最后在master分支上merge branch02的时候并没有出现冲突，因为之前的冲突已经解决了，所以再次merge的时候，其实就是一

2017-11-01 15:22:10 826

原创 Git branch - simple command

先在桌面创建一个目录myGit2，在该目录下初始化一个git仓库：创建一个新的分支命令：git branch branchName 删除一个新的分支命令：git branch -d branchName(该分支与master完全一致的前提) 如果branch与master不一致，若要删除branch，用git branch -D branchName: 创建分支并且切换到当前分

2017-11-01 14:27:01 325

Stan的专栏