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

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