Vue学习笔记 —— 路径引入

前言

在html文件中，通过script标签来引入js，而在vue文件中通过import方式导入文件。并且import不止是可以导入js文件。

例：import HelloWorld from './components/HelloWorld.vue'

'HelloWorld'：指的是为导入文件气的一个名称，不是指导入文件的名称，相当于变量名'./components/HelloWorld.vue'：指的是文件的相对路径

引入路径的方式

以父子目录的方式定义相对路径：

./ 指当前目录 ../ 指当前目录的上一层目录

以根目录的方式定义的相对路径： @

Vue中引入图片

常见的引入方式：

<img src="../assets/jl.jpg" alt="">

编译后

<img src="/img/jl.jpg" alt="">

常见的引入方式，路径是固定的字符串，图片会被webpack处理，文件如若丢失，会在编译时报错。

解决：通过v-bind绑定scr引入

通过v-bind绑定src，要处理里面的内容，相对路径不会被webpack的file-loader处理。 <img :src="img01" alt=""> 当路径的文件名需要变量拼接的时候，可以使用require引入。 <img :src="img01" alt=""> img01:require('../assets/tz1.jpg') 波浪线引入内容 ~：默认回去node_modules中进行引入