精华内容
下载资源
问答
  • VUE动态引入JS文件

    2021-06-21 15:00:38
    leta=1; if(a==1){ require('../../api/demo/demo.js'); } else{ require('../../api/demo/demo2.js'); }

    demo.js:

    export function a(b) { alert(b); }     

     

    test.vue:

    let a = 1;

          if (a == 1) {

             require('../../api/demo/demo.js').a(111);

          }

          else {

            require('../../api/demo/demo2.js');

          }

     

    结果:弹窗:111

    展开全文
  • 最近项目中需要引入百度地图api的js文件,刚开始想这还不简单,直接通过script引入,结果发现不行vue不支持下面的引入方式exportdefault{....}vue引入js需要通过import,因此考虑一个动态加载js的功能,可以结合...

    最近项目中需要引入百度地图api的js文件,刚开始想这还不简单,直接通过script引入,结果发现不行

    vue不支持下面的引入方式

    export default{

    ....

    }

    vue中引入js需要通过import,因此考虑写一个动态加载js的功能,可以结合Promise,js加载成功,调用resolve,js加载失败,调用reject

    loadJs,传入要加载的js地址function loadJs(src) {

    return new Promise((resolve,reject)=>{

    let script = document.createElement('script')

    script.type = "text/javascript"

    script.onload = ()=>{

    resolve()

    }

    script.onerror = ()=>{

    reject()

    }

    script.src= src

    document.getElementsByTagName('body')[0].appendChild(script)

    })

    }

    export default loadJs

    vue组件中调用

    import loadJs from '../../utils/base/loadJs'

    export default {

    name : 'Test',

    mounted(){

    loadJs('http://api.map.baidu.com/getscript?v=2.0&ak=yourak&services=&t=20190123111209').then(()=>{

    var map = new BMap.Map("allmap");

    ....

    })

    }

    }

    就是这么简单啊~~

    如果是引入百度地图api,注意,api地址为http://api.map.baidu.com/getscript?v=2.0&ak=yourak&services=&t=20190123111209

    不要使用默认的api地址,因为这个地址返回的并不是真正的js内容,而是document.write(...),要使用document.write()中的js地址才可以http://api.map.baidu.com/api?v=2.0&ak=您的密钥

    展开全文
  • Vue 动态引入图片的两种方式 把图片放在public下面,放在 public下面的图片不会被webpack处理,而是直接拷贝,在代码通过 /image/${variable}.png 引入的图片,处理之后就会把variable换成对应的字符串,比如这里...

    文件结构:
    在这里插入图片描述

    • Vue 动态引入图片的两种方式
      1. 把图片放在public下面,放在 public下面的图片不会被webpack处理,而是直接拷贝,在代码通过 /images/${variable}.png 引入的图片,处理之后就会把variable换成对应的字符串,比如这里就换成了 /images/apple.png, / 路径就是public文件夹,所以能够正常引入(Vue 项目的根路径就是 public,所以能够通过 / 引入图片, 这种方式还需要配合 publicPath 才能正常展示图片 vue publicPath)
      1. 比如当前在main.js 里面,通过 require(‘…/public/images/apple.png’)的方式来引入,要写相对路径,不能写 / 开头的路径
    展开全文
  • 思路:通过require 结合模板字符串实现动态引入本地json js代码: let num = 141000; let linFen = require(`../../public/city-provinces/city-provinces/citys/${num}.json`)

    思路:通过require 结合模板字符串实现动态引入本地json
    js代码:

      let num = 141000;
          let linFen = require(`../../public/city-provinces/city-provinces/citys/${num}.json`)
    
    展开全文
  • Vue引入并使用动态图标1.安装依赖2.在Vue项main.js引入3.经过以上操作,已经实现全局引入,在任何地方直接使用即可。 本次选用Font-awesome-animation 1.安装依赖 npm install font-awesome-animation 2.在Vue...
  • VUE3.0引入本地js文件

    2021-11-25 06:16:26
  • 2、在.vue文件中动态引进js模块文件 一、动态引进组件 动态引进组件原因:在实际业务中,比如订单详情页面detail.vue,里面包含了多个第三业务的订单详情,但是不同的业务详情页面区别又很大,所以只能根据不同...
  • 如何在vue组件中动态引入css文件?

    千次阅读 2020-12-20 05:29:50
    问题描述如标签描述的不准确,请见谅我的需求是开发多套皮肤,打包的时候只加载其中某一种的皮肤(不需要动态换肤),因为css文件过大,后期配套的css文件过多,在一起的话,一次全打包上去项目非常的大,又不可能...
  • vue组件内部引入外部js文件

    千次阅读 2021-01-12 03:19:25
    之所以要做这个是因为,在一个组件内部需要引入一个js文件来...第一种操作 Dom引入js:export default {mounted() {const s = document.createElement('script');s.type = 'text/javascript';s.src = '你的需要的j...
  • vue中如果把所有的代码都到一个页面中,有时比较难找,显得比较复杂,所以一些js代码会在外面的js文件中,然后引入到使用的页面中。可以在src下新建一个文件夹去存这个js文件,例如:DateToString.js,一定要...
  • mixins(混入),官方的描述是一种==分发 Vue ==组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如data、components、methods 、created、computed等等。...
  • 有时候当一个数组或者对象比较大,且放在了前端,如果将数据放在vue中的data中,就会显得很多。且不方便以后维护,可以当都将这个数据项放在一个js文件中。 这是 js 中的代码,将数据封装在一个函数里面 export ...
  • vue.js引入外部CSS样式和外部JS文件的方法学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢?一.引入外部CSS样式文件1. 在app.vue中下直接引入对应的路径使用@import引入外部css,作用域是全局的...
  • index.routes.js children下则是这么模块的路由 export default { path: '/index', name: 'index', component: () => import('../views/index.vue'), //子路由 children:[ ] } login
  • 最近遇到用swaggerapi接口,刚开始是在index.js用script标签引入的,后来负责人说拖累首次加载速度,要我按需引入,引个锤子,就用了一次,直接组建内部引入1.在组建内部,加载创建一个script标签在mounted(){ //...
  • 昨天晚上在做一个vue卡片组件的时候需要用到鼠标移入移出的效果,找了...第二步是在你所需要的vue组件里面引入js文件即可。 如果提示找不到文件的路径,很可能是js导出的错误。 export default (js文件名) ...
  • vue文件中引入外部js

    2020-12-19 01:36:49
    1.在项目的入口文件中(app.js)定义remoteScript标签Vue.component('remote-script', {render: function (createElement) {var self = this;return createElement('script', {attrs: {type: 'text/javascript',src: ...
  • 由于一些演示,需要对编码名称等可快速进行修改,需要页面方便...vue-cli 3.0 的法则是直接在public文件夹下创建js、具体操作如下:1、在public文件夹下创建config.js文件,里面文件的语法是es5,不允许使用浏览器...
  • 引入vue const context = require.context('./', true, /\.vue$/); const install = (Vue) => { context.keys().forEach((key) => { const component = context(key).default; Vue.component(component....
  • VUE引入外部JS链接

    2021-11-12 15:15:16
    最近工作中需要接入一个别的系统,对方给...script type="text/javascript" src="XXXX.js" ></script> 这种script标签导入,将该标签加入index.html文件的head里 就可以在任意地方使用window.XXX引用了 ...
  • 之所以要做这个是因为,在一个组件内部需要引入一个js文件来...第一种操作 Dom引入js:export default {mounted() {const s = document.createElement('script');s.type = 'text/javascript';s.src = '你的需要的j...
  • VUE项目引入Threejs加载模型文件

    千次阅读 2021-01-18 10:24:50
    //引入Threejs import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; 首先,创建初始化方法: init() { this....
  • 由于一些演示,需要对编码名称等可快速进行修改,需要页面方便...vue-cli 3.0 的法则是直接在public文件夹下创建js、具体操作如下:1、在public文件夹下创建config.js文件,里面文件的语法是es5,不允许使用浏览器...
  • vue项目引入three.js实现基本的动画(含vue-cli2引入报错解决方案)
  • vue引入外部js方法实例

    千次阅读 2020-12-22 02:40:05
    我们在做vue项目时,经常会需要引入js,常用的有以下几种。本文主要和大家分享vue中引入外部js方法实例,希望能帮助到大家。第一种import XX from “路径”Vue.use(XX);这里的js文件要导出用export default {Vue....
  • 首先用 vue-cli 创建一个 default 项目 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件 ...vue.config.js 文件 // vue.config.js module.exports = { // 将 example
  • Vue项目中引入外部js文件 import { submitForm } from './assets/js/gloabal' 三.由于在vue的外部js中使用的this并非当前vue实例,所以我们需要传递this js示例如下:vueObject即传递过来的this // 表单预处理...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 162,395
精华内容 64,958
关键字:

vue动态引入自己写的js

vue 订阅