开发环境/开发工具

安装maven手动安装到自定义位置(推荐)maven wrapper强制下载到C盘固定位置配置环境变量查找依赖的顺序%M2_HOME%/conf/setting.xml指定的本地maven仓库%M2_HOME%/conf/setting.xml指定的远程镜像仓库远程maven中心仓库从远程库下载的依赖，会存放到本地maven仓库项目结构targetclassessrcmainjavaresourc

日常充电

464人浏览 · 2023-10-03 18:54:00

日常充电 · 2023-10-03 18:54:00 发布

VSCode

操作栏

顶栏-配置运行模式

常用一：浏览器运行
常用二：nodejs运行

顶栏-运行

调试模式运行
非调试模式运行

侧栏

在文件夹中查找

底栏

设置setting

总体结构

设置命令行光标

收起所有文件

代码片段

React

{
	"React Function Component": {
		"prefix": "react",
		"body": [
		  "import React from 'react';",
		  "",
		  "export default function() {",
		  "  return (",
		  "    <div>",
		  "      $0",
		  "    </div>",
		  "  );",
		  "}",
		  "",
		],
		"description": "React Function Component"
	  }
}

Vue

{
	"Vue Base Component": {
	  "prefix": "vue",
	  "body": [
		"<template>\n",
		"</template>",
		"",
		"<script setup lang='ts'>\n",
		
		"</script>",
		"",
		"<style scoped lang='scss'>\n",
		"</style>"
	  ],
	  "description": "Vue Base Component"
	}
}

插件

Chinese (Simplified)：简体中文插件
Live Server：开启服务器代理HTML文件
Markdown Preview Enhanced：markdown编辑器

Volar

TS和JS版本

TypeScript Vue Plugin (Volar)
Vue Language Features (Volar)
使用JS编写Vue时，要及时关闭TS版本的Volar并重新加载

配置文件一jsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

配置文件二tsconfig.json

{
    "compilerOptions":{

        //ES版本：ES5,ES2015(ES6),...,ES2021,...,ESNext(最新版本的术语)
	    "target": "ESNext",

        //ES6之前的非标准模块化方案：CommonJS、AMD、UMD
	    //ES6推出：import模块化规范
		//ES9推出：动态import
	    "module": "ESNext",
        "moduleResolution": "Node",                 //模块查找策略
        "allowSyntheticDefaultImports": true ,       //支持import的默认导入导出

	    "lib": ["ES2020","dom","dom.iterable"],          //ts文件中支持的库
        
        //baseUrl是，paths[别名]的前缀
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        },

	    "outDir": 路径,                              //编译文件输出目录
        "removeComments": true,                      //移除注释
        "sourceMap": true,                           //生成sourceMap文件
        "noImplicitAny": true,                       //不允许隐式声明变量
        "preserveConstEnums": true,                  //枚举常量依旧以常量的形式存在
        "composite": true                           //用了可以优化性能
    }

    "include": [路径1,路径2...],                     //编译的哪些ts文件
    "references": []                                //引入其他tsconfig.json文件
}

src/**/*：/*表示任意文件；/**表示任意目录

vite-env.d.ts

//处理typescript编译器无法识别.vue文件的问题
declare module "*.vue" {
  import { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
}

gitlen

每行代码的具体作者和修改时间

分支对比

快捷键

Ctrl+P：显示所有编辑器
Ctrl + Shift + P：显示所有命令、同时可以根据文件名搜索文件
tab作用1：向前移动一个制表符
tab作用2：代码片段自动补全时，移动到下一个自主定义处
shift tab：向后移动一个制表符

浏览器

运行JS代码

页面的JS代码组成	源代码的片段、内容脚本页面HTML中的脚本控制台的代码
三种JS代码作用域	范围相同
日志打印位置	控制台
控制台JS代码	多条语句用";"分隔会打印最后一个表达式的值
源代码的片段	会打印最后一个表达式的值

源代码

页面：当前页面的代码，能打断点进行调试
片段：自主编写JS脚本，能操作当前页面的DOM元素
内容脚本：插件脚本，能操作所有页面的DOM元素

元素

选择DOM元素
修改CSS样式
使用浏览器取色器
移动模式和PC模式互换

控制台

查看各种级别的打印输出

应用程序

查看LocalStorage仓库、SessionStorage仓库、Cookie仓库、IndexedDB非关系数据库

网络

浏览器自带的抓包工具

查看网络请求的请求头，请求体，响应头，响应体

录制

录制内容1：鼠标事件、键盘事件、触屏板事件
录制内容2：路由跳转的录制
录制本质：通过js脚本实现操作复现

快捷键

ctrl+f：关键字搜索
ctrl+h：历史记录页
ctrl+j：下载内容页
ctrl+shift+s：截图
ctrl+shift+b：显示或隐藏书签页
F12：开发者工具
F11：开启或关闭全屏模式
F5：页面刷新
有链接的文字：可以通过右键复制其链接

设置开发者工具位置

把控制台放到下左右，或者单独开一个窗口

常用插件

WebTab-AI新标签页
Vue.js devtools
React Developer Tools
PostWoman Http接口调试插件
FeHelper(前端助手)

VS Installer

安装VS Community

采用默认安装位置

VS Installer：C:\Program Files (x86)\Microsoft Visual Studio\Installer

vs编辑器按 0/ins 键切换光标形状

VMware workstation 16

安装VMware

问题一

安装时不输入密匙
接下来的操作会遇到下面情况

解决方案

将VMware workstation卸载，重新安装时输入密匙
密匙有：可以自己查阅

虚拟机属性

配置虚拟网络

所需镜像下载

windows镜像：前往windows官网
centos镜像：前往centos官网
ubuntu镜像：前往ubuntu官网

DBeaver

运行SQL脚本

问题一

public key retrieval is not allowed

snipaste

F1截图
截图完成后，可以贴图、保存、标注
鼠标滚动可以放大或缩小贴图
Ctrl+鼠标滚动可以增减贴图的透明度

Android Studio

安装位置

默认位置：C:\Program Files\Android\Android Studio

android sdk

默认位置：C:\Users\Administrator\AppData\Local\Android\Sdk

gradle user home位置

位置：C:\Users\Administrator\.gradle

作用1：存储gradle wrapper安装的各版本gradle

环境变量

ANDROID_HOME=C:\Users\Administrator\AppData\Local\Android\Sdk
JAVA_HOME=C:\Program Files\Android\Android Studio\jbr
Path=%ANDROID_HOME%\tools
Path=%ANDROID_HOME%\platform-tools
Path=%JAVA_HOME%\bin
Path=%GRADLE_HOME%\bin

安装模拟器

打包App

模拟器网络

10.0.2.2是网关IP，同样也是本地计算机在模拟器网络中的IP
模拟器的DNS要与本地计算机连接wift的DNS保持一致，才能正常进行域名解析

调试app上的WebView

nvm&npm&node

联系

nvm管理多个nodejs
一个node版本对应一个npm
C:\Users\Administrator\.npmrc是npm的全局配置文件
.\npmrc中可以配置全局安装库目录、第三方库镜像

nvm的功能

下载指定版本的nodejs
切换nodejs版本

配置nvm

配置环境变量NVM_HOME为D:\proSofts\nvm
配置环境变量Path为D:\proSofts\nvm，nvm指令在D:\proSofts\nvm目录下
配置环境变量NVM_SYMLINK为D:\proSofts\nvm\nodejs，NVM_SYMLINK是当前版本nodejs的软链接
配置环境变量Path为D:\proSofts\nvm\nodejs，node指令在软链接D:\proSofts\nvm\nodejs下
nvm指令会读取配置文件%NVM_HOME%\setting.txt的root，把nodejs安装到root目录下，由于win10实现nodejs切换需要用到root\elevate.cmd，并且elevate.cmd默认在%NVM_HOME%目录下，所以root的值通常等于%NVM_HOME%

nvm配置文件

root: D:\proSofts\nvm
arch: 64
node_mirror: http://npmmirror.com/mirrors/node/

nvm的使用

nvm list available&&win10 ：能下载的远程nodejs版本
nvm ls-remote&&Ubuntu：能下载的远程nodejs版本
nvm list：已下载的node版本
nvm current：当前node版本
nvm use 版本号：切换到指定版本
nvm install 版本号：下载指定版本
nvm uninstall 版本号：卸载指定版本

npm全局配置文件

prefix=D:\proSofts\nvm\npm_global npm全局安装目录

cache=D:\proSofts\nvm\npm_cache npm缓存目录
registry=http://registry.npmmirror.com/ npm镜像(优先级高)

python=D:\proSofts\python\3

查看npm全局配置文件：npm confg ls
查看npm全局安装目录：npm config get prefix
设置npm全局安装目录：npm config set prefix 目录地址
查看npm镜像：npm config get registry
设置npm镜像：npm config set registry 镜像地址

npm的使用

package.json：配置文件
npm init -y：初始化项目，生成配置文件
npm ls：当前目录的第三方库
npm ls -g：全局安装的第三方库
npm search <包名>：搜索远程包
npm view <包名> versions：搜索远程包的所有版本
npm i <包名>@<版本号>：下载指定版本号第三方库到当前目录：
npm i <包名> -g：下载第三方库到全局目录
npm i <包名> --force：强制安装
npm i <包名> --legacy-peer-deps：支持安装同一库的多个版本
npm login --registry= xxx：登录远程npm库
npm publish：把当前库发包到远程库
package.json中的包名、主文件夹的名称，尽量不要用中文
node12.0之前的加密库是OpenSSL，node12.0之后的加密库是BoringSSL

清理缓存

npm cache clean --force || 删除D:\proSofts\nvm\npm_cache
删除package-lock.json

npx的使用

npx 命令t 参数<==>命令t 参数
npx 在当前目录的node_module中，寻找命令t
找到命令t，使用命令t
没找到命令t，下载并使用命令t；命令t使用完成，删除命令t

其他Cli指令

pnpm

pnpm create vite：搭建vue、react、electron脚手架

pnpm初始化和运行的项目，一旦移动位置，就很容易报错

配置文件：package.json

cnpm

yarn

包管理工具指令

配置文件：package.json

webpack

vite

打包工具指令

配置文件：webpack.config.js

配置文件：vite.config.js

nodemon

nodemon xxx.js

配置文件：nodemon.json

ts-node

ts-node xxx.ts

默认支持CommonJS模块化

typescript

tsc --init：初始化项目，生成配置文件

配置文件：tsconfig.json

package.json

name：项目名称
version：项目版本号
description：项目描述
author：项目作者
main：入口文件路径；默认是index.js
type：模块化方案；默认是CommonJS
scripts：脚本命令
devpendencies：生成环境依赖
devDependecies：开发环境依赖

package-lock.json

锁定依赖版本：package-lock.json 文件会精确地记录项目依赖模块的版本，以确保在不同的开发环境中安装相同的模块版本，从而避免不同环境下可能出现的版本差异导致的问题。
加快安装速度：npm 在通过 package-lock.json 安装依赖时，会利用缓存机制，从本地缓存中快速安装相应的模块，从而提高安装速度。
提供依赖完整性保证：package-lock.json 文件会记录每个模块的完整依赖关系树，保证每个模块的依赖都可以被满足并安装成功。

nrm

全称npm registry manager，用于npm镜像源间的切换。

Maven

概述

安装maven	手动安装到自定义位置(推荐) maven wrapper强制下载到C盘固定位置
配置环境变量	M2_HOME：D:\proSofts\maven path：%M2_HOME%\bin
查找依赖的顺序	%M2_HOME%/conf/setting.xml指定的本地maven仓库 %M2_HOME%/conf/setting.xml指定的远程镜像仓库远程maven中心仓库从远程库下载的依赖，会存放到本地maven仓库
项目结构	target classes src main java resources test java pom.xml
功能	安装第三方依赖编译Java项目文件运行Java项目

全局配置文件

%M2_HOME%\conf\settings.xml

<?xml version="1.0" encoding="UTF-8"?>
<settings xmlns="http://maven.apache.org/SETTINGS/1.2.0"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.2.0 https://maven.apache.org/xsd/settings-1.2.0.xsd">

  //设置localRepository本地仓库            
    <localRepository>D:/proSofts/maven/repository</localRepository>
  //设置镜像地址
    <mirrors>
	  <mirror>
		<id>aliyun-maven-public</id>
		<url>https://maven.aliyun.com/repository/public</url>
		<mirrorOf>central</mirrorOf>
	  </mirror>
	  <mirror>
		<id>aliyun-maven-center</id>
		<url>https://maven.aliyun.com/repository/central</url>
		<mirrorOf>central</mirrorOf>
	  </mirror>
	</mirrors>
 ...........
</settings>

mvn的使用

mvn clean：删除target文件夹
mvn compile：编译src/main中的Java类，并把class字节码放到target中
mvn dependency:resolve：下载pom文件中的第三方依赖
mvn exec:java：运行pom文件指定的入口类
mvn test：运行src/test/java中的所有测试文件
mvn test -Dtest=类A#方法A：运行src/test/java中类A的方法A

pom.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"
>        

    <modelVersion>4.0.0</modelVersion>
    <groupId>com.example</groupId>
    <artifactId>my-project</artifactId>
    <version>1.0.0</version>

    <dependencies>
       ....
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>1.6.0</version>
                <configuration>
                    <mainClass>运行的主类</mainClass>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>