1 一、git bash here
2 mdkr
3 cnpm init -y
4 ls -a
5 ls -l
6 ls -la隐藏的也可查看
7 cat package.json
8 二、npm
9 npm i webpack-dev-server -g
10 全局：任何目录运行
11 本地：本地需要调用附带的插件
12 npm list
13 npm list -g
14 npm uninstall supervisor -g 全局删除
15 npm remove supervisor -g全局删除，彻底卸载，再安装
16 npm i supervisor --save-dev||-D 开发依赖：项目上线不需要的，例如：babel、webpack
17 npm i jquery -S项目依赖-----dependencies
18 奇数非稳定版本
19 cnpm info jquery
20 升级---直接修改配置文件
21 cnpm update
22 ^表示第一个版本号不变后面取最高
23 ~表示第一第二个约定好
24 *取最新版本
25 --------------------------------版本升级问题：删除后修改json，在安装，mac上可能可以
26 npm outdated
27 rm -rf强制删除所有
28 npm cache clear清除缓存安装
29 nrm ls npm源
30 nrm test
31 nrm use taobao ----切换源
32 npm脚本
33 npm run dev
34 三、git工具
35 本地仓库
36 远端仓库-remote
37 gitLab/github---ssh
38 主干发布、分支开发
39 -----------------配置远程库---------------------------
40 gitignore----不上传服务器的文件夹
41 git config --global user.name
42 git config --global alias.ci commit----- 起commit别名ci
43 ---------------clone下来-------------------
44 git clone ssh/https-----https公开自己代码
45 git st状态
46 ---------------查看状态run起来----------------------------------------
47 git add .
48 git ci -am "asds"添加
49 git push
50 .........................创建分支..................................
51 git branch
52 git branch name创建分支不切换
53 git checkup -b name-2017-0223-bao-bugfix
54 git co -b name-2017-0223-bao-bugfix创建分支并切换
55 修改文件
56 git ci -am "adsd"
57 git push --set-upstream origin name分支上传
58 ----------------------merge获取其他分支----------------------------------
59 在本地创建多个分支
60 git branch -r显示远端分支
61 open index.html
62 git co master------------主分支提交master
63 git merge origin/name 分支提交后在master上merge，master与分支合并做修改，保存本地库
64 git ci -am "merge-name"
65 git push发布
66
67 git log查看历史版本
68 $ git reset --hard 3628164
69 ---------------------merge master-----------
70 其他分支与master同步
71 git checkout master----切换分支到master执行
72 git pull----即可完成master更新同步
73 git merge master??
74 git rebase master-----保持与本地一致
75 用rebase合并主干的修改，如果有冲突在此时解决
76 ---------------------------------------------------
77 git br -a可看到远端所有分支
78 clone后新创建的分支拿到本地仓库方法：
79 git fetch origin newname
80 git br
81 git co newname
82 git br-----即可拿到
83 open index.html
84 --------------------------
85 权限设置
86 Collaborators：添加Add collaboator
87 --------------总结----------------------
88 管理员merge----开发人员pull即可看到项目进度！
89
90
91 三、***********************webpack*************************
92 1、commonJS
93 2、require(‘./name‘),斜杠-----本文件夹
94 require(‘name‘),-----node_modules里
95
96 ***********************布局*************************
97 build--------编译后发布代码文件夹
98 src-------------开发文件夹
99 |---component_dev-------
100 |---script-------js
101 -----|---app.js
102 -----|---component---组件
103 -----|---redux
104 |----store.js
105 |---index.js
106 |---style---------css
107 |----index.ejs------模板改变也会生成新的hash值
108 <title><%= htmlWebpackPlugin.option.title%></title>
109 index.html
110 package.json
111 webpack.config.js
112 .git
113
114 css、js、html，其他例如第三库CDN
115 img呢？服务器？
116 ***********************webpack.json*************************
117 ‘script‘:{
118 "build":webpack-dev-server
119 }
120 ***********************webpack.config.js*************************
121 后端拿到html
122 前后端两个域名？run到一起
123 var webpack=require(‘webpack‘)
124 var htmlWebpackPlugin=require(‘html-webpack-plugin‘)--------引入插件
125 var ExtractTextPlugin=require(‘extract-text-webpack-plugin‘)
126 var openBrowserPlugin=require(‘open-browser-webpack-plugin‘)
127 mudule.exports={
128 entry：{--------------可单页面入口。可多入口文件
129 page1:‘./src/app1.js‘,
130 page2:‘./src/app2.js‘
131 },
132 output:{----------------js文件和其他生成的文件
133 path:__dirname+‘/build‘,------__dirname物理路径，后面build没有点，
134 //filename:‘app_[hash].js‘---上线用
135 filename：‘app.js‘---开发用
136 //filename:‘[name]_[hash].js‘-----------生成多个js
137 },
138 devServer:{
139 contentBase:‘./build‘-----------访问目录下的index.html--把index.html放到build里
140 host:"localhost"---------域名
141 port：‘9000‘----端口
142 historyApiFallback:false -------------是否使用H5的historyApi
143 proxy:{-----------代理
144 ‘/api‘:{----------------有api即认为访问后端，例如‘/api/list.php‘
145 target:‘http://localhost:3000‘---地址栏有/api即跳到：3000
146 pathRewrite:{‘^/api‘,‘‘}------------干掉‘./api‘
147 changeOrigin:true---------------------跨域，非本地跨域
148 }
149
150 }
151
152 },
153 module:{
154 loaders:[
155 // {-->非抽离声明
156 // test:/\.css$/,------css打包到js
157 // loader:‘style-loader!css-loader‘
158 // },
159 {
160 test: /\.css$/,
161 loader: ExtractTextPlugin.extract({
162 fallback: ‘style-loader‘,
163 use: ‘css-loader‘
164 })
165 },
166 // {
167 // test:/\.scss$/,------css打包到js
168 // exclude: /node_modules/,--------------刨除哪个!!!
169 // loader:‘style-loader!css-loader!sass-loader‘
170 // }, -->非抽离声明
171 {
172 test:/\.scss$/,
173 loader:ExtractTextPlugin.extract({--------抽离声明
174 fallback:‘style-loader‘,------------------------解析最后一个loaderextract,这个案例是style，解析的是css
175 use:‘css-loader!sass-loader‘----------------不要重复声明style-loader
176 })
177 },
178 {
179 test: /\.js$/,
180 exclude: /node_modules/,--------------刨除哪个!!!
181 loader: ‘react-hot-loader!babel-loader‘---------------react热替换，厉害了
182 }
183 ]
184 },
185 plugin:[
186 new htmlWebpackPlugin({--------------html文件自动生成插件实例化，有自己的默认模板
187 filename:‘index.html‘,-----------------输出的文件名，会生成带有hash值的js
188 template:‘./src/index.ejs‘,------------模板文件
189 title:‘豆瓣电影‘
190 }),
191 new ExtractTextPlugin({-------------------解析抽离css并会在index.html加link标签
192 filename:‘app_[hash].css‘,----------------可加版本号
193 disable:false,-------true关闭
194 allChunks:true---------------入口文件
195 }),
196 new webpack.optimize.UglifyJsPlugin({
197 compress:{----------------压缩，最后上线需要一次
198 warning:false-------是否显示错误信息，false不显示
199 },
200 output:{
201 comments:false----------是否需要注释，false不需要
202 }
203 }),
204 new openBrowserPlugin({ url: ‘http://localhost:8080‘ })------------------webpack 启动后自动打开浏览器插件!!!!1!!厉害了
205 ],
206 externals:{------------------抽离js第三方类库
207 "react":"window.React",----------配置后不会打包react，手动打包即可,包特别大
208 "react-dom:"window.ReactDOM"
209 "react-router":"window.ReactRouter"
210 "redux":"window.Redux"
211 ‘react-redux‘:‘widow.ReactRedux‘
212 }
213 }
214
215 ELEMENT解析与源码不同
216 源码---是后台ng、rg之后的
217
218 css/js版本控制，服务器缓存原来版本----回滚---使用构建工具
219 哈希值hash-----根据内容算法生成来css、js控制版本
220
221 npm install html-webpack-plugin---------------------html自动生成插件
222 npm i sass-loader -D
223 npm react-hot-loader -D---------------------react热替换
224 npm i babel-preset-react -D----------------react预设
225 npm i extract-text-webpack-plugin -D-----------------抽离文本插件
226 npm i react-dom -S--------------项目依赖
227 npm i open-browser-webpack-plugin---------------
228 require---Es5
229 import from ---Es6
230
231 1、const Index=‘sd‘
232 export {Index}
233 import {Index} from index.js
234 2、const Index=‘sd‘
235 export {Index as defult}
236 import Index from index.js---------------Index花括号就不用了
237 ***********************babel编译器安装*************************
238 babel-core---------------babel-loader调用
239 babel-loader------------编译
240 babel-preset-es2015 -D-----------编译es6
241
242 react-hot-loader!babel-loader----------------------react热替换
243
244
245 ***********************babel*************************
246
247 jsx------babel解析,webpack直接可以识别Es6语法，不过jsx还是需要babel来解析,babel还可以解析Es7位es5
248
249 {
250 "preset":["es2015","react","stage-0"]
251 }
252 ***********************packge.json*************************
253
254 "babel-polyfill":"^6.23.0"---------------------低版本andrio不支持则降低版本，很重要！！
255 四、***********************mock数据*************************
256 npm i json-server -g-----------安装
257 json-server src/mock.js--------启动服务，启动mock.js文件
258 mock.js
259
260 var list = require(‘./list.json‘)
261 module.exports = function() {
262 return {
263 ‘list.php‘: list
264 }
265 }
266 访问localhost：3000
267
268 在fetch里fetch("/api/kind2.php").then(res=>res.json()).then(res=>{})
269 --------------------------------
270 componentDidMount() {
271 fetch(‘/api/list.php‘)
272 .then(response=>response.json())
273 .then(res=>{
274 // console.log(res);
275 this.setState({
276 name: <div>{res.name}</div>
277 })
278 })
279 }
280
281 五、reset.css公共样式
282
283
284
285 六、搭建页面结构
286 andriod
287 ios
288 woff、ttf-------------多次设置font-face会merge并不会覆盖
289 //CDN简写
290 @font-face{
291 font-family:yofont;
292 src:url(/icofont/iconfont.woff) format("woff"),
293 url(/iconfont/iocnfont.ttf) format(‘truetype‘)
294 }
295 1像素线、、、、、、、、、、、、、、、
296 空元素相对定位
297 伪元素：绝对定位
298 根据dpr缩放
299 七、react-router
300
301 "react-router": "^3.0.2"--------------用4.0版本会没有ReactRouter.min.js,引用react-router.min.js会报Cannot read property ‘location‘ of undefined
302 引用ReactRouter.min.js
303
304 react-router.min.js-------------一般用后端开发
305
306 <Link to=‘‘/>
307 <Router>
308 <IndexRoute component={}/>
309 <Route path=‘‘ component={}/>
310 </Router>
311 抽离后要在ejs里引文件，否则找不到
312 父组件获得子组件的参数------------------
313 子组件通过this.props.onClickHandler.bind(this,"abc")
314 -------------onClickHandler是父组件定义的方法，abc是子组件的参数，通过函数传给父组件
315 也可以-----------子组件设置this.state={data:‘abc‘},,父组件在设置ref="abc"，在ditmount中this.refs.state.data
316 子组件获得父组件的属性方法----------父组件设置属性与方法，子组件this.props.name获得
317 八、API
318 mock数据
319 share.baidu.com----------------------百度分享
320 mern----------------------react-cli
321 九、组件YO
322 npm i babel-preset-stage-0 -D
323 十、redux
324 onEnter事件可以检测路由切换
325 组件渲染从内向外
326 Didmountupdate中也可以检测路由切换
327 Index中包含自己及切换的子路由
328 cnpm i react-redux -S
329 *************************************十、redux***********************************************
330 拷贝redux，react-deux
331 ejx要添加
332 connect ----------react-redux
333 connect(mapStateToProps,mapDispatchToprops)(Index)
334
335
336 路由
337 引入{Provider}
338 {store}
339 <Provider store={store}>
340
341
342
343 </Provider>
344 某个组件状态需要共享
345 某个状态需要在任何地方都能拿到
346 一个组件需要改变全局状态
347 一个组件需要改变另一个组件的状态
348 **************************************YO框架**********************************************
349 base:设置html里的font-size--------------------YO框架以640的iphone5做的，
350 iphone6,1vw=0.26666666px=100/375
351 **************************************history*************************
352 browserhistory:h5的，浏览器就不会有#了
353 browserhistory.goBack();goFoward()
354 改用browserhistory,用事件定义跳转，hashhistory Link方法就不适用了
355 ******************************路由传参***************************************
356 path="/list/:type"-------------设置动态路由
357 取type方法：this.props.params
358 ************************touch-action**************************
359 touch-action:none
360
361 手机里无webpack，无法调用线上数据
362 1、放json里，
363 2、放服务器，装ngix，方向代理
364 3、放数据库。
365
366
367 ************************nginx**************************
368 http://nginx.org/en/download.html下载地址
369 homebrew安装moc ------------
370
371
372 start nginx
373 nginx -s stop
374
375 gzip on压缩传输
376 pwd
377
378
379 nginx的使用
380 1、修改conf/nginx.conf
381 把nginx.conf里的server下的全部注释掉，（35-79行）
382 把gizp on解注释，添加 include ../conf.d/*.conf;
383 2、建conf.d文件夹，建工程名的配置文件，配置如下：
384 server{
385 listen 80;----一般都是80
386 server_name localhost;
387 root E:/lianlianLife/dev/build;
388 }
389 3、启动nginx，访问localhost即可
390 ************************nginx**************************
391 ************************前后端联调**************************
392 Postman
393
394 HostAdmin App----C:\Windows\System32\drivers\etchosts-------host文件位置
395 127.0.0.1 ----------- localhost-------域名解析--先走本地
396 ip计算识别，一个ip可以有多个域名
397 如何清除DNS缓存
398 src="http://www.douban.com/libs/"------index.html配置
399 ping www.baidu.com得到网页ip
400 ip+域名设置--------------得到远端
401 ipconfig/flushdns-----------刷新DNS解析缓存
402 跨域：
403 cors、
404 jsonp
405 window.name
406 nginx方向代理
407
408 location /api{
409 proxy_pass http://localhost:3000
410 }
411
412 modal---组件
413 stuo nginx
414 nginx杀掉进程的方法----taskkill /fi "imagename eq nginx.EXE" /f，可以杀死名字为
415 nginx.EXE的所有进程
416 http://www.cnblogs.com/CoreXin/p/5566607.html
417
418
419 http://blog.csdn.net/u010977147/article/details/53489160l两个参数解决
时间： 2024-08-04 05:23:43