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

最新推荐文章于 2024-04-08 05:41:20 发布

weixin_34025151

最新推荐文章于 2024-04-08 05:41:20 发布

阅读量212

点赞数

文章标签： ui javascript python ViewUI

原文链接：https://my.oschina.net/u/2251646/blog/1439200

版权

2019独角兽企业重金招聘Python工程师标准>>>

外部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>

转载于:https://my.oschina.net/u/2251646/blog/1439200