Vue 引入外部css样式两种方式 import 和link ; mixin.js的使用、全局引入封装的样式;

第一种 引入外部css两种方法

1.在 main.js 文件下
在这里插入图片描述
2.引入 在app.vue 的style 中直接引入;
import ‘./assets/css/demo.css’

问题:如果引入的三方库,容易报错, 字体库冲突什么,所以不建议这么搞,自己自定义的就无所谓了;

**

第二种 引入方式 = link 引入方式; 在index.html文件中

**
Vue 引入外部css样式两种方式 import 和link ; mixin.js的使用、全局引入封装的样式;_第1张图片

总结:外部css样式,自己写的可以用import引入方式(推荐),如果是引入三方的,建议使用link引入方式,会兼容一些报错

mixin.js的使用

Vue 引入外部css样式两种方式 import 和link ; mixin.js的使用、全局引入封装的样式;_第2张图片

如下样例:

定义混合mixin.js文件

Vue 引入外部css样式两种方式 import 和link ; mixin.js的使用、全局引入封装的样式;_第3张图片

局部引入

Vue 引入外部css样式两种方式 import 和link ; mixin.js的使用、全局引入封装的样式;_第4张图片

全局引入

Vue 引入外部css样式两种方式 import 和link ; mixin.js的使用、全局引入封装的样式;_第5张图片

你可能感兴趣的:(js,vue,vue纪要,vue.js,前端,javascript)