vue 引入自定义js 并使用

JavaScript032

vue 引入自定义js 并使用,第1张

1.首先创建一个js

ex: test.js 

const referrerPhone = [

  { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }

]

export default {

referrerPhone 

}

import validators  from '../路径/test.js'

定义成对象方便调用

Vue.prototype.$validators  = validators 

this.$validators.referrerPhone 

=======================================================================================================

第二种 不是公用

1.创建一个 js

// 弹框提示

function tips(this_, message_, type_){

  this_.$message({

    message: message_,

    type: type_

  })

export { //很关键

  tips,

}

import { tips} from '../xx.js'

tips(this, '非法操作,不能删除admin用户!', 'error')

common.js 文件

common.js 文件

common.js 文件

common.js 文件

common.js 文件

main.js 文件

common.js 文件

main.js 文件

common.js 文件

main.js 文件

common.js 文件

main.js 文件

vue中引入在线JS(链接型的js、url类型的js)

vue项目中引用并使用本地js

由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置。由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译。

例如config.js定义了一个变量叫config,并在index.html页面引入后,那么在页面任何一处地方都可以直接使用。 

config.js:

index.html:

页面使用:

在开发环境中,我在public下创建了config.js文件,并且用export default方法进行导出。在页面使用的地方使用import config from XXX进入引入。开发过程中,没有出问题,但是在打包发布以后,发现修改config文件并不生效。

经过排查才意识到:不打包编译的js文件不识别es6语法,并且不应该使用import方法进行引入,应该按照原生的js文件进行使用。

原文地址: https://www.cnblogs.com/luoxuemei/p/11926472.html