文档章节

Vue导入外部js文件或css文件

 冰shang蚊
发布于 2017/07/17 17:16
字数 230
阅读 32
收藏 0

外部js文件导入及使用

1.先在某个目录创建js文件;如:src/service/appBase.js

2.定义公共的js函数如:

export const appBaseUrl = {
	methods: {
		getBaseUrl() {			
			return "http://ip:port/project";
		}
	}

}

export const getImgPath = {
	methods: {
		//传递过来的图片地址需要处理后才能正常使用
		getImgPath(path) {
			let suffix;
			if (!path) {
				return 'http://test.fe.ptdev.cn/elm/elmlogo.jpeg'
			}
			if (path.indexOf('jpeg') !== -1) {
				suffix = '.jpeg'
			} else {
				suffix = '.png'
			}
			let url = '/' + path.substr(0, 1) + '/' + path.substr(1, 2) + '/' + path.substr(3) + suffix;
			return 'https://fuss10.elemecdn.com' + url
		},
	}

3.导入js文件并使用

<script>

import {appBaseUrl,getImgPath} from '../../service/base.js';

export default {
   created(){
     console.info(appBaseUrl.methods.getBaseUrl());
     console.info(getImgPath.methods.getImgPath('http://test.fe.ptdev.cn/elm/elmlogo.jpeg'));
  }
};

</script>

 

1.在项目某个目录下创建scss文件,如:src/style/common.scss

2.定义公共的样式内容;如:

//定位上下居中
@mixin ct {  
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
}

//宽高
@mixin wh($width, $height){
	width: $width;
	height: $height;
}

3.导入及使用scss样式:

<style>
  @import 'src/style/mixin';

  .category_left_li{
					@include ct;
					padding:0 0.5rem;
					.category_icon{
						@include wh(.8rem, .8rem);
						vertical-align: middle;
						margin-right: .2rem;
					}

</style>

 

© 著作权归作者所有

上一篇: Css样式
粉丝 1
博文 43
码字总数 29244
作品 0
海淀
私信 提问
Vue with TypeScript

最近尝试了一下 TypeScript,试着把一个 Vue 项目改成了 TypeScript 的,感觉还不错。 目前 Vue 和 TypeScript 的配合还不算很完美,Vuex 和 TypeScript 的配合挺糟糕的,尝试需要谨慎,如果...

凤晴铃玉
2018/10/31
0
0
2019 前端面试 | 知其然,并知其所以然

Web 前置知识 《老生常谈的从 URL 输入到页面展现背后发生的事》[编号:web01] 《初次接触前端,我们要理解哪些名词?》 《工欲善其事,必先利其器——软件安装、环境搭建》 《做一次山大王,...

itsOli
昨天
0
0
用WijmoJS玩转您的Web应用——Vue

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/powertoolsteam/article/details/80813874 概述 在本文中,我们将展示如何将WijmoJS与NPM和Webpack一起使用来...

powertoolsteam
2018/06/26
0
0
入职第三天:vue-loader在项目中是如何配置的

什么是vue-loader 这是我入职第三天的故事,在写这篇文章之前,先来看看咱们今天要讲的主角——vue-loader,你对它了解多少? 这是我今天的回答,确实,vue-loader是webpack的一个loader,用...

闰土大叔
2018/06/02
0
0
vue和react的区别之我见

react和vue都是做组件化的,整体的功能都类似,但是他们的设计思路是有很多不同的。使用react和vue,主要是理解他们的设计思路的不同。 1.数据是不是可变的 react整体是函数式的思想,把组件...

凌霄光
2018/08/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

定时获取服务器时间戳的一个类(Typescript)

export class TimeStampService { private _localTimestamp: number; // 本地时间戳 private _serveTimestamp: number; // 服务器端时间戳 private _duration: number = 1000 ......

lilugirl
29分钟前
1
0
前段技术总结

前端UI框架组件库: 说到前端框架我第一印象中想起React、Vue和Angular,不知道你是否与我一样想到这些,现在常用的有:Bootstrap、jQuery UI、BootMetro、AUI常用的还有很多、就不一一跟大家...

WinkJie
49分钟前
1
0
对话亲历者|鲁肃:我在支付宝“拧螺丝“的日子

摘要: 他是支付宝技术平台的奠基人之一,但是他总说“这还不是我心中最完美的架构”;他行事低调但却有着“此时此地,非我莫属”的豪气;他曾无数次充当救火大队长,但自评只是“没有掉队的...

阿里云云栖社区
56分钟前
6
0
设置 npm yarn 淘宝源

设置npm config set chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver设置yarn config set "chromedriver_cdnurl" "https://npm.taobao.org/mirrors/chromedriver"......

internetafei
今天
2
0
Docker搭建Mysql集群、主从同步复制

1、创建数据挂载点: mkdir /opt/mysql-master/mysql、/opt/mysql-master/conf.d、/opt/mysql-slave/mysql、/opt/mysql-slave/conf.d 2、分别在master、slave节点文件目录conf.d下创建touch......

WALK_MAN
今天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部