引用外部CSS

全局引用css

方法一：

①将公共css文件放到src/assets/css文件夹中
②在main.js文件中引入
import './assets/css/gloable.css';

方法二：

在框架模板public/index.html文件种引用
1、css文件在public/css文件夹下，link路径为：
<link rel="stylesheet" href="./css/gloable.css">
2、css文件如果是在src/assets/css文件夹下，link路径为：
<link rel="stylesheet" href="<%= BASE_URL %>css/gloable.css">

单文件引入CSS

在 .vue 文件末尾写入<style> </style>标签，然后通过@import “css文件URL”;引入css，也可以在style中写入多个@import ，示例如下：
<template>
·
·
·
</template>
<style>@import "css/home.css";@import "css/test.css";
</style>
注： css文件在src/views/css文件夹下

引用外部JS

全局引用JS

在框架模板public/index.html文件种引用
1、JS文件在public/js文件夹下，引用路径为：
<script src="./js/test1.js"></script>
<script src="./js/test2.js"></script>
2、JS文件在src/assets/js文件夹下，引用路径为：
<script src="<%= BASE_URL %>js/test1.js"></script>
<script src="<%= BASE_URL %>js/test2.js"></script>

单页面引用JS

方法一：

通过操作DOM创建 <script> </script> 标签引入外部JS，示例如下：
<script>name: "test",mounted(){let script = document.createElement('script');script.type = 'text/javascript';script.src = './js/test.js';document.body.appendChild(script);this.$message.success('success')}
</script>
注：test.js文件在public/js文件夹下

方法二：

通过import {*} from “js文件URL”，示例如下：
<script>import { test} from './js/test.js'
</script>
注：test.js文件在public/js文件夹下

vue-cli项目引用外部CSS和JS相关推荐

HTML引用外部css 、js的路径
上半部分原文地址: https://blog.csdn.net/Ada_lake/article/details/89956457 HTML引用外部css,其实说简单点就是 href 内填入路径即可 ...
Vue Cli 项目结构简述
webnode_modules --Vue Cli 项目以来的js模块全放到这里public --存放静态资源存放自己的js cssfavicon.ico -- 浏览器小图标index.html - ...
Vue项目9：Vue Cli项目使用echarts可视化
Vue Cli项目使用echarts可视化有两种方式:一.直接引入echarts 二.使用vue-ehcarts. 一.直接引入echarts 1.创建Vue Cli项目进入cmd命令行,输入如 ...
vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客简介说明本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析从给出的提示可以看出 ...
PHP外部引用样式,PHP引用外部css有什么好处
PHP引用外部css的好处有:1.网页处理速度会更快一些:2.可以防止一些电脑程度较低的使用者直接看到CSS语法:3.维护方便. PHP引用外部css有什么好处? php页面外部调用css样式表时有三 ...
maven引用公共包_maven项目引用外部jar包的方法
问题描述: 有一个java maven web项目,需要引入一个第三方包gdal.jar,但是这个包是自己打包的,在maven中央库里面找不到该包,因此我采用传统的方式,将这个包拷贝到:项目名称\sr ...
html引用外部css文件（使用绝对路径）
html代码引用外部css文件时若css文件在本文件的父目录下的其他目录下,可使用绝对路径.此时路径要写为 " /... "形式,如在tomcat下建立一个test文件,在该文件 ...
jsp引入外部css或js不生效
jsp页面中引入的是外部css或js 在css或js中进行了微调(调整后代码不会报错,如果报错了,兄台先把错误解决了再继续看) 打开页面F5刷新,不生效! 好的,使出必杀ctrl + F5,不生效! ...

vue-cli项目引用外部CSS和JS

vue-cli项目引用外部css和js

引用外部CSS

全局引用css

单文件引入CSS

引用外部JS

全局引用JS

单页面引用JS

vue-cli项目引用外部CSS和JS相关推荐

最新文章

热门文章