黑马前端学习笔记（从vue2.0到vue3.0）第九天P171-P186
P171 配置VSCode 插件
ESLint
复制到设置右上角的settings.json中
"editor.codeActionsOnSave": {
"source.fixAll": true
}
prettier
安装prettier插件时候发现少需要东西 首先将下方复制进settings.json
"prettier.configPath": "C:\\Users\\xxxx\\.prettierrc",
"eslint.alwaysShowStatus": true,
"prettier.trailingComma": "none",
"prettier.semi": false,
// 每行文字个数超出此限制将会被迫换行
"prettier.printWidth": 300,
// 使用单引号替换双引号
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
// 设置 .vue 文件中，HTML代码的格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.ignoreProjectWarning": true,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": false
},
"prettier": {
"printWidth": 300,
"trailingComma": "none",
"semi": false,
"singleQuote": true,
"arrowParens": "avoid"
}
},
现在咱没有.prettierrc 文件 新建一个文档输入
{"semi": false, "singleQuote": true, "printWidth": 300}
然后保存 退出之后 右击重命名 将txt文档改为.prettierrc
然后复制进 c盘/（如果你没有找到Users）其实就是中文名的用户
选择你的用户名 然后将.prettierrc 复制进行 并将刚复制进入的文件第一行改为
"prettier.configPath": "C:\\Users\\（你复制进入的文件夹）\\.prettierrc",
比如我的是Administrator 就改为
"prettier.configPath": "C:\\Users\\Administrator \\.prettierrc",
P172配置默认格式
我跟着老师的操作之后 发现 自动给方法 和属性加了逗号
然后我的.vue 文件出现报错 然后我取消了 这一步操作
大概率不会影响
P174 axios 封装
将main.js 导入axios
在其他组件就可以不用导入直接使用
this.$http.get
this.$http.post
在main.js 中设置默认路径
直接使用
P175路由
npm i vue-router@3.5.2 -S
安装路由包
其实在选择 项目时候可以勾选 路由 以后也不用操作这步了
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter()
export default router
P180 小注意点
在模块化导入的时候 这时候会导入和默认加载路径下的 index.js的文件
P181 路由使用方法
实现三者切换
写三个链接
在router 的index.js 进行定义
用path 与 组件进行连接
path :你访问的hash值（必须不能写#）
component：组件
组件需要导入
返回vue 主组件
写一个占位符 这是一个出口 没有他 切换都看不到
P182 使用router-link 代替链接
P183redirect 重定向
当hash值为 / 时候 失效
在路由规则中写
可以写 404页面
P184 嵌套路由
犹豫套娃的存在 两层路由的存在
在子组件中 首先创建hash 访问 与 占位符 这是在子组件中
在chidren 中的子组件中 hash值 不加/ 也可以加
子组件 也需要引入 index.js中
P186 子路由的重定向问题
1.第一种办法 redirect
可以在属性上加入
redirect ：‘地址’
2.第二种办法 默认子路由
