[VueJsDev] 快速入门 - 开发前小知识
[VueJsDev] 目录列表
https://www.cnblogs.com/pengchenggang/p/17037320.html
开发前小知识
::: details 目录
- 开发前小知识
- Step. 1: 打开 Github
- Step. 2: 解决跨域问题
- Step. 3: Node.js 环境安装
- Step. 4: vscode 开发软件安装
- Step. 5: 蓝奏云
- Step. 6: 前端面试题库
- Step. 7: git 环境安装
- Step. 8: Nginx 环境安装
- Step. 9: Nexus npm私仓
- Step. 10: MobaXterm1_CHS1 SSH客户端
- Step. 11: php study 环境安装
- Step. 12: Sourcetree gitGUI
- Step. 13: Navicat 数据库连接
- Step. 14:
draw.io
画图软件 - Step. 15: hotkeyp 快捷键
- Step. 16: Rolan 1.1.3 快捷方式启动
- Step. 17: java8 环境安装
- Step. 18: Maven3 环境安装
- Step. 19: apache-tomcat-8.5.8
- Step. 20: Everything 本地搜索
- Step. 21: python3 环境安装
- Step. 22: 向日葵远程控制
- Step. 23: VM虚拟机 VMware
- Step. 24: IDEA
- Step. 25: Aardio 开发环境
- Step. 26: Xmind 思维导图
- Step. 27: 幕布 大纲模式
- Step. 28: onenote2016
- Step. 29: Obsidian
- Step. 30: Typora
- Step. 31: OBS 录课直播
- Step. 32: Captura 录屏工具
- Step. 33: 剪映 专业版
- Step. 34: Android Studio 开发环境
- Step. 35: Axure RP 9 原型设计
- Step. 36: apifox api测试工具
- Step. 37: snipaste 截图工具
- Soft. 38: Notepad2 简体中文记事本
- Serv. 39: 禅道 - 项目管理软件
- Serv. 40: gitLab - git代码平台
- Serv. 41: onlyOffice
- Proc. 42: 过程回溯
:::
作为开发 Github 是要必须的学习的,那么第一步就是要可以访问。
::: tip 小提示
很多时候你就差一个关键字而已~ :)
:::
Step. 1: 打开 Github
Github一般情况下是打不开的,所以一定要先攻克这个,这里推荐用软件的方式,比较省心。
- 方案1 FastGithub.UI https://www.cr173.com/soft/670733.html
- 方案2 hosts https://raw.hellogithub.com/hosts
- 方案3 购买vpn 具体名称这里就不提了。
Step. 2: 解决跨域问题
很多时候,你会遇到莫名的跨域问题,有时候后台报错也会显示前台跨域,导致也不知道是不是真的跨域。
解决方案
- 安装 双核浏览器 最新的chrome已经不支持跨域设置
chrome://flags/#same-site-by-default-cookies
设置 Disabledchrome://flags/#enable-removing-all-third-party-cookies
设置 Disabled- 如果你是多站点,使用Nginx,使其变成一个域,我的配置文件还有代理中转后台。
::: details Nginx 配置文件代码
# nginx-authenticate.conf
server {
listen 8888;
server_name localhost;
location /siteName {
# 这种方式 访问时候要用ip调用 不要用localhost 要不会显示跨域
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'POST,GET,OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Authorization'; #跨域设置
# proxy_pass http://192.168.111.111:9090/sitename-api/; # 后台人员名称
proxy_pass http://192.168.111.112:9090/sitename-api/; # 后台人员名称2
}
location /siteName2 {
proxy_pass http://127.0.0.1:5001/siteName2/;
}
location /siteName3 {
proxy_pass http://127.0.0.1:8080/siteName3/;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
:::
4. 后台请求头设置跨域代码,这样前后台就打通不跨域了。后台处理好option请求,不要报错。
header("Access-Control-Allow-Origin","源地址";
header("Access-Control-Allow-Credentials", "true");
// 这里 源地址 不能是*,可以设置成 谁请求你,你就设置成他的地址
- 如果后台需要session,前台请求的axios设置
withCredentials: true
,发送请求自动携带cookie。
java 携带session 前台传递cookie 跨域解决方案 vue + java
::: tip 如果这个时候还发生跨域
当你发现,某个接口,或某几个接口跨域,其他接口不跨域,基本上就是后台代码发生错误导致。
:::
Step. 3: Node.js 环境安装
学习前端 先安装下node环境
- https://nodejs.org/zh-cn/ 选择 长期维护版 安装一下即可。
npm -v
Step. 4: vscode 开发软件安装
开发软件选择的ide,这里是vscode
vscode 不适合java的开发,java开发用idea
- https://code.visualstudio.com/Download 选择 64bit的 安装一下即可
Step. 5: 蓝奏云
如果有一些免费共享的软件,可以上传到这里
Step. 6: 前端面试题库
Step. 7: git 环境安装
代码仓库环境 早些年还有svn,现在都改成git了
- http://git-scm.com/downloads 下载安装下即可
Step. 8: Nginx 环境安装
这是一个绿色软件 解压即可使用
- http://nginx.org/en/download.html 下载 nginx/Windows-1.23.1 安装即可
Step. 9: Nexus npm私仓
解压运行 启动服务
- https://pan.baidu.com/s/1EoaesjSZDKdLflCVlN_dOg 提取码: 52jc
- npm nexus 私服搭建使用(本地)
- Nexus npm 搭建私有仓库 很好很强大 nrm electronjs
Step. 10: MobaXterm1_CHS1 SSH客户端
SSH客户端 每日必备
- https://wws.lanzoul.com/ihPjM0blkwni 密码:8cz1 这个自己下载吧,安装即可
Step. 11: php study 环境安装
这个软件 可以快速搞定mysql数据库
- https://www.xp.cn/ 选择windows版本 安装即可
Step. 12: Sourcetree gitGUI
一款git可视化工具 每日必备
Step. 13: Navicat 数据库连接
一款数据库连接可视化软件
- 下载:https://wws.lanzoul.com/iAiUq0bllfqf 密码:5pya
- 补丁忘了是不是这个了,先安装程序,如果不用装补丁,就不装了。
Step. 14: draw.io
画图软件
推荐vscode插件用
- https://app.diagrams.net/ 在线 软件打开 或者 vscode插件
Step. 15: hotkeyp 快捷键
设置全局快捷键 我习惯有 Alt+小键盘+ 等
- 下载:https://wws.lanzoul.com/iti5r0bllmub 密码:3409 安装即可
Step. 16: Rolan 1.1.3 快捷方式启动
我习惯设定 Alt+1 显示
这个版本比较老,但是新版收费了
Step. 17: java8 环境安装
搜 jdk-8u271-windows-x64.exe 进行安装
Step. 18: Maven3 环境安装
java的库,和npm一个意思
- https://www.baidu.com/s?wd=Maven3 自己找下,安装即可
- 这个Maven3 我这不到2G 我就不传了
Step. 19: apache-tomcat-8.5.8
这个属于非常常用的java环境 必备
- 下载:https://wws.lanzoul.com/ihiUD0blly6j 密码:2k4a 安装即可
Step. 20: Everything 本地搜索
这个我的习惯设置 alt + Num0 为快捷键
Step. 21: python3 环境安装
python3.9脚本还是会经常用到,麻烦的是和别人的python2.7脚本切换环境
- https://www.python.org/downloads/ 如果打不开就换个下载地址
- 菜鸟教程:python3基础教程
Step. 22: 向日葵远程控制
有时候会需要远程帮助,这个软件非常有用。
- https://sunlogin.oray.com/ 下载安装即可
Step. 23: VM虚拟机 VMware
VMware Workstation Pro V15.0.0 为了这个软件,16G都不够,最好32G内存起步
- VMware Workstation Pro V15.0.0
::: tip 坑中回忆
装centOS的时候,vm启动系统总是崩溃,最后换了个镜像,ok完美安装了,所以有时候是镜像的问题。
:::
Step. 24: IDEA
这个本来应该不放这么靠后的,现在顺序也就这样了
Step. 25: Aardio 开发环境
windows 开发exe的IDE,我非常喜欢~
- https://www.aardio.com/ 下载安装即可
Step. 26: Xmind 思维导图
这个思维导图软件足够用了
- https://www.xmind.cn/ 下载安装即可
Step. 27: 幕布 大纲模式
大纲模式 最好用的软件,300个免费节点 够用了
- https://mubu.com/apps 下载安装即可
Step. 28: onenote2016
这是一个本地的记事本软件,我不喜欢在线的
Step. 29: Obsidian
如果写本地文档 这个够用了,关键能插入图片和显示标题
- https://obsidian.md/ 下载安装即可
Step. 30: Typora
markdown 写作利器,可以自己找找老版本的用
- https://typoraio.cn/ 注意:官方收费了
Step. 31: OBS 录课直播
颠覆录屏的软件,强大到没朋友,关键还免费
- https://obsproject.com/ 下载安装即可
Step. 32: Captura 录屏工具
Captura屏幕录制含ffmpeg 主要有区域录制
- 下载:https://wws.lanzoul.com/iqDrS0b2owoj 密码:6toy
Step. 33: 剪映 专业版
想当年PR AE C4D, 如今 剪映 竟然破局了~ 夸张了 😃
- https://lv.ulikecam.com/ 下载安装即可
Step. 34: Android Studio 开发环境
React Native 开发安卓软件用到的环境
Step. 35: Axure RP 9 原型设计
产品画原型图,用这个软件
- 外链:https://wws.lanzoul.com/b03paemkf 密码:dmvj
Step. 36: apifox api测试工具
同类产品还有 postman apipost
Step. 37: snipaste 截图工具
这个F3贴图功能实在是太帅了,比微信的截图强调~ 感谢同事 _BugMaker 的分享
Soft. 38: Notepad2 简体中文记事本
这个记事本非常好,替代windows默认记事本
Serv. 39: 禅道 - 项目管理软件
服务器软件 产品和你的沟通桥梁 甩锅神器
Serv. 40: gitLab - git代码平台
服务器软件 linux软件
ce表示开源
el表示centos 选64位
el6对应CentOS 6
Serv. 41: onlyOffice
服务器软件 简单易懂 就是线上的office 感觉产品用的更多一些
- https://github.com/ONLYOFFICE/CommunityServer
docker network create --driver bridge onlyoffice
docker安装- 搭建团队文档协作平台(OnlyOffice)
Proc. 42: 过程回溯
这里是我电脑上对于开发来说常用到软件,当然还有制作视频等其他的爱好,有些软件就没提现在这里。
::: tip 其他常用软件
软件:PS AI AE PR AU C4D 石墨文档 格式工厂 Delphi7 Lantern Notion TortoiseSVNVisual Studio 2017
postmaniMindMap 10
向日葵 火狐 火柴(两次ctrl)
:::
::: tip 之前叫做复盘总结
因为自己没有办法给自己复盘,复盘只能从第3方无利益角度给你复盘,指出相应的问题和提升的空间。
:::
后期再想到什么,再加到这个列表里来吧 20220830
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)