博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue cli 资源文件的引用
阅读量:6918 次
发布时间:2019-06-27

本文共 1641 字,大约阅读时间需要 5 分钟。

hot3.png

1、假如我们把所有的资源文件都放到assets文件夹下,

      assets下含有image , js ,css3个文件, 分别放各个资源文件

1-1  App.vue 模板页面 

作为图片:<img src="./assets/image/logo1.jpg">  assets前面必须加./

作为背景:.titlebg{background:url(./assets/image/logo.png) no-repeat} 或者

                titlebg{background:url(assets/image/logo.png) no-repeat}

1-2 其它模板页面

其它的页面都是按照正常的引用,每个模板看做单独的页面,按我们正常路径引用

如components->footer.vue
                作为图片:<img src="../assets/image/logo.png" alt="">
                作为背景:.bgpic{background:url(../assets/image/logo.png) no-repeat}
如page->index->index.vue
              作为图片:<img class="img" src="../../assets/image/logo.png" alt="">
               作为背景:.link{background:url(../../assets/image/logo.png) no-repeat;}
假如样式是外链样式放到assets->css->public.css   
.article_list{background:url(../../assets/image/logo.png) no-repeat}

2、另一种情况在根目录下的static文件夹放置image ,js(一般第三方类库)文件夹

2-1 App.vue模板页面

作为图片:<img src="static/image/logo.jpg" alt=""> 或者<img src="../static/image/logo.png" >

作为背景:.titlebg{background:url(../static/image/logo.png) no-repeat}

2-2其它模板页面

如page->index->index.vue

       作为图片:<img class="img" src="../../../static/image/logo.png" alt="">
       作为背景:.link{background:url(../../../static/image/logo.png) no-repeat;}
components->footer.vue
       作为图片:<img src="../../static/image/logo.png" alt="">
       作为背景:.bgpic{background:url(../../static/image/logo.png) no-repeat}

assets->css->public.css   

      .article_list{background:url(../../../static/image/logo.png) no-repeat}

总结:关于在开发环境中的引用资源的路径,其实与我们普通开发一样,只需关注当前文件与资源文件的路径关系(每个模板文件就当做一个普通的html页面)

资源放置方法,通常是一些固定的资源(如第三方插件,像jQuery等)与图片放在根目录下的static文件夹中,自己可能修改(自己写的js或者css)的文件放在assets文件夹下。
引用jQuery简单的方法在index.html页面中通过script标签引入
<script src="static/js/jQuery-2.1.4.min.js"></script>

转载于:https://my.oschina.net/u/2612473/blog/1544225

你可能感兴趣的文章
30年分布,30年集中——高校认证计费的变革
查看>>
我的友情链接
查看>>
Python-w3
查看>>
jpeg note
查看>>
一个例子告诉你什么是CLR(JVM同理),以及版本兼容
查看>>
文章记录
查看>>
ESXi中的虚拟机如何使用U盘
查看>>
把别人的Tcl/Tk代码加入到Go语言里13 游戏6 消除方块
查看>>
zend studio中vim的安装
查看>>
实施微服务,我们需要哪些基础框架
查看>>
Linux 简单创建用户并指定文件夹权限
查看>>
openstack cobbler Icehouse ks 配置文件
查看>>
C++基本的数据类型
查看>>
Thinkphp 5.0实战 仿百度糯米开发多商家电商平台
查看>>
oracle10 ora-12154错误的解决办法
查看>>
OpenStack 架构 - 每天5分钟玩转 OpenStack(15)
查看>>
DotProject环境搭建
查看>>
linux学习二
查看>>
关于form表单的reset功能无法还原hidden中的值
查看>>
搞PHP怎么不知道CURL呢,呵呵。。。。。
查看>>