0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言，比如TypeScript
常用知识点，技巧
添加库到本地：
（举例 element-ui）
用npm命令行把包下载到本地
在电脑里找到资源文件，比如 C:\Users\XiaoCong\AppData\Roaming\npm\node_modules\element-ui\lib
然后复制到项目的目录下
IDEA 15 里的 js 的报错无视
比如
同时右侧显示这个
临时笔记
component
组件
成分; 零件; [数]要素; 组分;
Angular2怎么使用第三方的component库(如 jquery，easyUI ，Bootstrap 等）
PWA 增强web app helloWorld跑起来了，之前失败是因为Chrome服务器插件要FQ才能下载
https://developers.google.cn/web/fundamentals/getting-started/codelabs/your-first-pwapp/
安装谷歌插件
web-server-for-chrome
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/related
黑色主题风格
https://chrome.google.com/webstore/detail/darkness-beautiful-dark-t/imilbobhamcfahccagbncamhpnbkaenm
#####################################################
web前端响应式框架
Bootstrap
#####################################################
Weex 安装 创建项目 都成功，能运行
一直在变化
Weex的文档的确是值得吐槽的。官方的Demo想跑起来遇坑无数
npm install -g weex-toolkit --registry=https://registry.npm.taobao.org
weex
无法安装 Weex Toolkit
npm ERR! fetch failed https://registry.npm.taobao.org/weex-toolkit/download/weex-toolkit-0.4.10.tgz
npm WARN retry will retry, error on last attempt: Error: getaddrinfo EAI_AGAIN cdn.npm.taobao.org:443
安装 Weex Toolkit
weex
官方
Weex快速上手教程(Weex Tutorial)
https://github.com/weexteam/article/issues/4
#####################################################
思路
顺序：
无法FQ，几乎没有镜像
TypeScript 无法用npm和镜像安装
Angular2（官方推荐用 TypeScript）
问题
移动 node_modules 文件夹，源文件名太长
npm install -g rimraf 全局安装
cd xxx[include node_modules folder]
rimraf node_modules(这是文件夹)
使用的是npm里面一个专门用于删除的模块插件，看来这货不仅仅适用于gulp
官方描述：A deep deletion module for node (like rm -rf)
简单点说，就是模拟unix或者Linux下的rm -rf（强制删除命令）
可能无效：
- 360的粉碎工具
- 魔方的粉碎工具
- windows 内置命令
新技术，技术前沿
浏览器 Fetch ，不用XMLHttpRequest 对象，基于 Promise（不是库），不需要依赖第三方库
jQuery.ajax，是使用 XMLHttpRequest 对象来发送异步请求， jQuery ajax异步请求API 底层是使用XMLHttpRequest技术
也可以自己造轮子，封装XMLHttpRequest 对象相关API
Fetch 是浏览器提供的原生 AJAX 接口。使用 window.fetch 函数可以代替 jQuery.ajax 的 $.ajax、$.get 和 $.post。
浏览器帮你把 jQuery.ajax 给实现了，以后用 fetch 来发送异步请求，jQuery很多现代的网站里都不用了
Progressive Web App已经准备好迎接它的黄金时代。微软正考虑在其浏览器中添加Service Worker支持。而且，他们还遵循W3C Maifest创建了manifold.js，使开发人员可以开发跨平台和设备的托管应用。iOS也提供了一种创建“可主屏化（homescreen-able）”应用的方式
Progressive Web Apps /PWA
Google 发的一些视频讲这个, Manifest, Service Worker, Offline, 各种, 让 Web App 的体验能更接近原生应用:
之前有个东西叫 Application Cache，但是那货就是个 shit
#####################################################
Dart
编辑器无法连到外网升级 D:\Program Files\Dart\DartEditor.exe
Dart 的变量类型是可选的，叫做 static type annotations
#####################################################
JavaScript
实时更改浏览器里的任何页面的内容 所用的的 js代码 /编辑页面
document.body.contentEditable=\'true\';
（本质上是把body标签的contentEditable属性开启，置为true）
360安全浏览器 和 Chrome 支持
如图： 360安全浏览器里F12后，在console窗口里执行js代码：
或者
开发过程中，给 html 源代码的body标签的属性 添加contentEditable=\'true\'
给客户的页面要把这句去掉，即最终成品
建议用 js
用浏览器调试
在F12后，控制台里，输入方法名，不要括号，然后回车，会得到这段代码的一部分，鼠标单击后浏览器帮忙定位到那个 js文件，更新后
submitForm
#####################################################
Html5 H5 本地浏览器存储 数据库
浏览器数据库
IndexedDB API ---2016年8月 最新，web标准组织推荐的
360有web SQL 数据库，存进去的数据也是key-value这种形式
Web Storage (Second Edition)
W3C Recommendation 19 April 2016
#####################################################
jQuery EasyUI
jquery ajax 返回的是string类型，整个页面的html字符串
是基于jQuery的用户界面插件的集合
text() - 设置或返回所选元素的文本内容，不包括尖括号里的内容
html() - 设置或返回所选元素的内容（包括 HTML 标记<>这种符号）
val() - 设置或返回表单字段的值
(前端 等我工作后 , 看一下是否稳定 )
现阶段还在重复造轮子
ionic creator
Cordova.js 封装原生系统级API
PhoneGap打包
ionic即基于Angular2的框架 , 跨平台移动app框架
<script>只能写在<body>的最后一个标签
不能在<body>里的其他标签的前面Dojo 基金赞助
这是个基于web的设计界面的工具
http://maqetta.org/
###################################################################
Visual Studio 更新软件，要重装吗
https://www.visualstudio.com/zh-hans/
https://www.visualstudio.com/vs/
代号是15，正式名称可能是Visual Studio 2016
TypeScript 安装成功，但eclipse 插件安装失败
用TypeScript 做后端开发，有什么框架
用TypeScript 做后端开发，怎么搭配express框架
官方文档
http://www.typescriptlang.org/docs/tutorial.html
{
要先安装好TypeScript 和node JavaScript 运行时runtime
在cmd窗口里 进入项目所在的文件夹，叫 a
cd /d E:\TypeScript\a
新建 test.ts 文件，在里面编辑两行：（不涉及到html DOM，只是个cmd 命令行JavaScript 程序，所以不需要用浏览器提供的 js 运行时，用node的）
var strName:string="strName"; //strName 是string类型的
console.log(strName+" 是string类型的");
编译 .ts文件，生成 js 文件 --- test.js ，用 tsc 命令
tsc test.ts
运行 .js文件，不是 .ts文件。用node，不是用ts命令，没这种命令
node test.js
cmd 命令行窗口 输出
strName 是string类型的
}
tsserver是什么 TypeScript
所有TS的 （IDE / 编辑器）插件：
npm install -g [email protected]
成功：
cnpm install -g [email protected]
C:\Users\XiaoCong>tsc
Version 2.0.3
Syntax: tsc [options] [file ...]
Examples:
编译
tsc hello.ts
tsc --outFile file.js file.ts
tsc @args.txt
Options:
--allowJs Allow javascript files to be compiled.
--allowSyntheticDefaultImports Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
--allowUnreachableCode Do not report errors on unreachable code.
--allowUnusedLabels Do not report errors on unused labels.
--baseUrl Base directory to resolve non-absolute module names.
-d, --declaration Generates corresponding \'.d.ts\' file.
--experimentalDecorators Enables experimental support for ES7 decorators.
--forceConsistentCasingInFileNames Disallow inconsistently-cased references to the same file.
-h, --help Print this message.
--init Initializes a TypeScript project and creates a tsconfig.json file.
--jsx KIND Specify JSX code generation: \'preserve\' or \'react\'
[[email protected]] link C:\Users\XiaoCong\AppData\Roaming\npm\tsc@ -> C:\Users\XiaoCong\AppData\Roaming\npm\tsc
[[email protected]] link C:\Users\XiaoCong\AppData\Roaming\npm\tsserver@ -> C:\Users\XiaoCong\AppData\Roaming\npm\tsserver
[[email protected]] installed at node_modules\.typescript_npminstall\typescript\2.0.3\typescript (1 packages, use 3s, speed 823.92kB/s, json 7.19kB, tarball 2.65MB)
All packages installed (1 packages installed from npm registry, use 3s, speed 819.95kB/s, json 1(7.19kB), tarball 2.65MB)
TypeScript
Koa 无法下载
NodeJS
这个正常
SqlPad 可视化查询各种数据库，用图表显示出来 {
https://github.com/rickbergfalk/sqlpad
sqlpad --dir c:/sqlpad/ --port 3000 --passphrase secret-encryption-phrase
sqlpad --dir 存的目录 --port 3000 --passphrase 连接数据库的密码
晚点才指定要连接哪个数据库
sqlpad --dir E:/SqlPad/ --port 3000 --passphrase secret-encryption-phrase
刚开始要要邮箱注册一下
1
管理员:
root
1111
ping 192.168.57.30
MySQL配置，在浏览器里
192.168.57.30
默认端口号为：3306
jdbc:mysql://localhost:3306/数据库名? user=root&password=1111&useUnicode=true&characterEncoding=utf-8
registration 登记，注册
}
npm 临时使用远程仓库
npm install XXX -g --registry=https://registry.npm.taobao.org
--registry=https://registry.npm.taobao.org
设定仓库
设置成 淘宝npm镜像仓库：
npm config set registry https://registry.npm.taobao.org --global
然后
npm config list
确认网址被配置
npm config set disturl https://npm.taobao.org/dist --global
npm install -g <module-name>
npm install -g react-native
cnpm install -g react-native
全局安装模块的话 npm install -g <n>
C:\Users\XiaoCong\AppData\Roaming\npm
C:\Users\XiaoCong\AppData\Roaming\npm\node_modules
npm install [name]
npm工具默认是从国外的仓库里下载express （可以临时改， --registry=https://registry.npm.taobao.org
也可以改npm的的配置文件，我放在C:\Users\XiaoCong\.npmrc安装路径下，或者用npm config配置：
npm config list
npm config set registry https://registry.npm.taobao.org
npm info underscore
然后会很快冒出一大长串的东西，没有红色报错
里面会有;
userconfig C:\Users\XiaoCong\.npmrc
registry = "https://registry.npm.taobao.org/"
手动指定仓库的位置
npm install -g cnpm --registry=https://registry.npm.taobao.org
node -v
v4.5.0
npm -v
2.15.9
npm -v
卸载：npm uninstall -g express
安装 指定好的版本: npm install -g [email protected]
cnpm
cnpm install -g typescript
cnpm install express-generator -g
express express-generator1 ------用express-generator创建express-generator1项目，在当前路径 E:\React\express-generator1
cnpm install ---安装依赖
set DEBUG=express-generator1 & npm start
失败 create-react-app my-app
Creating a new React app in E:\create-react-app\my-app.
Installing packages. This might take a couple minutes.
Installing react-scripts from npm...
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "D:\\Program Files (x86)\\nodejs\\node.exe" "D:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "--save-dev" "--save-exact" "react-scripts"
npm ERR! node v4.4.7
npm ERR! npm v2.15.8
npm ERR! shasum check failed for C:\Users\XiaoCong\AppData\Local\Temp\npm-28664-680e4ff5\registry.npmjs.org\react-scripts\-\react-scripts-0.1.0.tgz
npm ERR! Expected: 400e97d5aac972485b190073b409278266f54869
npm ERR! Actual: b8466a71ebdd4b0a13468a524424238bd753cee1
npm ERR! From: https://registry.npmjs.org/react-scripts/-/react-scripts-0.1.0.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR! E:\create-react-app\my-app\npm-debug.log
`npm install --save-dev --save-exact react-scripts` failed
360浏览器里，下载第一个，
n ，管理npm的工具，比如升级后者
npm install -g n 失败
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "D:\\Program Files (x86)\\nodejs\\node.exe" "D:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "-g" "n"
npm ERR! node v4.4.7
npm ERR! npm v2.15.8
npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported
npm ERR! notsup Not compatible with your operating system or architecture: [email protected]
npm ERR! notsup Valid OS: !win32
npm ERR! notsup Valid Arch: any
npm ERR! notsup Actual OS: win32
npm ERR! notsup Actual Arch: x64
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\XiaoCong\npm-debug.log
失败 cnpm install -g n
[[email protected]](.\AppData\Roaming\npm\node_modules\n) unsupported: Package require os(!win32) not compatible with your platform(win32)
UnSupportedPlatformError: Package require os(!win32) not compatible with your platform(win32)
UnSupportedPlatformError: Package require os(!win32) not compatible with your platform(win32)
at _install (C:\Users\XiaoCong\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\install.js:146:19)
at next (native)
at onFulfilled (C:\Users\XiaoCong\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\node_modules\co\index.js:65:19)
失败？ cnpm install -g react-native
Get /binary-mirror-config/latest from https://registry.npm.taobao.org error: ResponseTimeoutError: Request timeout for 5000ms, GET https://registry.npmjs.org/binary-mirror-config/latest -1 (connected: true, keepalive socket: false)
headers: {}
at null._onTimeout (C:\Users\XiaoCong\AppData\Roaming\npm\node_modules\cnpm\node_modules\urllib\lib\urllib.js:653:13)
at Timer.listOnTimeout (timers.js:92:15)
[[email protected]](.\AppData\Roaming\npm\node_modules\.react-native_npminstall\cross-spawn\2.2.3\cross-spawn\node_modules\cross-spawn-async) deprecate: cross-spawn no longer requires a build toolchain, use it instead!
[[email protected]](.\AppData\Roaming\npm\node_modules\.react-native_npminstall\glob\4.3.5\glob\node_modules\minimatch) deprecate: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
[[email protected]] link C:\Users\XiaoCong\AppData\Roaming\npm\react-native@ -> C:\Users\XiaoCong\AppData\Roaming\npm\react-native
[react-native@*] installed at node_modules\.react-native_npminstall\react-native\0.30.0\react-native (662 packages, use 2m, speed 186.5kB/s, json 4.45MB, tarball 18.08MB)
excute post install scripts...
[[email protected]] scripts.postinstall: "node postinstall" at .\AppData\Roaming\npm\node_modules\.react-native_npminstall\spawn-sync\1.0.15\spawn-sync
[[email protected]] scripts.postinstall success, use 387ms
peerDependencies WARNING [[email protected]] in C:\Users\XiaoCong\AppData\Roaming\npm\node_modules\.react-native_npminstall\react-native\0.30.0\react-native requires a peer of react@~15.2.0 but none was installed
All packages installed (662 packages installed from npm registry, use 2m, speed 184.73kB/s, json 909(4.45MB), tarball 18.08MB)
MEAN
View Angular2
M MongoDB
C express
N nodejs 服务器端的js运行时 runtime
可选---s sail.js
MongoDB 3.2
MEAN Web开发
TP393.092.2/H625
MEAN Web Development
）
http://www.npmjs.org/ ， 没有被墙，但太慢了，要等一个晚上，而且很可能因为不稳定而中途断开
淘宝自己做的小工具：
cnpm用的是淘宝自己的“ 镜像 ”仓库（通过npm安装，仓库手动指定为淘宝的“ 镜像仓库 ”）。淘宝镜像仓库每10分钟和npm同步，更新一下
以后都用cnpm替代npm
也可以用npm，只是以后都手动指定仓库的位置
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g create-react-app 成功
C:\Users\XiaoCong>cnpm install -g create-react-app
[[email protected]] link C:\Users\XiaoCong\AppData\Roaming\npm\create-react-app@ -> C:\Users\XiaoCong\AppData\Roaming\npm\create-react-app
[create-react-app@*] installed at node_modules\.create-react-app_npminstall\create-react-app\0.1.0\create-react-app (16 packages, use 2s, speed 63.89kB/s, json 68.7kB, tarball 69.1kB)
All packages installed (16 packages installed from npm registry, use 2s, speed 62.95kB/s, json 17(68.7kB), tarball 69.1kB)
替代npm，用淘宝的
Express 单独
React 单独
用 Vue 写了一个知乎日报 web app http://www.tuicool.com/articles/maYnY3j
音乐播放器 AngularJS和Node.js
http://open.itcast.cn/front/3-432.html
#####################################################
IDE 所见即所得
Google Web Designer
GoogleWebDesigner
DreamWeaver 登录不了，而且要破解
#####################################################
Electron 连不上
范例 npm install XXX -g --registry=https://registry.npm.taobao.org
npm install --registry=https://npm.taobao.org/mirrors/electron/
npm ERR! fetch failed https://registry.npm.taobao.org/electron/download/electron-1.3.5.tgz
npm WARN retry will retry, error on last attempt: Error: getaddrinfo EAI_AGAIN cdn.npm.taobao.org:443
https://registry.npm.taobao.org/electron/download/electron-1.3.5.tgz
成熟的产品
在cmd的当前目录下创建 Electron1文件夹,--depth 1说明只拷贝最新版本，不用把旧版本也拷贝进来，版本控制
cd Electron1
npm install && npm start
弄了环境变量
以前叫 Atom-shell（为了开发Atom而开发出来的平台） ，后来被GitHub官方单独出来
被太太了，Node-webkit，国产的
Github发布了为桌面应用开发而生的 Electron 1.0版本 http://www.tuicool.com/articles/7jAbuey
#####################################################
Deco -React Native IDE 暂时只支持 Mac
开源
https://www.decosoftware.com/
#####################################################
WeX5 :
| V | C | M |
| .w | .js Tomcat?Node.js? | MySQL |
MySQL
有管理工具 , 但只用来创建数据库 , 表的设计和数据填写用IDE
标准Web服务器，可以是tomact、apache、nginx、IIS等任意web服务器
WeX5的调试运行环境（UIServer）
WeX5执行流程
.w 文件是什么时候被解析的？
论坛里说如果不需要服务器的话，可以不用。但这样谁来解析.w 文件？显然浏览器无法识别.w 文件，可能论坛里说的是错的
自带一个Chrome浏览器 , 封装过的
导入eclipse的设置
不出很想学了 , 因为用的似乎不是最新的技术
虽然可视化开发起来很快
#####################################################
React_Native 挑出来了，2个文件
#####################################################
SeaJS
一个遵循CMD规范的JavaScript模块加载框架
#####################################################
需要改进的地方 :
捕鱼app的教程不在百度云里
项目的文档结构怪怪的 , 感觉应该需要重新设计一下
视频的名字换一下
打包一下 , 整理到一个文件夹下 , 不然一个一个整合在一起麻烦 , 耗时间
文档开源到GitHub上 , 官方文档更新不及时就让大家辅助更新
Crosswalk is an app runtime based on Chromium/Blink.
Crosswalk是之前的webView的替代 , 更流畅 , 可以弄游戏了
mongodb
body-parser
正经事儿就找 图灵机器人，想扯淡瞎聊就找小黄鸡。
别急着写代码
放弃WebView，使用 Crosswalk 做富文本编辑器
原生的
国内的
星期一的交流一下
ASP.Net WebForm
选择IDE
是不是真的是ionic
ionic Phonegap Cordova Angular关系
设备api：采用业界主流Phonegap/Cordova
后端：标准协议，支持所有主流技术和平台
（java、node、php、.net等）
要项目
NDK
图形
自己的路由器的产品
需要设置页面,用户不限制
web app
没有足够的人手搞混合,只能自己搞
Registry url: https://registry.npmjs.org/
Path to npm: D:\Software\Node.js\npm.cmd
Downloading package cache to C:\Users\Administrator\AppData\Local\Microsoft\Node.js\Tools\NpmCache\21dd91b0-4f32-449a-ab4e-bff350c38106\all_packages.json
WeX5跨平台原理 : 本机API Framework采用phonegap(cordova)框架
WeX5采用混合应用（hybrid app）开发模式, UI体系完全基于w3c的html5+css3+js；引入jquery和bootstrap并对移动做了极致优化，效率极高
有基于eclipse的自定义IDE
dreamsxin/WeX5 "起步软件公"司
http://git.oschina.net/X5OK/WeX5
#####################################################
PowerCmd_2.2_增强绿色版
PowerShell win7自带的cmd增强工具 , 但不够好用 , 没有关键字联想
注册码 :
PCMDA-NNZNV-ZNVNN-CADPM
PCMDA-8CYLA-Y8ACL-CADPM
#####################################################
请发表评论