所有 html 如何 引入 公共js和css
时间: 2023-11-22 17:05:06 浏览: 49
可以通过以下方式在 HTML 中引入公共的 JavaScript 和 CSS 文件:
1. 引入 JavaScript 文件:
```
<script src="path/to/common.js"></script>
```
2. 引入 CSS 文件:
```
<link rel="stylesheet" href="path/to/common.css">
```
通常,这些文件应该放在一个单独的文件夹中,例如“/assets/”或“/public/”。然后,您可以在 HTML 文件的头部部分使用上述代码来引用它们。
请注意,如果您有多个 JavaScript 或 CSS 文件需要引入,最好将它们合并成一个文件,以减少页面加载时间。您可以使用工具如 Webpack 或 Gulp 来自动化这个过程。
相关问题
vue封装公共的css样式
在Vue中封装公共的CSS样式可以通过以下几个步骤实现:
1. 创建一个新的CSS文件,在其中定义公共样式。可以使用任何命名约定,比如`common.css`或者`global.css`。
2. 在Vue项目中引入该CSS文件。有多种方式可以实现,最常见的是在入口文件(比如`main.js`)中引入该文件:
```javascript
import '@/assets/css/common.css';
```
这里假设你将公共CSS文件放在`src/assets/css/`目录下。
3. 在Vue组件中使用公共样式。你可以直接在组件的模板中使用CSS类名,这些类名在公共CSS文件中进行定义。例如:
```html
<template>
<div class="my-component">
<!-- 组件内容 -->
</div>
</template>
<style>
.my-component {
/* 使用公共样式 */
color: blue;
font-size: 16px;
}
</style>
```
这里`.my-component`是公共CSS文件中定义的一个样式类名。
通过这种方式,你可以将公共的CSS样式封装到一个文件中,并在需要的地方引用和使用它。这样可以提高代码的可维护性和重用性,同时也能保持样式的一致性。
vue怎么在单个组件引入css
在 Vue 单文件组件中,可以使用 `<style>` 标签引入组件的 CSS 样式。
比如,在组件的 .vue 文件中,可以添加如下代码:
```html
<template>
<!-- 组件的模板代码 -->
</template>
<script>
export default {
// 组件的 JavaScript 代码
}
</script>
<style>
/* 组件的 CSS 样式 */
</style>
```
在 `<style>` 标签中,你可以写入组件的 CSS 样式代码。这些样式只会作用于当前组件,而不会影响到其他组件或全局的样式。
如果你希望在全局中引入一些公共的 CSS 样式,可以在 Vue 项目的入口文件中引入这些样式,比如在 `main.js` 文件中:
```js
import Vue from 'vue';
import App from './App.vue';
// 引入公共 CSS 样式
import './assets/css/common.css';
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
```
在这个例子中,我们在 `main.js` 文件中引入了 `common.css` 文件,这些样式会作用于整个 Vue 项目。但是,在单个组件中,我们可以定义一些特定的样式,这些样式只会作用于该组件内部,不会影响到其他组件或全局的样式。