Vue学习笔记3（vscode插件, slot插槽）

1. vscode配置（自动保存并格式化代码）

• .vscode 文件夹
  • 只针对当前项目
  • settings.json：工作空间设置、代码格式化配置、插件配置

• vscode配置：https://juejin.im/post/6844903826063884296
• vscode 官网：https://code.visualstudio.com/docs/getstarted/settings
• eslint命令行：https://zhuanlan.zhihu.com/p/108163990
• vetur: https://vuejs.github.io/vetur/formatting.html#formatters
• prettier: https://prettier.io/docs/en/options.html
• vscode-eslint : https://github.com/microsoft/vscode-eslint
• GitLens

• settings.json

{
   
	"[vue]": {
   
		// Defines a default formatter which takes precedence over all other formatter settings. Must be the identifier of an extension contributing a formatter.
		"editor.defaultFormatter": "octref.vetur"
	},
	"[javascript]": {
   
		// Language Features for TypeScript and JavaScript files
		"editor.defaultFormatter": "vscode.typescript-language-features"
	},
	// https://thesoreon.com/blog/how-to-set-up-eslint-with-typescript-in-vs-code
	"eslint.validate": ["javascript", "javascriptreact"],
	// https://vuejs.github.io/vetur/formatting.html#formatters
	"vetur.format.defaultFormatter.js": "vscode-typescript",
	"vetur.format.defaultFormatter.html": "js-beautify-html",
	"vetur.format.defaultFormatterOptions": {
   
		"js-beautify-html": {
   
			"wrap_attributes": "force-expand-multiline"
		}
	},
	//为了符合eslint的两个空格间隔原则
	"editor.tabSize": 2,
	// Error Checking
	"vetur.validation.template": false,
	// Configure glob patterns for excluding files and folders.
	"files.exclude": {
   
		"node_modules": true
	},
	// Ignores the warning when there are too many changes in a repository.
	"git.ignoreLimitWarning": true,
	// Code action kinds to be run on save.
	"editor.codeActionsOnSave": {
   
		"source.fixAll.eslint": true
	},
	"git.confirmSync": false,
	// Report errors only ， Suppress report warning
	"eslint.quiet": true,
	// Defines space handling before function argument parentheses.
	"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
	"typescript.format.insertSpaceAfterConstructor": true,
	"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
	// Preferred quote style to use for quick fixes: `single` quotes, `double` quotes, or `auto` infer quote type from existing imports. Requires using TypeScript 2.9 or newer in the workspace.
	"javascript.preferences.quoteStyle": "single",
	"javascript.format.insertSpaceAfterConstructor": true,
	"typescript.preferences.quoteStyle": "single",
	// Wrap attributes.
	//  - auto: Wrap attributes only when line length is exceeded.
	//  - force: Wrap each attribute except first.
	//  - force-aligned: Wrap each attribute except first and keep aligned.
	//  - force-expand-multiline: Wrap each attribute.
	//  - aligned-multiple: Wrap when line length is exceeded, align attributes vertically.
	//  - preserve: Preserve wrapping of attributes
	//  - preserve-aligned: Preserve wrapping of attributes but align.
	"html.format.wrapAttributes": "force-expand-multiline",
	// Format a file on save. A formatter must be available, the file must not be saved after delay, and the editor must not be shutting down.
	"editor.formatOnSave": true,
	// Whether or not to indent the code inside <script> and <style> tags in Vue files.
	"prettier.vueIndentScriptAndStyle": false,
	"prettier.singleQuote": true,
	"prettier.useTabs": true
}

2. vue插槽

2.1 插槽内容

• 内容分发
• 编译作用域：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的
• 默认值

<!-- 父 -->
<navigation-link url="/see">
  {
  {text}}
</navigation-link>
<navigation-link url="/default">
</navigation-link>
<!-- 子 -->
<template>
  <a
    :href="url"
    class="nav-link"
  >
    <slot>默认内容&l