原型Html转Vue（详细步骤）
- html的页面构成
- vue的页面构成
- 开始转（可直接看这个）
-
- css细节点
-
- （1）scoped 表示只有当前页面受到影响
- （2）实现穿透作用域操作的符号（/deep/ 和::v-deep 和＞＞＞）
- （3）引入css存在的坑（请记住此处的是css的文件！！！）
- （4）对于jQuery 导入方式
- 遇到的问题
前言：ui原型交互后切图给开发程序员，开发程序员嵌入改造
本文是html页面转vue页面
html的页面构成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>某某大屏页面</title>
<!--公共的css样式的文件-->
<link rel="stylesheet" href="css/public.css" />
<!--特别的css样式的文件-->
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="bs_wrapper idx_wrapper" id="app">
<div class="bs_header">
<div class="h_time">12:22:05 2024-04-19 星期五</div>
</div>
</div>
<!--jq版本包-->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!--对DOM（文档对象模型）元素进行jq操作：里面都是一些操作节点的一系列方法-->
<script type="text/javascript" src="js/index.js"></script>
<script>
<!--dom-->
$(".tab_tit .item ").click(function() {
$(this).addClass("active").siblings().removeClass("active")
})
</script>
</body>
</html>
HTML页面的加载顺序是一个复杂但有序的过程。
以下是HTML页面加载的一般顺序和相关元素的角色：
| 元素 | 说明 |
|---|---|
| DOCTYPE声明 | 首先，浏览器会读取DOCTYPE声明，这告诉浏览器文档使用哪种HTML版本 |
| HTML | （1）然后，浏览器从<html>标签开始解析HTML文档（2） html元素是文档的根元素，包含整个页面的内容。 |
| Head | 接着，浏览器会解析<head>标签内的内容 （1）文档的元数据，如 <title>、<meta>标签等。（2）样式表链接（ <link rel="stylesheet" ...>），浏览器会下载并解析这些CSS文件。（3）脚本链接（ <script src="...">），浏览器会尝试下载并解析这些外部JavaScript文件。但是，如果脚本在<head>中并且没有设置async或defer属性，那么浏览器会等待脚本下载并执行完成后再继续解析HTML。（4）还有其他可能的内容，如 <style>标签内的CSS样式。 |
| Body | 当<head>解析完成后，浏览器会开始解析<body>标签内的内容。 （1）浏览器会按照HTML文档中的顺序加载和渲染DOM（文档对象模型）元素。 （2）如果在 <body>中遇到<script>标签并且没有设置async或defer属性，浏览器会暂停HTML解析，下载并执行JavaScript代码，然后再继续解析HTML。 （3）同时，浏览器会开始加载图片、音频、视频等外部资源。 |
说到DOM（文档对象模型） 就不得不讲一下DOM和CSS/JavaScript的关系的关系
- 浏览器对HTML文档的解析结果为DOM
- CSS用于描述DOM元素的样式和布局
- JavaScript可以修改DOM结构、样式和行为。它最好在DOM加载完成后执行，
了确保 JavaScript 行为能够正确地与 DOM 交互并提供良好的用户体验和性能，通常建议在 DOM 加载完成后执行这些行为。
说到JavaScript 就不得不讲一下jQuery的加载
- jQuery是一个流行的JavaScript库，它简化了JavaScript编程的复杂性。
- 如果在HTML文档中使用jQuery，通常需要将jQuery库文件（如
jquery.min.js）通过<script>标签引入。 - jQuery的加载和执行顺序取决于
<script>标签在HTML文档中的位置和属性设置。 - 如果将jQuery库文件放在
<head>中，并且没有设置async或defer属性，那么浏览器会等待jQuery库文件下载并执行完成后再继续解析HTML。 - 如果将jQuery库文件放在
<body>的底部，或者设置了async或defer属性，那么浏览器可以在下载和执行jQuery库文件的同时继续解析和渲染HTML。 - jQuery的
$(document).ready()函数用于在DOM加载完成后执行JavaScript代码。
这意味着即使jQuery库文件在<head>中加载，使用$(document).ready()包裹的代码也会在DOM加载完成后才执行。
总结：HTML页面的加载顺序是从上到下，
先解析<head>再解析<body>。
DOM是浏览器对HTML文档的解析结果，CSS用于描述DOM元素的样式和布局，
JavaScript（包括jQuery）可以修改DOM结构、样式和行为。
jQuery的加载和执行顺序取决于<script>标签在HTML文档中的位置和属性设置。
vue的页面构成
<template>
<div class="main">
<h1>{
{ message }}</h1>
<button @click="increment">Increment</button>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如工具js：
//import "../../../util/newdp/js/jquery-3.3.1.js";
//import "../../../util/newdp/js/index2.js";
//例如导组件：
//import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {
//如果有导入组件的话，需要在这里进行注入
},
data() {
//这里存放数据
return {
//这个没问题吧，很容易想到
message: 'Hello Vue!',
counter: 0
};
},
//监听属性 类似于data概念
computed: {
},
//监控data中的数据变化
watch: {
},
//方法集合
methods: {
increment() {
this.counter ;
}
},
//生命周期 - 创建完成（可以访问当前this实例）
