Vue引用本地资源

vue引用本地资源

1. img标签引用本地图片

<img class="img-test" src="~@/assets/img/src.png" />

2. background引用背景图

<h3>vue background引用背景图</h3>
<div class="bg-test"></div>

.bg-test {
  width: 200px;
  height: 200px;
  background-image: url("~@/assets/img/bg.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

3. 引用css文件(全局引用)与局部同权重显示全局样式

4. 引用css文件(单页面引用)

<style scoped>
	@import url('~@/assets/css/childcpm.css');
</style>

5. 使用iconfont字体

(1) 存放iconfont文件在一个文件内

(2) 全局引用或者单页面引用iconfont文件

(3) 使用字体

<div>
  <h3>vue中使用iconfont</h3>
  <span class="iconfont icon-food-cookie"></span>
  <span class="iconfont icon-food-pecan"></span>
  <span class="iconfont icon-food-avocado"></span>
  <span class="iconfont icon-food-pudding"></span>
  <span class="iconfont icon-food-strawberry"></span>
  <span class="iconfont icon-food-chips"></span>
  <span class="iconfont icon-food-popcorn"></span>
  <span class="iconfont con-food-bread"></span>
</div>

结果展示

源码：github链接