qq_29881259
小王先森
采纳率0%
2019-04-08 22:39 阅读 11.9k

vue 项目中怎么引用js文件

5

vue 项目中怎么引用js文件,我在vue组件里拷入了一个模板页面,css引入了,但是一些js文件无法引用

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

4条回答 默认 最新

  • caozhy 从今以后生命中的每一秒都属于我爱的人 2019-04-09 00:17
  • weixin_42906566 weixin_42906566 2019-04-09 09:57

    和普通的 引入方式一样

    点赞 评论 复制链接分享
  • Anytime_man 无明之徒 2019-04-09 10:03

    引用外部js:
    第一种方法:
    1、把需要的js放到static文件夹下
    2、在Index.html页面引入
    3、在webpack.base.conf.js添加下面代码
    4、vue组件里面引入
    之后就可以正常使用js了

    第二种方法:

    1、把需要的js放到static文件夹下
    2.组件里面直接引入

    一、绝对路径直接引入,全局可用
    主入口页面 index.html 中用 script 标签引入:

    这样,其实就已经可以在项目中使用 jQuery 了。

    mounted () {
    console.log($)
    }

    二、绝对路径直接引入,配置后,import 引入后再使用
    第一种方法有一个弊端就是:我们每一个使用了 $ 的地方,都要再前面加上 /* eslint-disable */ ,这显然是不方便的。

    于是,我们有了第二种方法

    还是先在主入口页面 index.html 中用 script 标签引入:

    然后,我们可以在 webpack 中配置一个 externals

    externals: {
    'jquery': 'jQuery'
    }

    这样,我们就可以在每一个组件中用 import 来引用这个 jquery 了。

    import $ from 'jquery'

    export default {
    created() {
    console.log($)
    }
    }

    三、webpack中配置 alias,import 引入后再使用
    我们不需要在主入口文件 index.html 中引入 jQuery 。我们只需要在 webpack 的配置文件中,在 resolve 中为 jQuery 添加一个 alias 。

    resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
    '@': resolve('src'),
    'jquery': resolve('static/jquery-1.12.4.js')
    }
    }

    那么,我们就可以在任意组件中,通过 import 的方式来使用 jquery 了。

    import $ from 'jquery' export default { name: 'app', created() { console.log($) } }

    四、webpack 中配置 plugins,无需 import 全局可用
    在第三种的基础上,如果我们增加一个 plugins 的配置,那么,我们在使用的时候,无需 import $ from 'jquery' 也可以。

    resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
    '@': resolve('src'),
    'jquery': resolve('static/jquery-1.12.4.js')
    }
    },
    plugins: [
    new webpack.ProvidePlugin({
    $: 'jquery'
    })
    ]

    这个时候,我们在项目中,就可以直接使用 $ 了。

    export default { name: 'app', created() { /* eslint-disable*/ console.log($) } }

    结论
    第一种和第四种方式使用的时候,不需要 import ,全局直接可用;第二种和第三种方式使用的时候,需要先 import 。

    1、现在的项目一般都会加入 ESLint 代码检查,所以推荐使用第二种或者第三种方式(这两种方式在使用的时候都需要先 import 引入,然后再使用,也就不存在 ESLint 报 not defined 的问题)

    2、如果你的项目没有使用 ESLint ,第一种和第四种也是不错的选择。

    3、如果你使用了 ESLint,仍然想使用第一种或者第四种方式,那么,我们就得在 ESLint 的配置文件中添加规则:'no-undef': 0

    点赞 评论 复制链接分享
  • xuerwang web coder 2019-04-09 16:38

    点赞 评论 复制链接分享

相关推荐