vue项目中使用外部js

 

首先大体分两种js写法

第一种，全部export

  export const FileTypeObj={//文件格式Icon
       pdf:"file-pdf",
       excel:"file-excel",
       png:"file-image",
       jpg:"file-image",
       word:"file-word",
       mp4:"video-camera",
  }
  export const getTheIcon=function(str){
       let endRe="";
       if(str){
         str=str.toLowerCase();
         endRe=FileTypeObj[str];
         if(endRe){
           return endRe
         }
       }
       return "file-unknown"
  }

第二种，export default

  const FileTypeObj={//文件格式Icon
       pdf:"file-pdf",
       excel:"file-excel",
       png:"file-image",
       jpg:"file-image",
       word:"file-word",
       mp4:"video-camera",
  }
  function getTheIcon(str){
       let endRe="";
       if(str){
         str=str.toLowerCase();
         endRe=FileTypeObj[str];
         if(endRe){
           return endRe
         }
       }
       return "file-unknown"
  }

export default {
	FileTypeObj,
	getTheIcon,
}

单页面（.vue文件）引入js，并使用

import {FileTypeObj,getTheIcon} from "./mySelf.js";//适用第一种

import nPageJS from "./mySelf.js";//适用第二种

let file="excel";
//第一种
console.log(FileTypeObj[file])//file-excel

//第二种
console.log(nPageJS.getTheIcon(file))//file-excel

//单页面vue生命周期
export default {}

在单页面<template>中使用外部js

import {FileTypeObj,getTheIcon} from "./mySelf.js";//适用第一种

import nPageJS from "./mySelf.js";//适用第二种

let file="excel";
//第一种
console.log(FileTypeObj[file])//file-excel

//第二种
console.log(nPageJS.getTheIcon(file))//file-excel
export default {
    data() {
		return {
            FileTypeObj,//变量在这里定义一下就可以在当前页面html中调用
            listData:[],
        }
    },
	methods: {
        getTheIcon,//函数在这引入
        otherFun(){//其他单页面函数
        }
    }
}