精华内容
下载资源
问答
  • Vue cli 引入第三方JS和CSS的常用方法
    万次阅读
    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的常用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 第三方库: https://github.com/google/blockly 需要引入两个js文件 blockly_compressed.js blocks_compressed.js 使下边的代码正常运行 ``` 挑战1 ; width: 600px;"> ...
  • Vue引入第三方js库

    2021-01-28 23:33:45
    es5的引入方式 <!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:51
    script 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' 也可以。

    复制


    ### 最后

    ![Vue 中如何引入第三方 JS 库,如何学习web开发_前端开发_04](https://s8.51cto.com/images/20210928/1632837850716891.jpg)

    ![Vue 中如何引入第三方 JS 库,如何学习web开发_面试_05](https://s2.51cto.com/images/20210928/1632837851636867.jpg)

    **资料过多,篇幅有限**

    **[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://ali1024.coding.net/public/P7/Web/git)**

    >自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

    展开全文
  • VUEcli3.0 第三方CDN引入

    2020-09-29 11:02:24
    VUEcli3.0 第三方CDN引入 资源优化==注意事项== 在项目中index.html文件添加CDN资源链接 在vue.config.js定义chainWebpack.externals 将main.js等有使用原import引入方式去除 1.1添加CDN资源链接index.html。 // ...

    VUEcli3.0 第三方CDN引入 资源优化

    1. 在项目中index.html文件添加CDN资源链接
    2. 在vue.config.js定义chainWebpack.externals
    3. 将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引入-->
    
    展开全文
  • 1.直接在indes.html下引入 2.使用方法 可参考链接: ...depth_1-utm_source=distribute.pc_feed_404.none-task-blog-BlogC
  • 前端通过引入第三方js包,调用js包里的初始化方法和提交方法完成登陆; 流程1.引入第三方包 1.1在index.html文件下引入 流程2.完成初始化 问题2.1因为初始化的时候,必须传递后端分配的state,用作验证。 当时...
  • 最近有小伙伴问道如何在vue-cli项目中引入第三方插件或者,例如如果想在项目中使用jQuery中的Ajax请求数据呢?或者我想使用Bootstrap框架呢?等等这些问题,本篇博客将带你学习如何引入第三方插件或者(仅仅只是...
  • Vue 引入第三方图标

    2021-07-21 14:05:51
    我的项目是Vue+element,由于这个element中的图标比较少,所以咋们引入阿里云的图标 阿里云图标地址:https://www.iconfont.cn/home/index 首先你要有个阿里云图标的账号,没有的注册一下 到此,我们就完成了...
  • 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件); 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css、js、less、fonts文件夹,并放入对应...
  • vue.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文件根本...
  • script type="text/javascript" src="static/js/xxxx.js"></script> 二种方法: 在src文件夹底下创建一个文件夹utils 把你需要的文件引入到这个里面。 然后在main.js文件夹下做以下操作 ```js import ...
  • 查了很多资料,基本的解决方案都是 ... 然而在我这并不起作用,然后看到了这个,mark一下。.../node_modules/postcss-px2rem-exclude/lib/index.js 文件 增加如下内容,即可 代码如下 try { var ...
  • 【TS】在vue引入第三方文件报错

    千次阅读 2022-03-11 22:37:47
    简单解决vue中没有找到某文件的声明文件的问题
  • 网络上各种各样的vue-cli配置方法,大多数都是出现各种意想不到的问题,我曾经为了这个问题找了好几天,有好几次都想放弃这个vue-cli,不得不说,老项目翻新用到的插件不能很好的引入,简直让人崩溃!!。直接看图,...
  • vue-cli3引入第三方字体文件

    千次阅读 2019-12-09 11:55:58
    1,在vue-cli项目目录下创建vue.config.js文件 module.exports = { module: { rules: [ { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', ...
  • 详解vue-cli+es6引入es5写的js(两种方法)学习了vue有一段日子了,vue+es6开发非常好用,vue的插件非常多,很充足,但是还是会用到引入第三方外部js的时候,但是很多人在vue-cli中的.vue文件引入es6会出很多错误,...
  • 双十一买了一台云服务器,正巧最近用vue写了一个生成随机密码的页面,于是部署在了该机器上。机器的部署过程就略过,如果有人感兴趣,...先简单介绍一下,这个页面使用 Vue Cli 3 生成,为了开发方便,引入了 ele...
  • Vue CLI3搭建组件并实现按需引入实战操作 在Vue CLI3搭建组件并用npm发布实战操作中介绍了单个组件的组件怎么开发,本文将一步一步教大家怎么开发多个组件集成的组件,怎么实现组件按需引入。觉得有用点...
  • 注意这里配置的是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:00
    2.打开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文件,是一个类似于这种的: a.min.js文件 想到的第一种方法自然是是以哦那个import导入,但是,这个js文件竟然不支持import导入,直接pass,毕竟俺这种小菜鸡看源码也看不懂...
  • 一种方式:利用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....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,506
精华内容 3,002
关键字:

vuecli引入第三方js库