- 博客(37)
- 收藏
- 关注
RSS订阅
原创 vue工程搭建（含mac电脑操作）
vue 搭建（含mac电脑安装）mkdir vueprojectatom .环境—————————————————————1、初始化npm init -y 生成package.json2、安装webpack npm install web pack - -save-dev一定要加 —save会生成node_modules否则安装不成功3、安装vue淘宝镜像 npm install -g vue ...
2018-03-16 17:47:55
447
原创 viusualMap
visualMap=[ //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。视觉元素可以是：symbol: 图元的图形类别。symbolSize: 图元的大小。color: 图元的颜色。 // colorAlph...
2018-08-26 21:41:09
186
原创 echarts demo-ss
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src=&qu
2018-08-26 05:37:13
234
转载 ech...
theme = { // 全图默认背景 // backgroundColor: 'rgba(0,0,0,0)', // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0...
2018-08-25 23:16:50
303
原创 view简易版，无需搭建环境方便测试
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width">
2018-06-24 22:13:35
176
原创 angular
创建工作目录下安装angular工具npm i @angular/cli --save-dev创建项目npx ng new first-demo启动
2018-05-12 15:34:27
193
原创 阿里云 布署node js环境
1、连接连接 root 登录用阿里云的公开IP，密码自己知道的ssh root@IP然后密码就登录了----开始各种安装了----2、升级CentOsyum -y update需要花点时间有点慢，不是，非常慢升级后cd 到usr/local/src下， 一般用来放源文件3、安装nodejswget下载安装包wget https://nodejs.org/dist/v6.9.5/node-v6.9....
2018-05-04 14:32:40
181
原创 typescript
安装npm init -ynpm i typescript --save-dev创建文件function run(name:string,age:number){ console.log(name,age);}run("www",12);运行./node_modules/.bin/tsc demo01/first.ts生成first.jsfunction run(name, age) ...
2018-04-23 11:19:11
386
原创 react
实践出真知npm init -ynpm i babel-loader babel-preset-env babel-preset-react webpack webpack-cli webpack-dev-server babel-core react react-dom react-router-dom redux react-redux新增webpack.config.jsconst webp...
2018-04-10 22:19:00
277
原创 history api
history.pushState(state,null,url);window.onpopstate = function(event){ event.state}html5 history api 栗子：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>&..
2018-03-30 14:27:13
351
原创 Angular
AngularJS 应用组成如下：View(视图), 即 HTML。Model(模型), 当前视图中可用的数据。Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。scope 是模型。scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含...
2018-03-18 11:37:10
191
原创 react
直接在html中引入react.min.js - React 的核心库react-dom.min.js - 提供与 DOM 相关的功能babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用...
2018-03-18 10:47:32
156
原创 bootstrap布局
<!-- 一共是 12份 col-sm col-md col-lg-1 col-xl-1 --> <!-- @media (min-width: 576px) { ... }// Medium devices (tablets, 768px and up)@media (min-width: 768px) { ... }// L...
2018-03-17 23:20:17
400
原创 bootstrap配置（非布局）
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">&am
2018-03-17 23:00:04
259
原创 jquery的Ajax使用
getpostload直接上代码测试需要先express .生成一个项目 npm i 安装public下新建个index.html来测试<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <scr
2018-03-17 18:28:24
144
原创 jquery 事件监听
事件分类：表单事件键盘事件鼠标事件先来看表单事件blur 失去焦点focus 得到焦点change 值改变submit提交实例参考<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script
2018-03-17 14:57:20
1583
原创 webpack之css sass file url图片加载
1､安装npm i css-loader --save-devnpm i style-loader --save-devnpm i sass-loader --save-devnpm i file-loader --save-devnpm i url-loader --save-dev2、配置module:{ rules:[ { test:/\.css$/, ...
2018-03-17 10:06:22
451
原创 webpack开发环境配置
1､webpack.config.js devServer:{ contentBase:__dirname+"/dist", port:8080 },2､package.json "scripts": { "build": "webpack", "dev": "webpack-dev-server" },3､npm run dev即可4､打开
2018-03-17 10:04:42
173
原创 测试工具jasmine
1､安装npm i jasmine --save-2､初始化 ./node_modules/.bin/jasmine init生成文件夹spec3､配置package.json "scripts": { "build": "webpack", "dev": "webpack-dev-server", "test":"jasmine" },
2018-03-17 10:02:22
188
原创 webpack懒加载
懒加载即是在需要的时候再加载1､使用import()返回promise，不同于import 的导入，但是功能相同//导入样式,会在 2秒后加载此样式setTimeout(function(){ import("./style2.scss");},2000);//导入默认函数other1:export default function(){ document.body.style.back...
2018-03-17 10:01:25
383
原创 webpack安装
1､打开atom工程新方式在终端可以mkdiv week10后atom .直接打开atom2､生成git初始化git init会生成.git需要创建个文件或文件夹和文件后才可使用分支.git checkout -b demo后git branch看不到分支。创建文件后 git add.git commit -am "init"后git branch可看到分支。3､npm init -y生成nod...
2018-03-17 09:59:37
238
原创 webpack之webpack.config.js以及nodejs与es6导入导入语法
1､创建webpack.config.js配置：module.exports = { entry: { index:__dirname +"/src/main.js" }, output:{ path:__dirname+"/dist", // filename:"index.js" filename:"[name].js" // name表示和...
2018-03-17 09:58:29
1836
原创 git 常用大全
一、git命令之增加文件，增加当前文件夹 ，删除 ，修改文件名等。添加文件：git add 文件名git commit -am "remark"添加当前文件夹下所有文件：git add . git commit -am "add files"删除文件 创建文件同时提交git rm c.js更改的动作不会显示出来更改 删除 新增 后提交更改文件名：git mv f.js goole.js 二...
2018-03-17 09:56:21
169
原创 socket.io例子
<script type="text/javascript" src="/socket.io/socket.io.js" > </script>引入socket.io.js<h1>聊天室</h1> <div class="chat"> <div class=&
2018-03-17 09:48:38
751
原创 html标签
/*选择的是div ，里面有个类box*//*div是块级的，宽度自适应父级的宽度*/div.box{ background-color: "#eee"; height: 300px; width:auto; /*默认自适应，可不写;可设置最小宽度*/ min-width:500px; /*width:5px;*/ max-width:800px; /*min-...
2018-03-16 22:52:15
133
原创 meta
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" ><!-- 指示IE以目前可用的最高模式显示内容--> <meta name="description" content="这个网页是专门用来卖大白菜的
2018-03-16 22:49:45
116
原创 dom事件
document.style.可经修改css属性值classList可以拿到class值.classList.item(0).classList[0]来访问.add .remove不会操作底层的dom，但是要了解类与类之间空格可以有很多className会以字符串返回divdom.insertAdjacentElement("afterEnd",ntpdom);const ntpdom = ...
2018-03-16 22:48:30
100
原创 js基础
s基础数据类型stringnumberboolean以是三个有自有的类类型undefinednullsymbol`小撇可以实现换行·Function继承Objectinstance Function extends ObjectNumber()可以通过 +替代npm init -ynpm i http-servernpm i http-server -save-devscripts 内置的star...
2018-03-16 22:46:23
88
原创 针对初次尝试express
安装一个ide:atom http://atom.iomac atom-preferences-install atom-live-server platform-ode-terminalctrl ~ctrl alt3ctrl alt q安装node.js https://nodejs.org/en/cd 目录，执行npm init -y 生成package.json会在当前目录下生...
2018-03-16 22:43:37
139
原创 简易版 express 框架+上传文件
express安装—week07npm install express-generatorexpress -h 查看帮助信息 如果安装过全局的可以直接用下面命令express -e -c sass . 点表示在当前路径下生成脚手架express install 安装依赖库npm start 启动解析app.jsvar express = require('express'); 导入express框...
2018-03-16 22:41:56
385
原创 express+mogoose+socket+session+sass搭建服务器端之各种安装各种依赖看这里
express安装npm install express-generatorexpress -h 查看帮助信息 如果安装过全局的可以直接用下面命令创建express项目express -e .npm install创建各路由安装sassnpm i node-sass --save-devnpm i node-sass -g 配置package.jsonscripts:{ “build”:”...
2018-03-16 22:33:55
381
原创 jquery基础
jquery例子 <p>p1</p> <p>p2</p> <p>p3</p>拿到对象const result = $(“p”)result.length——3innerText—text()innerHtml—html()append()—把小弟加到尾部prepend()—把小弟加到顶部appendTo...
2018-03-16 22:13:06
118
原创 前端和nodejs同时测试例子
1､初始化前后端测试./node_modules/.bin/karma init 初始化生成karma.conf.js具体配置看前一篇karma前端测试的配置。./node_modules/.bin/jasmine init 初始化nodejs测试 生成spec文件夹，用来测试。2､命令配置package.json配置各启动命令 "scripts": { "build": "webpack...
2018-03-15 19:21:41
685
原创 karma +webpack +jasmine测试
webpack可以模块化写前端jasmine测试node.js后端可通过 karma +webpack +jasmine测试前端测试karma将 webpack的模块开发和jasmine测试功能结合在一起。1､安装 karmakarma-webpackkarma-chrome-laucher需要具备安装好webpack,jasmine最后一个是用来自动启动浏览器2､./node_modules/....
2018-03-15 18:46:57
930
原创 webpack 照顾i.e.
1､安装npm i babel-loader babel-plugin-syntax-dynamic-import babel-plugin-transform-runtime babel-preset-env安装成功后可以package.json中看到 "dependencies": { "babel-loader": "^7.1.4", "babel-plugin-syntax-...
2018-03-15 18:13:11
161
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人