vue 项目中怎么引用js文件,我在vue组件里拷入了一个模板页面,css引入了,但是一些js文件无法引用
5条回答 默认 最新
- 无明之徒 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
解决 1无用
悬赏问题
- ¥15 C#算法问题, 不知道怎么处理这个数据的转换
- ¥15 YoloV5 第三方库的版本对照问题
- ¥15 请完成下列相关问题!
- ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?
- ¥15 求daily translation(DT)偏差订正方法的代码
- ¥15 js调用html页面需要隐藏某个按钮
- ¥15 ads仿真结果在圆图上是怎么读数的
- ¥20 Cotex M3的调试和程序执行方式是什么样的?
- ¥20 java项目连接sqlserver时报ssl相关错误
- ¥15 一道python难题3