请问，vuejs 如何引入第三方js

Question

请问，vuejs 如何引入第三方js

Answer 1

在 Vue.js 中使用第三方库的方式有：
1.全局变量
在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到 window 对象上:
entry.js
window._ = require('lodash');
MyComponent.vue
export default {
created() {
console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..');
}
}
这种方式不适合于服务端渲染, 因为服务端没有 window 对象, 是 undefined, 当试图去访问属性时会报错.

2.在每个文件中引入
另一个简单的方式是在每一个需要该库的文件中导入:
MyComponent.vue
import _ from 'lodash';

export default {
created() {
console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
}
}

Answer 2

这里的组件化开发是使用什么??
vue-loader么...
如果是vue-loader可以通过 require来引入就可以
比如Js文件写到assets/js中
在main.js中可以 require('./src/assets/xxx.js')

如果只是单页面html,可以直接引入就行了<script src="xxxx.js">

Answer 3

• 步骤：

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

   

   

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

   

   

3. 注意红色叉的部分，那是我们es5的写法，绿色才是正确的；接着是效果图：

   

   

• 其他方法：直接@import就行了

<style>@import "../../scss/retinaLine";@import "../../scss/css3Module";...</style>

 

Answer 4

现在直接@import就行了

<style>
@import "../../scss/retinaLine";
@import "../../scss/css3Module";
...
</style>