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 都不行。

必須用 ~@ 的別名