学习笔记1

相对路径引用的一些区别

/ ：表示根目录下选择文件

. /：表示当前文件目录下选择文件

. . / ：表示上级目录

vue通常会用@来代表src目录，但是vue文件里style的css中不能使用@来获取路径，css loader会把非根目录的url解析为相对路径，如果要引用style里面的css文件，需要用~@来表示src目录

import /src/index.vue
//可以转为
import @/index.vue

import /src/style/global.less;
//可以转为
import ~@/style/global.less;

关于组件的命名

日常命名如果有多个英文单词都会选择使用小驼峰的方式命名

类样式名，多个单词间一般使用短横线 - 来进行连接

组件的命名一般采用大驼峰式

关于导入导出

如果导出的时候是通过export default 这种方式导出的，那么在导入的时候 就不需要加 {} 进行解析

const a = 1;
export default a;
import a from "...";
//此时的a不需要加{}进行解析

如果导出的时候只是通过export导出的，那么则需要加{}

export const a = 1;
import {a} from "..."
// 此时的a需要加{}解析

使用element-ui修改样式

需要在控制台找到对应的类样式名，然后利用::v-deep 进行穿透。

示例如下：

mock文件遇到get请求带参数的解决方案

如果mock匹配到的地址是带参数的，这时候需要使用正则进行匹配

示例如下

字符串补位方法

一般像是遇到日期的时候，要满足两位对齐，比如七月要写成07这种形式，有时候我们得到的是个位数字没有补0 ，那么我们就需要自己转为07这种字符形式，就可以利用字符串padStart和padEnd方法来解决

// 字符串的padStart方法
const str1 = "7";
str.padStart(2,"0"); // "07"
// 此时表示字符串str没满足两位的时候在开始位置补0

// 字符串的padEnd方法
const str2 = "7"
str.padEnd(2,"0"); // "70"
// 此时表示字符串str没满足2位的时候在后面补0

关于图片引入的一些注意事项

如果是引入public目录下的图片，可以直接写/img/img1.png，因为在打包以后会直接把public目录下的所有文件都复制粘贴到dist目录下，那么直接使用 / 这种形式来表示文件路径就直接可以引用到根目录下的文件。

assets是嵌入式的静态资源，会参与打包，所以如果是动态引用src路径时，不可用直接在data里面写@/assets/img.png这种形式，…/这样也是不行的哦，因为这样的话会将页面的网址作为前缀目录来获取这个图片，所以根目录就发生了变化

那么解决方法是：在引用assets文件夹下的图片时，需要通过import这种方式来导入后使用，示例如下：

<img :src="imgUrl"></img>

import imgUrl from "@/assets/img1.png";
// 下面是vue文件夹下的data方法
data(){
	return {
		imgUrl,
	}
}