侧边栏壁纸
  • 累计撰写 122 篇文章
  • 累计创建 68 个标签
  • 累计收到 1 条评论

目 录CONTENT

文章目录

Vue引入本地资源

刘少锋
2020-10-23 / 0 评论 / 0 点赞 / 29 阅读 / 330 字

简单介绍一下在Vue项目中引入本地资源的实现方式:

引入本地图片

使用 @引入:

这是在组件内直接引用和普通的 html 方法一样,代码如下

<img src="@/assets/test.png" alt="test.png">

使用 vue 的方法引入:

这是典型的 vue 思想,使用数据来操纵 dom; 首先在组件内使用 import ... from 引入

import imgUrl from '../assets/test.png';

然后在 data 里面声明

data: function () {
    return {
        imgSrc: imgUrl
    }
}

最后绑定数据

<img :src="imgSrc" alt="imgSrc">

引入样式文件

在项目的 src 文件下,新建一个 style 文件夹,存放 css 文件。

全局引入

将外部的 css 文件放到 style 文件下,引入外部文件只需在 main.js文件中

import './style/reset.css'

还可以在项目的首页 index.html中,通过 link标签正常引入即可

<link rel="stylesheet" href="./static/css/reset.css">
<link rel="stylesheet" href="./static/css/main.css">

局部引入

<style scoped>
  @import '../assets/iconfont/iconfont.css'; // 这个分号一定要写,要不会报错
</style>

注意: 引入模板文件时,一定要清除Vue项目本身的样式文件,即 App.Vue中的logo 和 style

0

评论区