我们一般会在 src 目录下的 assets 的文件夹里面统一放置 css 文件和图片。
一、css
1、全局引入
在 main.js 中:
2、组件引入
注意:组件内引入不能用@代理路径,会报错的!如:
如果是引入多个的话:
注意:引入语句后面最好加上分号,只引用一个还好,引用多个不加分号会报错。
如果用 require 引入的话,是在 <script></script> 中引入:
二、字体图标
介绍两个 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 中引入:
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 中引入:
step5:在组件中使用:参考官网的案例,直接定义 i 标签,添加响应的类名即可。
三、图片
一般会在 src/assets 文件夹下建立一个 imgs 的文件夹,里面专门用来存放图片。
通过 img 标签引入图片
方法一(通过 require() 引入):
vue中,如果没有在 vue.config.js 中定义,@ 默认指的路径就是 /src
方法二(通过 import 引入):
个人觉得项目中直接用 @ 别名路径 更方便,避免一层层的去查看文件位置。
四、背景图片
在 js 和 template 中引入图片资源需要使用 require
想在 template 上写,require一下地址,如:
css 里面写,写法如下:
注意:这里写相对路径 background: url("../../assets/imgs/1.jpg") no-repeat 和路径别名 background: url("@/assets/imgs/1.jpg") no-repeat 都不行。
必须用 ~@ 的别名