在vue/uni-app中引入外部的css文件 -少儿编程-信息学奥赛-宜宾少儿编程-宜宾市野牛网络科技有限公司

咬定青山不放松，立根原在破岩中。千磨万击还坚劲，任尔东西南北风。

《竹石》郑燮

野牛程序员教少儿编程与信息学竞赛-微信|电话：15892516892

报名链接：报名联系方式

在vue/uni-app中引入外部的css文件

浏览次数：8245

vue

一、在vue中引入外部的css文件

在项目的src文件下，新建一个style文件夹，存放css文件

1. 全局引入

将外部的css文件放到style文件下，引入外部文件只需在main.js文件中

```
import './style/reset.css'
```
我引入的是清除默认样式的css文件

2. 局部引入

```
<style scoped>
  @import '../assets/iconfont/iconfont.css';这个分号一定要写，要不会报错
</style>
```

二、.在uni-app 中应用的方法如下

```
<style>	
	@import url('../../static/style/common.css');	
    @import url('../../static/style/page.css');
</style>	
<script>
    import http from '../../common/http.js'
</script>

http.js 内容如下

let http = {
    'setBaseUrl': (url) => {
        if (url.charAt(url.length - 1) === "/") {
            url = url.substr(0, url.length - 1)
        }
        http.baseUrl = url;
    },
    'header': {},
    'beforeRequestFilter': (config) => { return config },
    'beforeResponseFilter': (res) => { return res },
    'afterResponseFilter': (successResult) => { },
    'get': get,
    'post': post,
    'request': request,
    'uploadFile': uploadFile,
    'downloadFile': downloadFile,
	'getgoodsList':getgoodsList,
}
 
 
function init(con) {
    //url
    let url = http.baseUrl;
    if (url && con.url && !con.url.match(/^(http|https):\/\/([\w.]+\/?)\S*$/)) {
        if (con.url.charAt(0) !== "/") {
            con.url = "/" + con.url;
        }
        con.url = url.concat(con.url);
    }
    //header
    if (http.header != undefined && http.header != null) {
        if (!con.header) {
            con.header = http.header;
        } else {
            Object.keys(http.header).forEach(function (key) {
                con.header[key] = http.header[key]
            });
        }
    }
}
 
function request(con) {
    init(con);
    let config = {
        url: con.url ? con.url : http.baseUrl,
        data: con.data,
        header: con.header,
        method: con.method ? con.method : 'GET',
        dataType: con.dataType ? con.dataType : 'json',
        responseType: con.responseType ? con.responseType : 'text',
        success: con.success ? (res) => {
            http.afterResponseFilter(con.success(http.beforeResponseFilter(res)));
        } : null,
        fail: con.fail ? (res) => {
            con.fail(res);
        } : null,
        complete: con.complete ? (res) => {
            con.complete(res);
        } : null
    }
    return uni.request(http.beforeRequestFilter(config));
}
 
function get(url, con, success) {
    let conf = {};
    if (con && typeof con == 'function') {
        if (success && typeof success == 'object') {
            conf = success;
        }
        conf.success = con
    }else{
        if (con && typeof con == 'object') {
            conf = con;
        }
        conf.success = success;
    }
 
    if (url) {
        conf.url = url
    }
    conf.method = "GET";
    return request(conf);
}
 
function post(url, data, con, success) {
    let conf = {};
    if (con && typeof con == 'function') {
        if (success && typeof success == 'object') {
            conf = success
        }
        conf.success = con;
    } else {
        if (con && typeof con == 'object') {
            conf = con;
        }
        conf.success = success;
    }
    if (url) {
        conf.url = url
    }
    if (data) {
        conf.data = data
    }
    conf.method = "POST";
    return request(conf);
}
 
function uploadFile(con) {
    init(con);
 
    let config = {
        url: con.url ? con.url : http.baseUrl,
        files: con.files,
        filesType: con.filesType,
        filePath: con.filePath,
        name: con.name,
        header: con.header,
        formData: con.formData,
        success: con.success ? (res) => {
            http.afterResponseFilter(con.success(http.beforeResponseFilter(res)));
        } : null,
        fail: con.fail ? (res) => {
            con.fail(res);
        } : null,
        complete: con.complete ? (res) => {
            con.complete(res);
        } : null
    }
    return uni.uploadFile(http.beforeRequestFilter(config));
}
 
function downloadFile(con) {
    init(con);
 
    let config = {
        url: con.url ? con.url : http.baseUrl,
        header: con.header,
        success: con.success ? (res) => {
            http.afterResponseFilter(con.success(http.beforeResponseFilter(res)));
        } : null,
        fail: con.fail ? (res) => {
            con.fail(res);
        } : null,
        complete: con.complete ? (res) => {
            con.complete(res);
        } : null
    }
    return uni.downloadFile(http.beforeRequestFilter(config));
}
 
 
 
 
function getgoodsList(url){
	console.log('sdsssdssssssssssssss')
	return new Promise((resolve, reject) => {
	    uni.request({
	        url: url,
	        success: (res) => {
	            // store.commit('setAllClass', res.data);
				
				// console.log(res.data.prolist)
				
				resolve(res.data.prolist);
	            // resolve('suc');
	        },
	        fail: (err) => {
	            reject('err')
	        }
	    });
	})
}
  
export default http
```
 使用方法：
![](http://www.083158.com/uploads/article/2020-09-25/LJsocZizqXPDyLeQFl6MyTyPdufsJ7Z4tpW8ld2o.png)

您必须遵守署名-非商业性使用-相同方式共享使用这篇文章

本文链接：http://www.083158.com/article_details/123

转载注明出处：少儿编程-信息学奥赛-宜宾少儿编程-宜宾市野牛网络科技有限公司

野牛程序员教少儿编程与信息学竞赛-微信|电话：15892516892

报名链接：报名联系方式

给我留言

留言条数·0