一、移动端开发引入vant

1.0装包npm i vant@2.x --save
2.0 按需引用新建plugin文件
3.0 官方推荐插件方式

两点:vue3.x和2.x装包模式不一样/按需引用要比全局引用要好

补坑1: 路由组建添加replace 会导致不能回退

二、Eslint

lint代码格式规范,用的好上天用不好入地

目前有三套格式规范，biaozhun,aibyin,haiyougeshalaizhe,各有各的约束。任何时候都可以自己手动配置
通过npm run lint能自动修复，或者在save时就自动修复（指大部分）
插件eslint–根据lint自动修复代码

如果关闭eslint插件，项目如果遵循了某项代码规范还是会按照规范来。但是不一定是在save时报错，commit阶段或者npm run serve时候报错。

宁外还有个错误:当发现save代码时不自动修复可能是权限不够,执行npm run lint 就会有错误提示
“global-require”:0

三、Eslint巨坑

两种换行方式 CRLF 和LF

错误提示Expected linebreaks to be 'LF' but found 'CRLF'.eslintlinebreak-style

CRLF, LF 是用来表示文本换行的方式。CR(Carriage Return) 代表回车，对应字符 ‘\r’；LF(Line Feed) 代表换行，对应字符 ‘\n’。由于历史原因，不同的操作系统文本使用的换行符各不相同。主流的操作系统一般使用CRLF或者LF作为其文本的换行符。其中，Windows 系统使用的是 CRLF, Unix系统(包括Linux, MacOS近些年的版本) 使用的是LF。
这不是eslint也不是vetur、pretty的问题,更不是我的问题

//记得加上
"linebreak-style":[2,"windows"]

四、正式开始项目

先分清是什么组件，路由组件的渲染需要依赖router-view，，一个路由对应一个组件。先看是谁的子路由。全局的就在app中显示。

附录pakege.json

{"workbench.iconTheme": "vscode-icons",// --------------------  配置eslint  --------------------//autoFixedOnSave 设置已废弃，采用如下新的设置，新版(>1.41.0)配置"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"eslint.format.enable": true,//autoFix默认开启，只需输入字符串数组即可"eslint.validate": ["javascript","vue","html","javascriptreact","vue-html"],// --------------------  配置eslint  --------------------// 设置编辑器的默认格式化工具"editor.defaultFormatter": "esbenp.prettier-vscode","[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[less]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},//方法括号之间插入空格"javascript.format.insertSpaceBeforeFunctionParenthesis": false,// --------------------  vetur 配置  --------------------// vue文件默认格式化工具：vetur"[vue]": {"editor.defaultFormatter": "octref.vetur"},// 这个按用户自身习惯选择"vetur.format.defaultFormatter.html": "js-beautify-html",// 让vue中的js按编辑器自带的ts格式进行格式化//  "vetur.format.defaultFormatter.js": "vscode-typescript",// 让vue中的js按prettier进行格式化 用这个"vetur.format.defaultFormatter.js": "prettier","vetur.format.defaultFormatterOptions": {"js": "prettier","js-beautify-html": {"wrap_attributes": "aligned-multiple" //当超出折行长度时，将属性进行垂直对齐},"prettyhtml": {"tabWidth": 4, // 会忽略vetur的tabSize配置"printWidth": 100, //每行100字符"singleQuote": true, //是否使用单引号"semi": false, // 句尾是否加;"wrapAttributes": false,"sortAttributes": false},//vue中的js生效"prettier": {"semi": false, // 句尾是否加;"singleQuote": true, //是否使用单引号"trailingComma": "none" //禁止随时添加逗号}},// --------------------  vetur 配置  --------------------// --------------------  koro1FileHeader 配置  --------------------// 头部注释"fileheader.customMade": {"Author": "AuthorName","Date": "Do not edit", // 文件创建时间(不变)"LastEditors": "AuthorName", // 文件最后编辑者"LastEditTime": "Do not edit", // 文件最后编辑时间"Description": ""// "FilePath": "only file name", // 只有文件名// "custom_string_obkoro1_copyright": "Copyright (C) ${now_year} AuthorName. All rights reserved.",// "custom_string_obkoro1_date": "Do not edit" // 不带Date前缀的时间},// 函数注释"fileheader.cursorMode": {"description": "",//"custom_string_obkoro1": "","param": "params","return": ""},// 插件配置项"fileheader.configObj": {"createHeader": false, // 新建文件自动添加头部注释，默认打开"autoAdd": false, // 保存自动添加头部注释，开启才能自动添加，默认开启"openFunctionParamsCheck": true, //函数注释自动提取函数的参数，默认开启"createFileTime": true, // 默认为此文件的创建时间，设为false更改为当前生成注释的时间"dateFormat": "YYYY-MM-DD HH:mm:ss", // 默认时间格式，修改影响所有时间字段// 自定义注释中的艾特和冒号："atSymbol": ["@", "@"], // 所有文件的头部注释和函数注释的默认值 @"colon": [": ", ": "] // 所有文件的头部注释和函数注释的默认值 :// 自定义特殊字段名，Date、LastEditTime、LastEditors、Description、FilePath// "specialOptions": {//   "Date": "since",//   "LastEditTime": "lastTime",//   "LastEditors": "LastAuthor",//   "Description": "message",//   "FilePath": "文件相对于项目的路径"// }// 函数参数配置// "functionParamsShape": "normal", // 正常// "functionParamsShape": "no bracket", // 没有方括号// "functionParamsShape": "no type", // 没有类型// "functionParamsShape": [ "{", "}"], // 函数参数外形自定义，默认值 {}// "functionTypeSymbol": "*", // 参数没有类型时的默认值 *// 函数设置不添加参数和类型 {*}// "functionParamsShape": "no type", // 没有类型// "functionTypeSymbol": "" // 参数没有类型时的默认值 *},// --------------------  koro1FileHeader 配置  --------------------// --------------------  prettier 配置(以下配置主要针对.js)  --------------------"prettier.useEditorConfig": false, // 不使用editorConfig配置文件设置才生效"prettier.semi": false, // 句尾是否加;"prettier.singleQuote": true, //是否使用单引号"prettier.trailingComma": "none", //禁止随时添加逗号// --------------------  prettier 配置  --------------------"git.confirmSync": false,"security.workspace.trust.untrustedFiles": "open"
}