一、知识回顾-Vue2项目基础操作与环境配置

1.1 项目启动

  • 项目打开方式：直接将项目文件夹（如my-app）拖拽到 Visual Studio Code（推荐编辑器），避免拖拽父级文件夹，防止路径混乱。
  • 启动命令：
    1. 进入项目根目录（必须与package.json同级），打开终端执行启动命令。
    2. 默认命令：npm run serve（命令定义在package.json的scripts字段中）。
    3. 命令变体：部分项目可能使用npm run dev或npm run start，需以实际项目package.json中的配置为准（例：若scripts: {"dev": "vue-cli-service serve"}，则执行npm run dev）。

  • 服务管理：
    • 关闭服务：终端中按Ctrl+C（Mac 为Command+C），输入y确认。
    • 重启服务：需先关闭现有服务，再重新执行启动命令，不可直接开新终端启动（避免端口占用）。
    • 终端切换：VS Code 可通过右侧标签页切换多个终端实例。

1.2 淘宝镜像配置

  • 作用：解决从国外 npm 仓库下载依赖速度慢的问题（国内服务器定期同步国外仓库代码，形成镜像副本）。
  • 切换逻辑：
    • 自动切换：当系统检测到下载速度过慢时，会提示是否切换至淘宝镜像。
    • 适用场景：仅在下载速度慢时配置，正常网络环境可无需设置（镜像内容与原仓库完全一致，不影响功能）。
  • 主动配置步骤：
    1. 打开终端，执行配置命令：npm config set registry https://registry.npm.taobao.org。
    2. 验证配置：执行npm config get registry，若返回淘宝镜像地址则配置成功。
    3. 注意事项：配置后下载地址会永久变更，如需恢复默认仓库，执行npm config set registry https://registry.npmjs.org。

1.3 项目访问与常见问题

  • 访问方式：启动成功后，终端会输出本地地址（如http://localhost:8080/），在浏览器中输入该地址即可访问项目。
  • 禁止直接访问 HTML：项目运行在集成服务器环境，直接双击public/index.html无法正常加载（依赖 Webpack 打包的模块化资源）。
  • 常见启动错误排查：
    • 错误场景 1：在父目录或子目录（如src）执行启动命令 → 解决方案：切换到package.json所在的根目录。
    • 错误场景 2：命令不存在（如npm run dev报错）→ 解决方案：查看package.json的scripts字段，确认正确命令。
    • 错误场景 3：端口占用 → 解决方案：终端按Ctrl+C关闭占用端口的服务，或重启终端。

二、项目文件结构与 SPA 概念

2.1 核心目录解析

目录/文件作用与说明注意事项
node_modules存放通过npm install下载的所有依赖包（如 Vue、Vue Router）通常无需修改内部代码，若需修改源码需谨慎（升级依赖可能覆盖修改）
public静态文件目录，存放项目唯一的 HTML 文件（单页应用核心）包含index.html（挂载点）和favicon.ico（浏览器标签图标）
src核心开发目录，所有业务代码在此编写开发的核心区域，需熟练掌握子目录功能
src/assets存放静态资源（图片、字体文件等）建议按类型分类（如assets/images、assets/fonts）
src/components存放公共复用组件（如导航栏、按钮、弹窗等）组件文件建议用 PascalCase 命名（如Navbar.vue）
src/store与 Vuex 相关的状态管理目录（用于多组件数据共享，后续章节讲解）初期可忽略，需使用 Vuex 时再配置
src/App.vue项目根组件，所有页面组件最终嵌套在该组件中单文件组件的典型示例，包含template、script、style三部分
src/main.js项目入口文件，建立所有 JS 文件的依赖关系链所有自定义 JS 必须直接/间接被该文件引入，否则无法生效

2.2 SPA 与 MPA 对比（单页应用 vs 多页应用）

对比维度单页应用（SPA）多页应用（MPA）
核心特点只有 1 个 HTML 文件，页面切换不刷新整体多个独立 HTML 文件，跳转时加载新页面
切换方式通过前端路由（如 Vue Router）动态替换内容通过超链接（<a>标签）跳转新页面
用户体验流畅（类似桌面/移动端 App）跳转时有加载延迟，体验较割裂
开发复杂度需处理路由、状态管理，复杂度较高无需路由，仅需处理页面间数据传递（如 URL 参数）
SEO 优化较差（内容动态渲染，搜索引擎难抓取）较好（每个页面独立 HTML，易被抓取）
适用场景后台管理系统、移动端 App、数据看板新闻网站、电商平台（如京东）、博客

三、核心文件深度解析

3.1 入口文件 main.js

main.js是项目的“入口大门”，所有 JS 依赖最终通过它关联，其核心作用是创建 Vue 实例并挂载到页面。

核心代码解析（Vue 2 示例）
// 1. 导入 Vue 核心包（从 node_modules 中查找）
import Vue from 'vue'
// 2. 导入根组件 App.vue（相对路径，需加 ./）
import App from './App.vue'
// 3. 导入路由实例（后续路由章节配置，可选）
// import router from './router'// 4. 关闭生产环境的错误提示（上线时隐藏控制台报错，避免暴露代码问题）
Vue.config.productionTip = false// 5. 创建 Vue 实例
new Vue({// router, // 路由实例（可选，需配置路由时添加）render: h => h(App) // 渲染根组件 App（h 是 createElement 的简写，用于创建虚拟 DOM）
}).$mount('#app') // 挂载到 index.html 中 id 为 app 的元素（等效于配置 el: '#app'）
关键知识点
  • 依赖链规则：若自定义 JS 文件（如src/a.js）未被main.js直接/间接引入（例：main.js引入c.js，c.js引入a.js），则该文件功能不会生效（Webpack 打包时会忽略未引入的文件）。
  • render函数作用：Vue 根组件需通过render函数渲染子组件（非根组件可通过components注册后直接使用），h(App)表示将App组件转换为虚拟 DOM 并渲染。
  • 挂载方式对比：
    • 传统方式：new Vue({ el: '#app' })（直接指定挂载点）。
    • 推荐方式：$mount('#app')（更灵活，可动态控制挂载时机）。

3.2 静态文件 public/index.html

该文件是项目唯一的 HTML 载体，所有 Vue 组件最终都会渲染到这个文件中。

核心代码解析
<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><!-- 适配移动端 --><meta name="viewport" content="width=device-width,initial-scale=1.0"><!-- 页面标题（由 Webpack 动态注入，配置在 package.json 中） --><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- 1. Vue 应用的挂载点：所有组件内容最终渲染到这里 --><div id="app"></div><!-- 2. 兼容性提示：浏览器禁用 JS 时显示 --><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><!-- 3. JS 自动注入：Webpack 打包时会将编译后的 JS 文件（如 main.js）自动插入这里，无需手动加 <script> 标签 --></body>
</html>
关键知识点
  • 自动注入机制：HTML 中未显式引入main.js，但 Webpack 会在打包时将所有依赖的 JS 合并并注入到<body>末尾，确保 DOM 加载完成后执行 JS。
  • 挂载点作用：id="app"的div是 Vue 实例的“容器”，Vue 会将虚拟 DOM 渲染为真实 DOM 并替换该容器内的内容。

四、单文件组件（.vue）详解

单文件组件（SFC）是 Vue 的核心特性，将组件的模板（HTML）、逻辑（JS）、样式（CSS） 封装在一个.vue文件中，结构清晰且便于维护。

4.1 基本结构与要求

一个完整的单文件组件必须包含template、script，style可选（若无需样式可省略）。

标准结构示例（Demo.vue）
<template><!-- 模板：必须有且只有一个根元素（通常用 div 包裹） --><div class="demo-container"><h1>{{ title }}</h1><p>{{ content }}</p></div>
</template>
<script>
// 逻辑：通过 export default 导出组件配置对象
export default {// 组件名称（建议与文件名一致，PascalCase 命名，非必需但便于调试）name: 'Demo',// 数据定义：必须是函数（避免组件复用时数据污染），返回对象data() {return {title: '单文件组件示例',content: '这是组件的动态内容'}},// 生命周期钩子（可选，如组件创建后执行）created() {console.log('Demo 组件已创建')}
}
</script>
<style scoped>
/* 样式：scoped 表示样式仅作用于当前组件（避免全局污染） */
.demo-container {width: 80%;margin: 0 auto;padding: 20px;border: 1px solid #eee;
}
h1 {color: #42b983; /* Vue 主题色 */
}
</style>
核心要求
  1. template规则：
    • 必须包含一个根元素（若有多个同级元素，需用div、template等标签包裹），否则会触发 ESLint 错误。
    • 支持 Vue 指令（如v-for、v-if、v-bind）和插值语法（{{ 变量 }}）。
  2. script规则：
    • 必须通过export default导出组件配置对象（否则无法被其他组件引入）。
    • data必须是函数（返回对象），而非直接定义对象（原因：组件复用后，每个实例会拥有独立的数据副本，避免数据共享污染）。
  3. style规则：
    • 若需样式隔离，添加scoped属性（原理：Webpack 会给组件内所有 DOM 元素添加唯一data-v-xxx属性，样式选择器会自动匹配该属性，如.demo-container[data-v-123]）。
    • 支持预处理器（如 SCSS）：需安装对应依赖（如node-sass、sass-loader），并在style标签中指定语言（例：<style lang="scss" scoped>）。

4.2 组件引入与注册

组件需先引入、再注册，最后才能在模板中使用，流程如下（以App.vue引入Demo.vue为例）：

步骤 1：引入组件

在父组件（如App.vue）的script中，通过import语法引入子组件：

// App.vue 的 script 部分
import Demo from './components/Demo.vue' // 相对路径：从当前目录下的 components 文件夹引入 Demo.vue
步骤 2：注册组件

在export default的components选项中注册引入的组件：

export default {name: 'App',components: {Demo // 等价于 Demo: Demo（ES6 简写，键和值同名时可省略值）}
}
步骤 3：使用组件

在父组件的template中，使用组件标签（支持两种写法）：

<template><div id="app"><!-- 写法 1：kebab-case（推荐，符合 HTML 标签命名规范） --><demo></demo><!-- 写法 2：PascalCase（与组件名一致，Vue 支持但不推荐在 HTML 中使用） --><!-- <Demo></Demo> --></div>
</template>
命名规范
  • 组件文件名：PascalCase（如UserProfile.vue），便于区分组件和普通文件。
  • 组件标签：在模板中使用kebab-case（如<user-profile>），符合 HTML 标签的小写命名习惯。
  • 避免使用保留字（如div、button）作为组件名，防止与原生标签冲突。

4.3 样式作用域与深度选择器

1. scoped的局限性
  • 当组件中使用scoped后，样式仅作用于当前组件的 DOM，无法修改子组件的样式（子组件的 DOM 没有当前组件的data-v-xxx属性）。
  • 例：若App.vue中用了scoped，无法直接修改Demo.vue中.demo-container的样式。
2. 深度选择器（解决子组件样式修改）

若需修改子组件样式，可使用深度选择器（不同预处理器语法不同）：

  • 原生 CSS：使用>>>（例：>>> .demo-container { color: red; }）。
  • SCSS/LESS：使用/deep/（例：/deep/ .demo-container { color: red; }）。
  • Vue 3 中：使用:deep()（例：:deep(.demo-container) { color: red; }）。
示例（App.vue修改Demo.vue样式）
<!-- App.vue 的 style 部分 -->
<style scoped>
/* 使用深度选择器修改 Demo 组件的 .demo-container 样式 */
>>> .demo-container {border-color: red;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/96924.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/96924.shtml
英文地址，请注明出处：http://en.pswp.cn/bicheng/96924.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

VS2022下载+海康SDK环境配置实现实时预览

VS2022下载+海康SDK环境配置实现实时预览

一.VS2022下载去官网下载就可以了&#xff1a;https://visualstudio.microsoft.com/zh-hans/vs/下载Community版本是免费的。&#xff08;2&#xff09;下载后得安装包VisualStudioSetup.exe打开&#xff1a;点击继续等待下载完成&#xff0c;出现如下界面&#xff0c;这里是选…
阅读更多...
YOLO 模型从 PyTorch 转换为 ONNX 并优化

YOLO 模型从 PyTorch 转换为 ONNX 并优化

YOLO 模型从 PyTorch 转换为 ONNX 并优化 在深度学习部署中&#xff0c;ONNX&#xff08;Open Neural Network Exchange&#xff09; 已成为跨框架与跨平台的标准格式。我们经常需要将 YOLOv8 在 PyTorch 中训练好的模型转换为 ONNX&#xff0c;并进行优化&#xff0c;以便在 …
阅读更多...
推进新型信息基础设施建设发展：蜂窝模组行业迎来结构性机遇

推进新型信息基础设施建设发展：蜂窝模组行业迎来结构性机遇

工信部副部长张云明在2025年9月9日国新办新闻发布会上明确表示&#xff0c;将"扎实推进新型信息基础设施建设发展"&#xff0c;并重点强调"打造新型工业网络&#xff0c;推进蜂窝车联网部署" 。这一政策表态对蜂窝模组行业产生深远影响&#xff0c;将推动行…
阅读更多...
返利app排行榜的缓存更新策略：基于过期时间与主动更新的混合方案

返利app排行榜的缓存更新策略：基于过期时间与主动更新的混合方案

返利app排行榜的缓存更新策略&#xff1a;基于过期时间与主动更新的混合方案 大家好&#xff0c;我是阿可&#xff0c;微赚淘客系统及省赚客APP创始人&#xff0c;是个冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在返利APP中&#xff0c;“热门商品排行榜”“用…
阅读更多...
科技信息差（9.12）

科技信息差（9.12）

AI量子计算重塑药物研发&#xff1a;技术融合路径与产业革命一、引言&#xff1a;技术融合的颠覆性机遇2025年9月&#xff0c;AI药物研发公共服务平台正式上线&#xff0c;宣称可将新药上市时间缩短近半1。与此同时&#xff0c;量子计算与AI的跨界合作在KRAS抑制剂开发中取得突…
阅读更多...
Java 分布式缓存实现：结合 RMI 与本地文件缓存

Java 分布式缓存实现：结合 RMI 与本地文件缓存

目录 一、核心思路 二、项目结构说明 2.1 服务端项目结构&#xff08;IDEA&#xff09; 2.2 客户端项目结构&#xff08;Eclipse&#xff09; 三、服务端实现&#xff08;IDEA&#xff09; 3.1 数据库访问层 3.2 远程接口定义 3.3 远程服务实现 3.4 服务端启动类 四、…
阅读更多...
Electron第一个应用

Electron第一个应用

1、安装node nodeJS下载 2、下载完成&#xff0c;需要配置环境。 写道path路径 、 3、安装完成&#xff0c;查看版本 npm -v4、 配置cnpm npm install -g cnpm --registryhttps://registry.npmmirror.com5、参考Electron 写&#xff1a; Electron第一个程序hello 6、安装…
阅读更多...
React 原理篇 - React 新架构深度解析

React 原理篇 - React 新架构深度解析

使用过 React v16 之前版本的开发者或许都经历过这样的场景&#xff1a;当页面包含复杂组件或大量列表时&#xff0c;输入框打字会卡顿&#xff0c;滚动会不流畅。这些体验问题的背后&#xff0c;往往与 React 的渲染机制密切相关。2017 年 React v16 推出的 Fiber 架构&#x…
阅读更多...
【JavaSE五天速通｜第三篇】常用API与日期类篇

【JavaSE五天速通｜第三篇】常用API与日期类篇

适合有其他语言基础想快速入门JavaSE的。用的资料是 Java入门基础视频教程 &#xff0c;从中摘取了笔者认为与其他语言不同或需要重点学习的内容 常用API与日期类只需要有印象即可&#xff0c;用到了再来这查 day04 常用API 一、StringBuilder类 StringBuilder代表可变字符…
阅读更多...
K8s学习笔记(二) Pod入门与实战

K8s学习笔记(二) Pod入门与实战

1 K8s核心资源Pod 1.1 Pod是什么&#xff1f; 官方文档&#xff1a;Pod | Kubernetes Pod 是 Kubernetes&#xff08;k8s&#xff09;中最小的部署与调度单元&#xff0c;并非直接运行容器&#xff0c;而是对一个或多个 “紧密关联” 容器的封装。 核心特点可简单总结为 3 …
阅读更多...
用 Python 调用 Bright Data MCP Server：在 VS Code 中实现实时网页数据抓取

用 Python 调用 Bright Data MCP Server：在 VS Code 中实现实时网页数据抓取

用 Python 调用 Bright Data MCP Server&#xff1a;在 VS Code 中实现实时网页数据抓取&#xff0c;本文介绍了Bright Data的Web MCP Server&#xff0c;这是一款能实现实时、结构化网页数据访问的API&#xff0c;适用于AI应用等场景。其支持静态与动态网页&#xff0c;前3个月…
阅读更多...
SPSS绘制ROC曲线并计算灵敏度、特异度

SPSS绘制ROC曲线并计算灵敏度、特异度

SPSS绘制ROC曲线并计算灵敏度、特异度。 &#xff08;1&#xff09;绘制ROC曲线&#xff1a; 输入&#xff1a;预测值、受试者标签。 在SPSS中点击“分析”-“分类”-“ROC曲线” 变量输入&#xff1a;检验变量输入预测值&#xff0c;状态变量输入受试者标签&#xff0c;如果标…
阅读更多...
Modbus协议原理与Go语言实现详解

Modbus协议原理与Go语言实现详解

目录 Modbus协议概述协议架构与通信模式Modbus数据模型Modbus协议帧格式功能码详解Go Modbus库完整实现高级应用示例调试与故障排除 Modbus协议概述 Modbus是一种串行通信协议&#xff0c;由Modicon公司&#xff08;现施耐德电气&#xff09;于1979年开发&#xff0c;用于PL…
阅读更多...
下载CentOS 7——从阿里云上下载不同版本的 CentOS 7

下载CentOS 7——从阿里云上下载不同版本的 CentOS 7

没有废话&#xff0c;直接上干货。跟着图片教程&#xff0c;一步一步来就行。 想下载其它版本的&#xff0c;自己可以再选择其它的就行。 想省事的朋友可以直接点击: 1、下载页面链接 2、CentOS-7-x86_64-DVD-2207-02(4.4GB).iso
阅读更多...
SpringBoot -原理篇

SpringBoot -原理篇

文章目录配置优先级Bean管理获取beanbean作用域第三方beanSpringBoot原理起步依赖自动配置自动配置原理方案源码跟踪原理分析 Conditional案例&#xff08;自定义starter&#xff09;案例&#xff08;自定义starter分析&#xff09;案例&#xff08;自定义starter实现&#xff…
阅读更多...
JavaScript与jQuery：从入门到面试的完整指南

JavaScript与jQuery：从入门到面试的完整指南

JavaScript与jQuery&#xff1a;从入门到面试的完整指南 第一部分&#xff1a;JavaScript基础 1.1 JavaScript简介 JavaScript是一种轻量级的解释型编程语言&#xff0c;主要用于Web开发&#xff0c;可以为网页添加交互功能。它是ECMAScript规范的一种实现。 // 第一个JavaScri…
阅读更多...
解决：Ubuntu、Kylin、Rocky系统中root用户忘记密码

解决：Ubuntu、Kylin、Rocky系统中root用户忘记密码

解决Linux系统中root用户忘记密码 Ubuntu2204 重启电脑&#xff0c;启动时&#xff0c;长按Shift键&#xff08;对于 BIOS 系统&#xff09;或 Esc 键&#xff08;对于 UEFI 系统&#xff09;进入GRUB菜单 步骤1&#xff1a;重启Ubuntu系统&#xff0c;长按Shift键进入Ubuntu…
阅读更多...
ENVI系列教程（二）——自定义坐标系（北京 54、西安 80、2000 坐标系）

ENVI系列教程（二）——自定义坐标系（北京 54、西安 80、2000 坐标系）

目录 1 概述 1.1 地理投影的基本原理 1.2 国内坐标系介绍 1.3 参数的获取 2 详细操作步骤 2.1 添加椭球体 2.2 添加基准面 2.3 定义坐标系 2.4 使用自定义坐标系 1 概述 1.1 地理投影的基本原理 常用到的地图坐标系有 2 种，即地理坐标系和投影坐标系。地理坐标系是…
阅读更多...
一种基于因果干预的少样本学习的故障诊断模型

一种基于因果干预的少样本学习的故障诊断模型

一、研究背景与问题 ​工业背景​：机械故障诊断对工业系统安全至关重要，但实际中故障样本稀少，难以训练传统深度学习模型。 ​现有问题​： 当前少样本学习（FSL）方法大多基于相关性而非因果关系建模，容易学习到伪相关特征，导致模型可解释性差、泛化能力弱。 跨组件故障诊…
阅读更多...
机器视觉光源的尺寸该如何选型的方法

机器视觉光源的尺寸该如何选型的方法

机器视觉光源的尺寸该如何选型的方法&#x1f3af;机器视觉光源的尺寸选型的方法&#x1f3af;一、选型案例&#x1f3af;二、照射方式&#x1f3af;三、镜头选择&#x1f3af;四、光源架构光源的工作距离与视野大小&#x1f3af;五、总结&#xff1a;光源选型 —— 机器视觉检…
阅读更多...
最新文章

Copyright @ 2022~2023