runsly 前端问答 2021-12-11

vuejs怎么引入插件

引入方法：1、在“main.js”中使用import和“Vue.use(..)”语句；2、在vue文件的script标签内添加“import ‘路径”语句；3、在“app.vue”中使用import和“components:{}”语句等等。

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

第一步：install ，手动下载，自定义插件，网址访问

一般的vue或是js插件，通常都可以直接install，然后进行下一步。但是不排除各种原因install失败，需要手动下载。还有一部分是自定义的插件。

js全局引入

main.js文件添加

import Loading from './components/loading'
Vue.use(Loading)

js单独引入

vue文件script标签内添加

import '../../../components/loading/index.js'

vue全局引入

vue一般都是导入js再引入的，所以引入方式与js相同。但存在特殊情况，比如引入导航栏，直接是vue引入，全局是在app.vue中添加

import Header from './components/Header'
components: {
    Header
  }

vue单独引入

单独引入也是添加上述代码

直接引入

1，在项目的index.html添加

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=？"></script>

2，build/webpack.base.conf.js的配置文件中，设置外部扩展(externals属性)

externals: {
    'BaiduMap': 'BMap'
}

模块化引入

同js全局引入，此部分要求插件可安装或下载