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

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

1. 全局引入

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

```

import './style/reset.css'

```

我引入的是清除默认样式的css文件

2. 局部引入

```

@import '../assets/iconfont/iconfont.css';这个分号一定要写,要不会报错

```

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

```

@import url('../../static/style/common.css');

@import url('../../static/style/page.css');

import http from '../../common/http.js'

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)

uni-app引用外部css,在vue/uni-app中引入外部的css文件相关推荐

  1. 在vue中引入外部的css文件

    在vue中引入外部的css文件 在项目的src文件下,新建一个style文件夹,存放css文件. 1. 全局引入 将外部的css文件放到style文件下,引入外部文件只需在main.js文件中 imp ...

  2. css引入报错,vue项目通过import引入外部css报错怎么办

    vue项目通过import引入外部css报错的解决办法:首先在[webpack.config.js]中添加相关内容,添加后重新npm run dev:然后json文件中查看是否存在[css-loade ...

  3. vue与外部html通信,VUE页面实现加载外部HTML方法

    VUE页面实现加载外部HTML方法 VUE页面实现加载外部HTML方法 前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的.所以,在页面显示的时候,如果以页面内嵌的形 ...

  4. vue实例中调用外部js_vue中引入外部js方法实例

    我们在做vue项目时,经常会需要引入js,常用的有以下几种.本文主要和大家分享vue中引入外部js方法实例,希望能帮助到大家. 第一种import XX from "路径" Vue ...

  5. uniapp vue3中引入外部3D模型(适配App)

    uniapp vue3中引入外部3D模型(适配App) 主要方式是通过renderjs来实现的, 因为使用threejs的话需要获取页面上的dom节点, 然后需要把threejs创建出来的canvan ...

  6. jsp、css中引入外部资源相对路径的问题

    jsp.css中引入外部资源相对路径的问题 在jsp页面中添加base,可用相对路径: <%String path = request.getContextPath();String baseP ...

  7. [vue] vue在组件中引入插件的方法有哪些?

    [vue] vue在组件中引入插件的方法有哪些? 插件通常用来为 Vue 添加全局功能.插件的功能范围没有严格的限制--一般有下面几种:添加全局方法或者属性.如: vue-custom-element ...

  8. vue main.js中引入js_手把手教你深入Vue3.0(Vue-cli4)项目打包性能优化实践

    记录了自己的博客在禁用缓存的情况下,从八九秒加载时间到最终985ms的优化实践,开启缓存的情况下能达到138ms的访问速度 本人的个人博客采用的是Vue-cli4.1.2 + typescript构建 ...

  9. 怎样在vue单页面中引入其他组件

    场景 在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现 首先在components下新建组件Today_recommend.vue组件 <templat ...

最新文章

  1. 【译】①JWS之Java[tm] Web Start开发者指南目录
  2. python基础知识填空-Python基础知识(1)
  3. Linux设备驱动之mmap设备操作
  4. oracle group by 多类别_python数据关系型图表散点图系列多数据系列
  5. maven依赖的jar包版本不一样_Maven依赖jar包冲突常见的解决方法
  6. 《南溪的目标检测学习笔记》——PyTorch模型搭建模板
  7. 一、64位windows 安装mysql
  8. java.util.zip.ZipException: invalid stored block lengths的错误
  9. c# 蓝牙虚拟串口_c#利用虚拟串口工具进行串口通信数据的发送和接收
  10. 极简试用期转正述职报告PPT模板
  11. 异步FIFO基本原理(基于Verilog的简单实现)
  12. 罗永浩改造苹果iPad,装了个门把手
  13. 乐城超市36计做微营销-王卫
  14. 中国体育场馆行业运营管理现状及十四五模式分析报告2022版
  15. 学习【AI测试】人工智能 (AI) 测试--开篇经验分享
  16. 使用百度云加速防apache的ab测试ddos攻击
  17. 云网融合学习之-VRRP协议实现网关保护探讨
  18. ios解锁动态图片_iPhone不越狱如何设置酷炫的动态锁屏壁纸
  19. HDR视频和截图曝光严重,需要如何处理?
  20. 分分钟学会httpd服务

热门文章

  1. Android安全输入设计与思考
  2. mmap内存 android,Android中mmap原理及应用简析
  3. 技术标准不重要?智能插座也讲究技术标准
  4. oledb access OleDbParameter 防注入,验证用户名密码
  5. 安卓电视机顶盒桌面源码设计分享教程
  6. 微信什么情况下会出现“对方正在输入”?
  7. 让同事羡慕的Excel快捷键
  8. 使用Photoshop吸取色值
  9. Vue学习计划十:了解Vue服务器渲染以及Vue-SSR使用方法
  10. 开发和常用工具推荐清单,有些工具是必备噢。