NodeJS 项目加入 Normalize.css
原创NodeJS 项目加入 Normalize.css
原创
tonglei0429
发布于 2022-04-21 10:34:06
发布于 2022-04-21 10:34:06
基本介绍：
Normalize.css 是一个精炼的样式文件，它调整了部分网页元素的默认样式，使得网页可以在不同浏览器上呈现出一致的效果。
资源地址：
normalize.css - npm (npmjs.com)
安装方法：
NPM
npm install --save normalize.cssCDN
https://yarnpkg.com/en/package/normalize.css
下载
https://necolas.github.io/normalize.css/latest/normalize.css
在 VUE 项目中使用：
方法一：
在 main.ts 中导入。
// src/main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
import "normalize.css"; // 引入 css 文件
createApp(App).use(router).mount("#app");方法二：
在 App.vue (或任意vue文件) 中导入
// src/App.vue
<template>
<router-view></router-view>
</template>
<style>
/* 引入样式 */
@import url("normalize.css");
</style>
方法三：
在 index.html 中引入
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<!-- 引入 (CDN) 样式文件 -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/browse/normalize.css@8.0.1/normalize.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>富而喜悦</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
方法四：
在 css 文件中引入
/* src/assets/style.css */
@import url('normalize.css');
/* 自定义其他样式 */原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。