开箱即用 - 在vue中封装.js文件(公共函数)并引入的使用总结

开箱即用 - 在vue中封装.js文件(公共函数)并引入的使用总结

1.业务需求：

• 这是我们在日常开发中常见的一个需求，在vue中封装JS文件（这个JS文件是一些公共函数的封装文件），并在项目中引入。

2.解决方案：

• 1.首先我们需要将公共函数封装成一个独立的common.js文件，封装示例如下：

• 	  // 单个函数：
        export default function outF () {
          console.log('这是一个公共函数')
       }
  
  
    	// 多个函数：
  	   function outF1() {
  	    console.log('这是一个公共函数')
  	  }
  	  function outF2() {
  	    console.log('这是一个公共函数')
  	  }
  	  // 注意：暴露的时候使用export{函数名}
  	   export {
  	     outF1,
  	     outF2
  	   }
  	  
  
  

• 2.在vue中引用示例如下：

• // 单个函数：
  import outF from '../common/common'
  
  
  // 多个函数：
  import {outF1,outF2} from '../common/common'
  

• 3.函数使用：引入成功后直接在页面上调用函数即可，不要再使用this。