前端开发基础：HTML、CSS、JavaScript 与 Vue 的关系 | 极客日志

JavaScript大前端

前端开发基础：HTML、CSS、JavaScript 与 Vue 的关系

阐述了前端开发中 HTML、CSS、JavaScript 三大基石的定义与作用，以及 Vue 框架如何协同三者工作。通过建筑比喻解析技术角色，对比了单页应用（SPA）与多页应用（MPA）的协作方式、优缺点及适用场景，为前端架构选择提供参考。

静心发布于 2026/3/29更新于 2026/4/176 浏览

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

HTML - 房子的结构骨架

是什么：超文本标记语言，由一系列标签组成。作用：定义网页的内容和结构。就像盖房子时的承重墙、房间布局。

<div>
  <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();
  
});

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

<!-- Button.vue - 一个完整的按钮组件 -->
<template>
  <button @click="handleClick">
    {{ text }} <!-- 显示动态文字 -->
  </button>
</template>
<script>
export default {
  props: ['text'], // 从外部接收数据
  methods: {
    handleClick() {
      alert('按钮被点了！');
    }
  }
}
</script>
<style scoped>
.my-btn {
  background: blue; /* 样式也打包在一起 */
  color: white;
}
</style>

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

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

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

📍 <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>
    <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>，把整个应用放进去

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

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

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

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

构建工具的配合 为了更高效地开发和打包，通常会使用 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',
    }
  }
}

每个页面独立的 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>

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

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

前端开发基础：HTML、CSS、JavaScript 与 Vue 的关系

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

HTML - 房子的结构骨架

CSS - 房子的装修装饰

JavaScript - 房子的水电网络

更多推荐文章

相关免费在线工具

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

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

Vue、JavaScript、CSS 和 HTML 如何协同，形成前端页面

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

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

🤔 两种方式，该如何选择？

前端开发基础：HTML、CSS、JavaScript 与 Vue 的关系

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

HTML - 房子的结构骨架

CSS - 房子的装修装饰

JavaScript - 房子的水电网络

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

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

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

Vue、JavaScript、CSS 和 HTML 如何协同，形成前端页面

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

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

🤔 两种方式，该如何选择？