vue如何引入js文件

JavaScript05

vue如何引入js文件,第1张

1、vue-cli webpack全局引入jquery

(1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖。)

(2)在webpack.base.conf.js里加入

1

var webpack = require("webpack")

(3)在module.exports的最后加入

1234567

plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: "jquery" })]

(4) 在main.js 引入就ok了(测试这一步不用也可以)

1

import $ from 'jquery'

(5)然后 npm run dev 就可以在页面中直接用$ 了.

步骤:

首先。我们要改造我们要映入的外部js文件,改成下面这个格式。主要是红色方块内部代码,我们需要将我们的模块“抛出”,让人能获取到以下及相应代码:

其次,到我们的寄主那里,我们需要导入,仿造其他的文件,写法如下及相应代码:

注意红色叉的部分,那是我们es5的写法,绿色才是正确的;接着是效果图:

其他方法:直接@import就行了

<style>

@import "../../scss/retinaLine"

@import "../../scss/css3Module"

...

</style>

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