引入本地资源

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

引入本地图片

使用 @引入：

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

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

使用 vue 的方法引入：

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

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

然后在 data 里面声明

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

最后绑定数据

<img v-bind: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