Vue引入本地资源

简单介绍一下在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>