Vue cli 引入第三方JS和CSS的常用方法分享

第一种方法：

直接在index.html中引入

js

<script type="text/javascript" src="static/mui.min.js" ></script>

css

<link rel="stylesheet" href="static/mui.min.css" rel="external nofollow" />

第二种 在单页面中用import方法导入

js

import mui from '../../../static/mui.min.js'

css

@import "../../common/stylus/mixin";

import引入 要写好路径即可。

以上这篇Vue cli 引入第三方JS和CSS的常用方法分享就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue如何引用其他组件（css和js）
  • 用Vue-cli搭建的项目中引入css报错的原因分析
  • Vue项目中引入外部文件的方法（css、js、less）
  • VueJS如何引入css或者less文件的一些坑
  • vue 引入公共css文件的简单方法(推荐)
赞 (0)

相关推荐

  • vue 引入公共css文件的简单方法(推荐)

    如果不想把css写在单文件组件里如这样: <template> <div id="app"> <div class='nav-box'> <ul class='nav'> <li> <a href="#/" rel="external nofollow" rel="external nofollow" >home</a> </li>

  • Vue项目中引入外部文件的方法（css、js、less）

    Vue项目中引入外部文件的方法（css、js、less）

    这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font

  • 用Vue-cli搭建的项目中引入css报错的原因分析

    用Vue-cli搭建的项目中引入css报错的原因分析

    我最近在研究Vue的路上,今天遇到了个问题,在vue cli 引入css报错,后来查询了很多资料,那么今天也算个学习笔记吧! 1.问题描述 之前用vue-cli搭建的项目,在main.js中引入elementUI库中的css,或者在其他文件中(比如App.vue)引入自己的css文件(假如你的文件是在src目录下),都会报一个相同的错.下如图 经过一番折腾之后发现需要在build文件下的webpack.base.conf.js中加上下面的代码即可 { test: /\.css$/, includ

  • vue如何引用其他组件（css和js）

    vue如何引用其他组件（css和js）

    1.vuejs组件之间的调用components 注意:报错Do not use built-in or reserved HTML elements as component id: 修改组件的名字,例如不能使用address为组件名字 组件名字不要使用内置的或保留HTML元素为组件id, App.vue是一个入口,vue必须注册才能使用 2.vue引入外部的css,放在和引入vue的位置一样 ./代表当前项目,../代表上一级项目 import '../static/style/reset.

  • VueJS如何引入css或者less文件的一些坑

    VueJS如何引入css或者less文件的一些坑

    我们在做Vue+webpack的时,难免会引入各种公共css样式文件,那么我们改如何引入呢?引入时会有那些坑呢? 首先,引入公共样式时,我们在"main.js"里使用AMD的方式引入,即 require('./assets/css/main.less'); 这时,我们会抛出一个错误,是因为我们没有写解析的依赖,webpack不知道怎么解析 这时,我们要填写上依赖, require('!style!css!less!./assets/css/main.less'); 在很多以前的博客里都

  • Vue cli 引入第三方JS和CSS的常用方法分享

    第一种方法: 直接在index.html中引入 js <script type="text/javascript" src="static/mui.min.js" ></script> css <link rel="stylesheet" href="static/mui.min.css" rel="external nofollow" /> 第二种 在单页面中用impo

  • Vue中引入第三方JS库的四种方式

    Vue中引入第三方JS库的四种方式

    目录 一.绝对路径直接引入,全局可用 二.绝对路径直接引入,配置后,import 引入后再使用 三.webpack中配置 alias,import 引入后再使用 四.webpack 中配置 plugins,无需 import 全局可用 结论 我们以 jQuery 为例,来讲解 一.绝对路径直接引入,全局可用 主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1.12.4.js"></script

  • VUE引入第三方js包及调用方法讲解

    VUE引入第三方js包及调用方法 1.首先是第三方js包存放的位置 一定要放在 static 目录下否则引用不到 2.网上查找到的引用第三方包的四种方式 实测部分第三方js包没法使用,较稳定的方式是在 index.html 中引入js包 <script src="static/xxxxx.js"></script> 3.mounted 是初始化加载的方法 可以理解为jquery 中的页面加载完的初始化方法 如果第三方包有初始化需要调用的一些函数等 需要写在mou

  • vue页面引入three.js实现3d动画场景操作

    vue中安装Three.js 近来无聊顺便研究一些关于3D图形化库.three.js是JavaScript编写的WebGL第三方库.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它通过控制相机.视角.材质等相关属性来创造大量3D动画场景. 我们开始引入three.js相关插件. 1.首先利用淘宝镜像,操作命令为: cnpm install three 2.接下来利用npm安装轨道控件插件: 关注我的微信公众号[前端基础教程从0开始],加我微信,可以免费为您解答问题.回复"1&qu

  • Vue如何引入远程JS文件

    问题 最近在使用 Vue 做东西,用到钉钉扫描登录的功能,这里需要引入远程的 js 文件,因为 Vue 的方式跟之前的不太一样,又不想把文件下载到本地应用,找了一下解决的方法,貌似都需要引入第三方的库,最后找到了解决方案,分享之. 思路 一开始的思路是在 Vue 加载完 Dom 之后(mounted),使用 JavaScript 脚本在 body 中插入远程的脚本文件. 后来发现了 Vue 的 createElement 方法,简单的封装一个组件解决问题. 解决方法 第一版代码(直接在操作 Do

  • vue中引入第三方字体文件的方法示例

    vue中引入第三方字体文件的方法示例

    在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 或者https://www.jb51.net/fonts/点击此链接,进行字体下载 2.将字体文件引入 自己定义一个文件夹,放入下载好的.ttf文件 先自己定义一个font.css文件,将下载好的字体文件的路径引入 @font-face { font-family: "华文行楷"; src:

  • vue cli 3.0 搭建项目的图文教程

    1.3.0版本包括了默认预设配置和用户自定义设置 2.对比2.0来看3.0的目录结构更加精简了 移除了配置文件目录 (config 和 build文件夹) 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中 在 src 文件夹中新增了 views 文件夹,用于分类视图组件和公共组件 vue-cli 3.0 搭建 1. 安装或升级 Node.js vue-cli官网对于node版本有明确要求 Vue CLI 需要 Node.js 8.9

  • 如何在vue中使用video.js播放m3u8格式的视频

    如何在vue中使用video.js播放m3u8格式的视频

    @[toc] 注意: "vue": "^2.6.11", "video.js": "^7.10.2", "videojs-contrib-hls": "^5.15.0", "mux.js": "^5.7.0" 一.安装 yarn add video.js yarn add videojs-contrib-hls // 这是播放hls流需要的插件 y

  • 如何在 Vue.js 中使用第三方js库

    在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦. 本文将介绍一些在 Vue.js 中使用第三方库的方式. 全局变量 在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到

随机推荐