相对路径引用的一些区别
/ :表示根目录下选择文件
. /:表示当前文件目录下选择文件
. . / :表示上级目录
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 "...";
如果导出的时候只是通过export导出的,那么则需要加{}
export const a = 1;
import {a} from "..."
使用element-ui修改样式
需要在控制台找到对应的类样式名,然后利用::v-deep 进行穿透。
示例如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4602426b794d85d2ff08763c4988a254.png)
mock文件遇到get请求带参数的解决方案
如果mock匹配到的地址是带参数的,这时候需要使用正则进行匹配
示例如下
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9ae0dc678fef936f1d729f7d8474b620.png)
字符串补位方法
一般像是遇到日期的时候,要满足两位对齐,比如七月要写成07这种形式,有时候我们得到的是个位数字没有补0 ,那么我们就需要自己转为07这种字符形式,就可以利用字符串padStart和padEnd方法来解决
const str1 = "7";
str.padStart(2,"0");
const str2 = "7"
str.padEnd(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";
data(){
return {
imgUrl,
}
}