vue 项目中css文件、字体图标、图片的引入和用法

我们一般会在 src 目录下的 assets 的文件夹里面统一放置 css 文件和图片。

一、css

1、全局引入

在 main.js 中：

import "./assets/css/common.css";

2、组件引入

<style lang="scss" scoped>
  @import "../../assets/css/base.scss";　/* 实际项目中写法根据自己的文件路径 */　
</style>

 注意：组件内引入不能用@代理路径，会报错的！如：

@import "@/assets/css/base.scss"

如果是引入多个的话：

<style lang="scss" scoped>
  @import "../../assets/css/base.scss"; //注意这里必须加分号
  @import "https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css";
</style>

注意：引入语句后面最好加上分号，只引用一个还好，引用多个不加分号会报错。

如果用 require 引入的话，是在 <script></script> 中引入：

<script>
  import {mapState, mapMutations} from "vuex"
  require('@/assets/css/common.css') //通过 别名路径 引入
  require('../assets/css/swiper-3.4.1.min.css') //require 不常用，一般都是用 import 引入css文件
  export default {
    components:{},
    data(){
      return {
        //
      }
    }
  }
</script>

 

 

二、字体图标

【后续添加：个人觉得  iconfont 和 Font Awesome 都不好用，在此强烈推荐另一篇文章： vue 中使用 Remix Icon  】

 

下面介绍两个 css 常用的字体图标库：阿里巴巴矢量图标（iconfont） 和 Font Awesome 

1、iconfont（iconfont不能用npm安装的方式使用，只能下载文件，把文件拷贝到项目中使用）

step1：打开官网 http://www.iconfont.cn/  ，用自己的 github 账号登录，在输入框里面输入自己想要的图标，输入中文即可（如：“保存”、“购物车”等）：

step2：选择自己想要的图标，点击第一个图标“添加入库”。

step3：添加过后，可以看到右上角库里面的数字就变了。

step4：点击右上角购物车的图标，点击“添加至项目”。没有项目的话就自己新建一个项目。

step5：点击“下载至本地” 

step6：下载完毕，解压。在你的项目下src/assets文件夹里建立一个 fonts 文件夹，放入解压之后的字体图标文件。如下图：

其中demo的文件可以不放入，但是我们可以在demo_index.html 中查看图标的类名。

step7：进入 inconfont.css 文件，修改以下路径：

 @font-face 中引用都是当前目录下（assets/fonts）的文件，里面是相对路径。

step8：在 main.js 文件中引入 iconfont.css ：

 step9：如何在项目中使用字体图标呢,其实很简单,创建一个 i 标签或者 span 标签,添加两个类名,一个固定的是 iconfont ,另一个是你想要的那个图标对应的类名:

如果项目中碰到后续需要添加字体新图标的，可以参考这篇文章：iconfont 怎么添加新的图标

2、Font Awesome

2-1、npm 安装的方式使用

step1：命令行执行 npm install --save font-awesome 。在 package.json 中可以查看到：

step2：在 main.js 中引入：

import 'font-awesome/css/font-awesome.css'

step3：在组件中使用：参考官网的案例，直接定义 i 标签，添加相应的类名即可。

2-2、下载文件的方式使用

step1：百度搜索“Font Awesome”，打开网址，下载旧版 v4.7（v5版需要付费）。

step2：下载过后的文件解压，得到一个 font-awesome-4.7.0 的文件夹，里面的内容为：

step3：在 src/assets 下新建一个 font-awesome 的文件夹，把上面的解压后 font-awesome-4.7.0 文件里面的内容全部拷贝过来。

 注意：别动里面的目录结构，因为 css/font-awesome.min.css 引用的是 assets/font-awesome/fonts 下的文件。

step4：在 main.js 中引入：

import './assets/font-awesome/css/font-awesome.min.css';

step5：在组件中使用：参考官网的案例，直接定义 i 标签，添加响应的类名即可。

 

三、图片

一般会在 src/assets 文件夹下建立一个 imgs 的文件夹，里面专门用来存放图片。

通过 img 标签引入图片

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

方法一（通过 require() 引入）：

data() {
  return {
    //imgUrl: require('../../assets/imgs/test.png')  //实际项目中注意路径
    imgUrl: require('@/assets/imgs/test.png')  // @ is an alias to /src
  }
}

vue中，如果没有在 vue.config.js 中定义，@ 默认指的路径就是 /src

 

方法二（通过 import 引入）：

//import testpng from '../../assets/imgs/test.png' //相对路径
import testpng from '@/assets/imgs/test.png'      // 别名路径
data() {
  return {
    imgUrl: testpng 
  }
}

个人觉得项目中直接用 @ 别名路径 更方便，避免一层层的去查看文件位置。

 

四、背景图片

在 js 和 template 中引入图片资源需要使用 require 


想在 template 上写，require一下地址，如：

<div :style="{background: 'url(' + require('@/assets/imgs/test.png') + ')'}">

 想在 css 里面写，写法如下：

<style lang="scss" scoped>
  @import "../assets/css/common.css";
  #div{
    background: url("~@/assets/imgs/test.png") no-repeat; /* 必须是 ~@ */
  }
</style>

注意：这里写相对路径  background: url("../../assets/imgs/1.jpg") no-repeat 和路径别名 background: url("@/assets/imgs/1.jpg") no-repeat 都不行。

必须用 ~@ 的别名