一、文件与文件夹结构
1.文件结构
文件名 | 作用 |
---|---|
.babelrc | 配置 Babel 编译选项,指定代码转译规则。 |
.editorconfig | 定义项目代码格式规范,如缩进风格和空格数量等。 |
.eslintignore | 列出 ESLint 忽略的文件或文件夹。 |
.eslintrc.js | 配置 ESLint 的规则和插件。 |
.gitignore | 列出 Git 忽略的文件或文件夹。 |
.postcssrc.js | 配置 PostCSS 插件和选项。 |
index.html | 网站的主页 HTML 文件,包含页面的结构和内容。 |
package-lock.json | 锁定项目依赖的版本,确保一致的安装。 |
package.json | 定义项目依赖、脚本命令、版本和其他项目配置信息。 |
README.md | 项目说明文件,包含项目简介、安装和使用说明等信息。 |
2.文件夹结构
文件夹名 | 作用 |
---|---|
build | 存放构建后生成的文件,通常是打包后的产物(如 .js 、.css 等)。 |
config | 存放项目的配置文件,通常用于设置构建工具和其他项目参数。 |
node_modules | 存放项目的所有依赖包,由 npm 安装,包含项目运行所需的库和工具。 |
src | 存放源代码文件(.vue .js .css)。 |
static | 存放静态资源文件,如图片、字体、视频等,通常不会被打包处理。 |
二、导入和导出插件
1.导出插件到txt
# 终端运行:导出扩展插件到指定路径(txt)
code --list-extensions > C:\Users\UserName\Documents\extensions.txt
2.导入插件到VScode
# 终端运行:导入指定路径(txt)的扩展插件
Get-Content C:\Users\UserName\Documents\extensions.txt | ForEach-Object { code --install-extension $_ }
【注意】导入过程中乱码是正常情况,请耐心等待
3.推荐插件
三、常用快捷键和技巧
1.基本工具栏
2.大小写转化
选中你需要改变的代码,然后 ctrl + shift +p 呼出菜单,搜索大写/小写 或者 upper/lower 按Enter执行
3.快捷键
1.跳转和复制
F12: 转到实现
Alt + ↑/↓: 向上/向下移动行
Ctrl + Home: 转到文件开头
Ctrl + End: 转到文件末尾
Ctrl + /: 注释/取消注释
Ctrl + G: 转到指定行
Ctrl + D: 复制当前行
2.格式
折叠所有代码: Ctrl + K, Ctrl + 0(注意:0是数字键盘的0)
展开所有代码: Ctrl + K, Ctrl + J
格式化代码: Ctrl + K, Ctrl + D
3.全部保存
Ctrl + K, Ctrl + S
四、基本设置配置技巧
1.固定标签页
五、常见问题及其方案
1.证书过期
npm ERR! code CERT_HAS_EXPIRED
依次执行以下命令:
npm cache clean --force
npm config set strict-ssl false
2.包更新后版本控制文件(yarn.lock)未更新
方案一:
yarn install
yarn run serve
方案二:(如果方案一不行就用这个)
yarn.lock删掉
重复方案一