vue引入外部js文件（第三方js工具或者jq库）_vue3导入导出js文件_清虚桂意的博客

方法一:静态资源导入（或者cdn资源加载）

在 public 文件夹下的 index.html 文件使用 script 标签对插件进行引用。
可以是项目中的静态资源，也可以是远程资源。
//本地静态资源，直接放在public文件夹下
<script type="text/javascript" src="./wangEditor.min.js"></script>
//cdn资源加载
<script type="text/javascript" src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
方法二：import/export 方式
 
1、改写js文件，将其内部函数通过export导出 
在src下创建utils文件夹（用于存放js工具方法），新建myTest.js文件 
function myNotice() {
  console.log("方法执行")
export default myNotice
2、组件内部通过import引入函数 
import  myNotice from '@/utils/myTest.js'
myNotice()  //vue中调用即可
import/export 方式的写法 
方法三：require方式
 
直接require，相当于直接在组件内部加载js代码 
require('@/utils/jquery.wordexport')
方法四：npm安装
 
对于一些常用的js方法基本都可以通过npm安装。 
例如：jquery 
npm install jquery --save
import $ from 'jquery'
                    方法一:静态资源导入（或者cdn资源加载）在public文件夹下的index.html文件使用script标签对插件进行引用。可以是项目中的静态资源，也可以是远程资源。例如：//本地静态资源，直接放在public文件夹下&lt;script type="text/javascript" src="./wangEditor.min.js"&gt;&lt;/script&gt;//cdn资源加载&lt;script type="text/javascript" src="https://unpk
&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;
&amp;amp;amp;lt;html&amp;amp;amp;gt;
 &amp;amp;amp;lt;head&amp;amp;amp;gt;
   &amp;amp;amp
				方法一：配置 webpack ProvidePlugin 全局引入
假设要使用到 jquery，那么可以通过配置 webpack 的 ProvidePlugin 的插件来全局引入：
https://webpack.js.org/plugins/provide-plugin/
new webpack.ProvidePlugin({
 $: 'jquery',
 jQuery: 'jquery'
方法二：包装成插件在 Vue 中调用 use 方法安装
另外一种比较靠谱的方法是将第三方模块打包成插件，如我需要全局使用 echarts，那么在 src 目录下新建一个 lib，并创建名为
				jQery是使用选择器 $ 选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的html的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取lable标签内容：$("lable").val();它还是依赖DOM元素的值；
vue则是通过vue对象将数据和view（视图模型）完全分离开来了。对数据进行操作不再需要引用响应的DOM对象，可以说数据和view是分离的，他们通过vue对象这个VM实现相互的绑定。这就是传说中的MVVM；
扩展：还有很多其他的MVVM框架，如.
				「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」
Vue3 正式版已经发布一段时间了，和 Vue3 更配的工具 Vite 也已经投入使用了，本文整理了如何将一些常用的工具整合到项目中。
包括 vue-router , vuex , typescript , sass , axios , elementUI , vant。以及配置 环境变量，假数据 mock 等。
新建项目目录
输入命令，然后会让你填写工程名称，选择你要使用的技术栈，按照提示操作即可！
//yarn