首页 > 网络编程 > JavaScript > javascript技巧 > html，css，JS和vue关系

前端开发之html，css，JavaScript和vue关系详解

2026-03-08 11:01:13 作者：结网的兔子

作为一名前端开发者,掌握 HTML、CSS、JavaScript 和Vue.js 是必不可少的技能,下面这篇文章主要介绍了前端开发之html,css,JavaScript和vue关系的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

HTML、CSS、JavaScript 是什么？（三大基石）

HTML - 房子的结构骨架

是什么：超文本标记语言，由一系列标签组成。

作用：定义网页的内容和结构。就像盖房子时的承重墙、房间布局。

<div id="app">
  <h1>标题</h1>
  <p>一段文字</p>
  <button>点我</button>
</div>

CSS - 房子的装修装饰

是什么：层叠样式表。

作用：控制网页的外观和布局。就像给房子刷墙、铺地板、摆家具。

h1 {
  color: red;           /* 把标题变成红色 */
  font-size: 24px;      /* 把字体变大 */
}

button {
  background: blue;     /* 按钮背景变蓝 */
  border-radius: 5px;   /* 按钮变圆角 */
}

JavaScript - 房子的水电网络

是什么：一门脚本编程语言。

作用：赋予网页交互和行为。就像房子的电路、水管、智能家居系统。

let count = 0;
const button = document.querySelector('button');
button.addEventListener('click', () => {
  count++;
  console.log(`按钮被点击了 ${count} 次`);
  // 可以动态修改HTML内容或CSS样式
});

简单比喻：

HTML 是人的骨骼 - 决定了长什么样
CSS 是人的皮肉/衣服 - 决定了好看不好看
JavaScript 是人的大脑和神经 - 决定了能不能动、怎么反应

Vue 是什么？它在这三者之上扮演什么角色？

Vue - 智能的施工队长/自动化管理系统

是什么：一套基于 JavaScript 构建的渐进式框架。

作用：让你更高效、更有条理地指挥 HTML、CSS、JavaScript 协同工作。

它主要做了三件事：

声明式渲染：告诉 Vue “这里要显示什么”，它会自动操作DOM

<!-- 不用Vue：手动找元素、改内容 -->
<div id="message"></div>
<script>
  document.getElementById('message').innerText = 'Hello';
</script>

<!-- 用Vue：告诉Vue这里要显示什么 -->
<div id="app">
  <p>{{ message }}</p>  <!-- 声明：这个位置显示message -->
</div>
<script>
  const app = Vue.createApp({
    data() {
      return { message: 'Hello' }  // 数据变了，视图自动变
    }
  }).mount('#app');
</script>

组件化开发：把HTML、CSS、JS打包成可复用的积木

<!-- Button.vue - 一个完整的按钮组件 -->
<template>
  <button class="my-btn" @click="handleClick">
    {{ text }}  <!-- 显示动态文字 -->
  </button>
</template>

<script>
export default {
  props: ['text'],  // 从外部接收数据
  methods: {
    handleClick() {
      alert('按钮被点了！');
    }
  }
}
</script>

<style scoped>
.my-btn {
  background: blue;  /* 样式也打包在一起 */
  color: white;
}
</style>

响应式系统：数据变了，所有用到这个数据的地方自动更新

Vue、JavaScript、CSS和HTML通过两种截然不同的方式协作，形成网页的多个页面：一种是体验流畅但结构相对复杂的单页应用（SPA），另一种是结构直观、对搜索引擎更友好的多页应用（MPA）。你可以把它们想象成一本精装书和一个文件柜。

下面我们来详细看看它们各自是如何协作的，以及各自的优缺点。

方式一：单页应用（SPA）- 像一本精装书

这是Vue.js最主流的打开方式。整个应用就像一个只有一张“纸”（一个HTML文件）的精装书，但通过目录（Vue Router）来动态展示不同的内容章节。

一个“壳”文件 (HTML)
Vue项目在最初，只会有一个index.html文件。它基本上就是一个空壳子，最重要的部分是一个<div id="app"></div>这样的挂载点，以及一个链接到主要JavaScript文件的<script>标签。

📍 <div id="app"></div> 里一般包含什么？

这是一个挂载点，是Vue接管页面的入口。在初始的HTML文件里，它通常是空的：

<!DOCTYPE html>
<html>
<head>
  <title>我的Vue应用</title>
  <!-- 这里可能有一些全局CSS链接 -->
</head>
<body>
  <!-- 这是一个空的挂载点 -->
  <div id="app"></div>
  
  <!-- 这里会引入JavaScript文件 -->
  <script src="/js/app.js"></script>
</body>
</html>

在运行时，Vue会把整个应用的根组件渲染到这个div里。这个根组件会包含：

网站的公共布局（头部导航、侧边栏、底部版权）
路由出口 <router-view>（显示当前页面的内容）
全局的UI组件（弹窗、加载提示等）

所以最终渲染后，它可能变成：

<div id="app">
  <div class="layout">
    <header>网站导航栏...</header>
    <main>
      <!-- 当前页面的具体内容 -->
      <h1>首页</h1>
      <p>欢迎来到我的网站</p>
    </main>
    <footer>版权信息...</footer>
  </div>
</div>

📄 主要JavaScript文件里面包含什么？

这个文件是Vue应用的发动机和总控室（通常是 main.js 或 app.js）：

// 1. 引入必要的依赖
import { createApp } from 'vue'           // Vue核心
import App from './App.vue'               // 根组件
import router from './router'              // 路由配置
import store from './store'                // 状态管理（如果是Vuex/Pinia）
import './styles/global.css'               // 全局样式

// 2. 创建Vue应用实例
const app = createApp(App)

// 3. 安装插件
app.use(router)      // 启用路由功能
app.use(store)       // 启用状态管理

// 4. 全局配置
app.config.errorHandler = (err) => {
  console.error('全局错误捕获:', err)
}

// 5. 注册全局组件
import MyButton from './components/MyButton.vue'
app.component('MyButton', MyButton)  // 这样任何地方都能用<MyButton />

// 6. 挂载到DOM
app.mount('#app')   // 找到<div id="app">，把整个应用放进去

总结一下这个文件的作用：

🚀 启动应用：创建Vue实例
🧩 装配零件：把根组件、路由、状态管理等组装起来
⚙️ 全局设置：配置错误处理、注册全局组件
🎯 找到挂载点：把组装好的应用放到HTML页面上

无数个“积木” (Vue组件)
你用Vue的单文件组件（.vue文件）来搭建页面。每个组件内部，都用自己的 HTML模板 定义结构、JavaScript 代码定义行为和 CSS 样式来定义外观。这就好比你把不同章节的内容做成了一个个独立的积木块。
一个智能的“翻书人” (Vue Router)
Vue Router是Vue官方的路由管理器。它会监听浏览器URL的变化，并根据你提前配置好的路由规则（比如 / 对应首页，/about 对应关于页面），动态地销毁当前显示的组件，并创建和渲染新的组件。这一切都在同一个页面内完成，不会触发浏览器的刷新。
```
// router/index.js 路由配置示例
const routes = [
  { path: '/', component: Home },      // 访问 '/' 时，展示 Home 组件
  { path: '/about', component: About } // 访问 '/about' 时，展示 About 组件
]
```
一个总装车间 (JavaScript)
最后，main.js这个入口文件会负责创建Vue应用实例，安装上Vue Router，然后把这个“精装书”的“封面”（整个Vue应用）挂载到index.html的<div id="app">上。

整个过程就像这样：
用户首次访问 -> 加载index.html和庞大的app.js -> Vue Router根据当前URL，找到对应的“积木”（组件） -> 把这个组件渲染到页面的指定区域。用户点击链接时，Vue Router再次重复最后两步，实现页面内容的“无刷新”替换。

方式二：多页应用（MPA）- 像一个文件柜

在这种模式下，Vue.js更多的是用来增强每个独立页面的交互性。整个项目像是一个文件柜，每个页面都是一个独立的文件夹或文件。

多个独立的HTML文件
你的项目里会有多个.html文件，例如index.html（首页）、about.html（关于我们）等。每个文件都是一个完整的、独立的页面。

每个页面独立的Vue实例
在每个HTML文件中，你都可以通过<script>标签引入Vue，并创建一个新的Vue实例来控制该页面上的某个区域。

<!-- about.html -->
<body>
  <div id="aboutPage">
    <h1>{{ message }}</h1>
  </div>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp } = Vue
    const app = createApp({
      data() {
        return { message: '欢迎来到关于我们页面！' }
      }
    })
    app.mount('#aboutPage')
  </script>
</body>

构建工具的配合
为了更高效地开发和打包，通常会使用Webpack或Vite这样的构建工具。你需要配置多个“入口”文件，构建工具会为每个页面生成一个独立的、包含该页面所需JavaScript和CSS的文件包。

// vue.config.js 多页面配置示例
module.exports = {
  pages: {
    index: { // 为首页配置入口
      entry: 'src/pages/index/main.js',
      template: 'public/index.html',
      filename: 'index.html',
    },
    about: { // 为关于页配置入口
      entry: 'src/pages/about/main.js',
      template: 'public/about.html',
      filename: 'about.html',
    }
  }
}

整个过程就像这样：
用户访问/about路径 -> 浏览器向服务器请求about.html文件 -> 服务器返回完整的about.html，浏览器加载并渲染。如果about.html里创建了Vue实例，那这个实例就会接管页面上#aboutPage区域内的交互。

两种方式，该如何选择？

理解了它们的工作原理，选择起来就清晰多了：

特性	单页应用 (SPA)	多页应用 (MPA)
工作方式	一个HTML文件 + 路由动态切换组件	多个独立HTML文件，整页刷新跳转
用户体验	非常流畅，接近原生应用	页面切换有明显刷新感
首屏加载	较慢，需加载完整框架和代码后才渲染	很快，直接返回HTML即可展现
SEO友好度	差，搜索引擎难以抓取动态内容	好，每个页面都是独立完整的HTML
适用场景	后台管理系统、交互复杂的Web App（如在线文档）	公司官网、新闻门户、博客等内容展示型网站

总结

到此这篇关于前端开发之html，css，JavaScript和vue关系的文章就介绍到这了,更多相关html，css，JS和vue关系内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！