-
2017-08-21 16:33:33
如果要引入第三方JS或者css 最好是把文件放在statis文件夹下，此处是静态文件存放的位置
第一种方法：
直接在index.html中引入
js
<script type="text/javascript" src="static/mui.min.js" ></script>
css<link rel="stylesheet" href="static/mui.min.css" />
第二种 在单页面中用import方法导入js
import mui from '../../../static/mui.min.js'
css@import "../../common/stylus/mixin";
import引入 要写好路径即可第三种,在mian.js中引入css，代码如下
import 'static/css/main.css'这样就可以直接使用了
更多相关内容 -
Vue cli 引入第三方JS和CSS的常用方法分享
2020-10-18 19:22:10下面小编就为大家分享一篇Vue cli 引入第三方JS和CSS的常用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧 -
Vue CLI 如何引入第三方js文件
2019-05-22 21:07:08第三方库： https://github.com/google/blockly 需要引入两个js文件 blockly_compressed.js blocks_compressed.js 使下边的代码正常运行 ``` 挑战1 ; width: 600px;"> ... -
Vue引入第三方js库
2021-01-28 23:33:45es5的引入方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-test</...展开全文es5的引入方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-test</title> //新增，直接script标签引入，全局皆可用 <script type="text/javascript" src="./static/js/qrcode.js"></script> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>vue 中引入方式
<script> //引入一个有export输出的文件 import $ from '../../static/js/jquery-1.11.3.min ' export default { mounted(){ this.$nextTick(function () { console.log($) }) } } </script>
-
Vue 中如何引入第三方 JS 库
2021-10-20 10:31:51script src="./static/jquery-1.12.4.js"></script> 这样，其实就已经可以在项目中使用 jQuery 了。 mounted () { console.log($) } 我们来看一下 调试器 截图： 可以看到，我们是可以正常打印出 ...展开全文<script src="./static/jquery-1.12.4.js"></script>
这样，其实就已经可以在项目中使用 jQuery 了。
mounted () {console.log($)
}
我们来看一下 调试器 截图：可以看到，我们是可以正常打印出 jQuery 的。
由于我的项目开启了 ESLint 检测，所以也会报一个 warning[警告] ：'$' is not defined 。
我们可以让 ESLint 不检查这一行：
mounted () {/* eslint-disable */
console.log($)
}
加了 /* eslint-disable */ 以后，就不会报那个警告了。[](
)二、绝对路径直接引入，配置后，import 引入后再使用
第一种方法有一个弊端就是：我们每一个使用了 $ 的地方，都要再前面加上 /* eslint-disable */ ，这显然是不方便的。
于是，我们有了第二种方法
还是先在主入口页面 index.html 中用 script 标签引入：
<script src="./static/jquery-1.12.4.js"></script>
然后，我们可以在 webpack 中配置一个 externals
externals: {'jquery': 'jQuery'
}
这样，我们就可以在每一个组件中用 import 来引用这个 jquery 了。
import $ from 'jquery'export default {
created() {
console.log($)
}
}
很好，没有任何问题，我们可以在这个组件中 随意的 任意的 多次的 来使用 $ 了。
OK，咱们已经介绍两种方式了，它们有一个共同点：都需要在主入口页面 index.html 中，用 script 标签来引入 jQuery。前端培训
如果你不想在 inde.html 中使用 script 标签来引入 jQuery 的话，我们还有方法
[](
)三、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 了。
<script>import $ from 'jquery'
export default {
name: 'app',
created() {
console.log($)
}
}
</script>
控制台截图：OK，也是没有任何问题的
[](
)四、webpack 中配置 plugins，无需 import 全局可用
在第三种的基础上，如果我们增加一个 plugins 的配置，那么，我们在使用的时候，无需 import $ from 'jquery' 也可以。
复制
### 最后
**资料过多，篇幅有限**
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://ali1024.coding.net/public/P7/Web/git)**
>自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
-
VUEcli3.0 第三方CDN引入
2020-09-29 11:02:24VUEcli3.0 第三方CDN引入 资源优化==注意事项== 在项目中index.html文件添加CDN资源链接 在vue.config.js定义chainWebpack.externals 将main.js等有使用原import引入方式去除 1.1添加CDN资源链接index.html。 // ...展开全文VUEcli3.0 第三方CDN引入 资源优化
- 在项目中index.html文件添加CDN资源链接
- 在vue.config.js定义chainWebpack.externals
- 将main.js等有使用原import引入方式去除
1.1添加CDN资源链接
index.html。// 注意引入顺序,某文件有基于xxx.js的放在前面 <head> <link rel="icon" href="./static/logo.png"> <!-- 引入elementui样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <!-- element-ui --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <!-- echarts相关文件 --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js" > </script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js" ></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js" ></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js" ></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js" ></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js" > </script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js" ></script> </head>2.1定义 chainWebpack.externals
vue.config.js。module.exports = { chainWebpack: config => { config.externals({ 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT',//element-ui需按照下方注意事项进行 'echarts': 'echarts' }) }, }3.1去除import引入方式
main.js...。/* eslint-disable */ // import Vue from 'vue' import App from './App.vue' import router from './router' import axios from 'axios' import store from './store' import md5 from 'js-md5' // import './plugins/element.js'注意事项
1.xxx is not undefined //原因:esindt报错 1.1:针对整个文件不进行eslint检查,将/* eslint-disable */放置于文件最顶部 1.2:针对代码块临时禁止规则出现警告,注释包裹 /* eslint-disable */ console.log(this) /* eslint-enable */``` 1.3:针对指定行禁用指定的规则 console.log(this)// eslint-disable-line no-undef // eslint-disable-next-line no-undef console.log(this) 2.element-ui 不生效 //原因1:原使用.babelrc按需引入 { "presets": [ [ "@babel/preset-env", { "modules": false } ] ] //去除按需引入 // "plugins": [ // [ // "component", // { // "libraryName": "element-ui", // "styleLibraryName": "theme-chalk" // } // ] // ] } //原因2:VUE.js(查) //将vue也用CDN引入的方式 <!-- index.html CDN 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--去除使用import引入-->
-
vue-cli3引入第三方的js依赖包并使用其方法
2020-08-04 18:41:481.直接在indes.html下引入 2.使用方法 可参考链接： ...depth_1-utm_source=distribute.pc_feed_404.none-task-blog-BlogC -
vue-cli3项目通过vue如何引入第三方js包完成登陆功能
2020-08-21 10:52:20前端通过引入第三方的js包，调用js包里的初始化方法和提交方法完成登陆； 流程1.引入第三方包 1.1在index.html文件下引入 流程2.完成初始化 问题2.1因为初始化的时候，必须传递后端分配的state，用作验证。 当时... -
vue-cli项目中引入第三方插件
2019-12-28 23:37:11最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者库，例如如果想在项目中使用jQuery中的Ajax请求数据呢？或者我想使用Bootstrap框架呢？等等这些问题，本篇博客将带你学习如何引入第三方插件或者库(仅仅只是... -
Vue 引入第三方图标库
2021-07-21 14:05:51我的项目是Vue+element,由于这个element中的图标比较少，所以咋们引入阿里云的图标 阿里云图标库地址：https://www.iconfont.cn/home/index 首先你要有个阿里云图标库的账号,没有的注册一下 到此，我们就完成了... -
Vue-cli项目中引入外部/第三方css/js/less文件具体步骤
2017-12-01 14:18:46例子中css文件采用bootstrap.css，js文件采用jQuery，less文件用less.less(自定义文件)； 步骤一：安装webpack cnpm install webpack -g 步骤二：在src/assets下面新建css、js、less、fonts文件夹，并放入对应... -
vue.js怎样引入到HTML中,vue引入第三方js库
2021-06-17 04:06:41vue.js怎样引入到HTML中如何将vue.js引入HTML，把vue.js引入HTML的方法：一、下载vue . js；然后在HTML中添加vue.js包，其语法为“script src=’ $ { path }/web/constant/vue . js ‘/script”。这个教程操作环境：... -
vue-cli引入第三方插件
2018-04-17 10:54:25在用vue-cli我们引入js的时候一般都import语法，但是有时候我想要引入第三方插件，比如说，我们把一个js文件下载下来了，然后放在src/assets/js下，然后我们用import引入，这样明显是会出错的，因为下载的JS文件根本... -
vue中在index.html和main.js中引入第三方js库
2021-09-09 11:30:22script type="text/javascript" src="static/js/xxxx.js"></script> 第二种方法： 在src文件夹底下创建一个文件夹utils 把你需要的文件引入到这个里面。 然后在main.js文件夹下做以下操作 ```js import ... -
vuecli4.1 在引入第三方UI库导致第三方UI库的样式也变小的问题
2019-12-11 17:45:40查了很多资料，基本的解决方案都是 ... 然而在我这并不起作用，然后看到了这个，mark一下。.../node_modules/postcss-px2rem-exclude/lib/index.js 文件 增加如下内容，即可 代码如下 try { var ... -
【TS】在vue中引入第三方文件报错
2022-03-11 22:37:47简单解决vue中没有找到某文件的声明文件的问题 -
vue-cli 引入第三方插件终极法！！
2018-01-18 23:19:51网络上各种各样的vue-cli配置方法，大多数都是出现各种意想不到的问题，我曾经为了这个问题找了好几天，有好几次都想放弃这个vue-cli，不得不说，老项目翻新用到的插件不能很好的引入，简直让人崩溃！！。直接看图，... -
vue-cli3引入第三方字体文件
2019-12-09 11:55:581，在vue-cli项目目录下创建vue.config.js文件 module.exports = { module: { rules: [ { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', ... -
详解vue-cli+es6引入es5写的js(两种方法)
2021-06-25 09:47:37详解vue-cli+es6引入es5写的js(两种方法)学习了vue有一段日子了，vue+es6开发非常好用，vue的插件非常多，很充足，但是还是会用到引入第三方外部js的时候，但是很多人在vue-cli中的.vue文件引入es6会出很多错误，... -
vue-cli中，使用第三方CDN外链资源（js、css）
2021-04-15 20:52:38双十一买了一台云服务器，正巧最近用vue写了一个生成随机密码的页面，于是部署在了该机器上。机器的部署过程就略过，如果有人感兴趣，...先简单介绍一下，这个页面使用 Vue Cli 3 生成，为了开发方便，引入了 ele... -
Vue CLI3搭建组件库并实现按需引入实战操作
2020-12-25 11:59:01Vue CLI3搭建组件库并实现按需引入实战操作 在Vue CLI3搭建组件库并用npm发布实战操作中介绍了单个组件的组件库怎么开发，本文将一步一步教大家怎么开发多个组件集成的组件库，怎么实现组件库按需引入。觉得有用点... -
vuecli 引入jq jq语句在vue中的使用 有演示图片和代码
2020-08-07 13:40:22注意这里配置的是vue-cli3.0引入jquery的方法，不是vue-cli2.0的配置方法 一、安装jquery npm install jquery --save 在package.json查看jquery的安装 二、在vue根目录下创建vue.config.js文件 进行vue.config.js... -
vue cli 通过npm引入第三方js（jquery）
2017-10-26 16:48:002.打开vue项目，在bulid>webpack.base.conf.js文件内的module.exports对象 添加 plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin({ jQuery: "jquery", $: ... -
vue-cli@4中cdn引入外部js
2020-01-19 16:36:24本文章代码所用vue-cli的版本号为： @vue/cli 4.1.2 有的时候，我们需要在index.html中通过cdn的方式引入一些外部的js脚本等资源，比如百度地图、高德地图和Leaflet等，碰到这种情况我们该如何操作呢？ 1，index.... -
写vue项目时需要用到第三方js文件，引入时有问题
2022-01-06 15:52:31最近在写vue项目时，需要用到第三方的js文件，是一个类似于这种的： a.min.js文件 想到的第一种方法自然是是以哦那个import导入，但是，这个js文件竟然不支持import导入，直接pass，毕竟俺这种小菜鸡看源码也看不懂... -
关于Vue下组件引入第三方外部Js几种方式
2018-07-03 14:55:04第一种方式：利用Vue的mounted生命周期const oScript = document.createElement('script'); oScript.type = 'text/javascript'; oScript.src = '//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js'; document.body....
