谷粒商城实战笔记-43-前端基础-Vue-使用Vue脚手架进行模块化开发

文章目录

  • 一，Vue的模块化开发
    • 1，目录结构
    • 2，单文件组件 (SFC)
    • 3，模块化路由
    • 4，Vuex 模块
    • 5，动态组件和异步组件
    • 6，抽象和复用
    • 7，构建和打包
    • 8，测试
    • 9，文档和注释
    • 10，持续集成/持续部署 (CI/CD)
  • 二，实战
    • 1，全局安装 webpack
    • 2，全局安装 vue 脚手架
    • 3，初始化 vue 项目
    • 4，启动 vue 项目
  • 三，Vue应用原理初探
    • 1，main.js
    • 2，App.vue
      • 3.1 模板部分（`<template>`）
      • 3.2 脚本部分（`<script>`）
      • 3.3 样式部分（`<style>`）
    • 4，动手实战-自定义组件和路由
      • 4.1 创建Hello.vue组件
      • 4.2 配置路由
      • 4.3 router-link
  • 错误参考

前面主要是学习Vue的基础知识，这一节的主要内容是在实际项目中使用Vue的正确姿势。

掌握了这节内容之后，就可以参与到真实Vue项目的开发了。

一，Vue的模块化开发

在真实的 Vue.js 项目中，模块化开发是一种常见且推荐的实践方式，它帮助开发者将应用程序分解成更小、更可管理的部分。

这种做法不仅提高了代码的可读性和可维护性，还促进了团队协作和组件的复用。

下面是从工程角度介绍如何在 Vue.js 项目中实现模块化开发。

1，目录结构

在这里插入图片描述

这张图片展示了一个由 Vue CLI 创建的新项目的基本目录结构。以下是各个目录和文件的作用：

  1. build: 包含构建相关的配置文件和脚本，如 webpack.base.conf.js、webpack.dev.conf.js 和 webpack.prod.conf.js，分别用于基础、开发和生产的 Webpack 配置。

  2. config: 存放项目配置文件，如 index.js，用于设置项目路径、端口等信息。

  3. node_modules: 存放项目依赖的 npm 包。

  4. src: 主要的源码目录，包含应用的所有源代码。

    • static: 存放静态资源，如图片、CSS 文件等，会被直接复制到最终的构建产物中。
    • src
      • components: 存放 Vue 组件。
      • App.vue: 应用的主组件。
      • main.js: 应用的入口文件，导入和注册组件，启动 Vue 应用。
      • router: 存放 Vue Router 的配置。
      • store: 如果使用 Vuex，则存放状态管理的文件。

  5. .babelrc: Babel 的配置文件，用于转译 ES6+ 语法到兼容性的 JavaScript。

  6. .editorconfig: 编辑器配置文件，用于保持不同编辑器和 IDE 之间的一致性。

  7. .gitignore: Git 忽略文件，列出不需要跟踪的文件和目录。

  8. postcssrc.js: PostCSS 的配置文件，用于添加 CSS 前缀和转换其他 CSS 任务。

  9. index.html: 应用的 HTML 入口文件，通常用来引入 <script> 标签引用构建后的 JavaScript 文件。

  10. package-lock.json: npm 的锁定文件，记录了确切的依赖版本，保证团队成员使用相同的依赖版本。

  11. package.json: 项目元数据和依赖管理文件，包含项目名称、版本、依赖、脚本等信息。

  12. README.md: 项目说明文件，通常包含项目简介、使用指南等内容。

  13. README.md: 项目说明文件，通常包含项目简介、使用指南等内容。

以上是一个基本的 Vue.js 项目结构，随着项目的增长，你可能会添加更多自定义的文件和目录，比如新的组件、服务、测试等。

2，单文件组件 (SFC)

Vue.js 支持单文件组件（Single File Components），每个组件可以包含 .vue 文件中的模板、脚本和样式。这使得组件内部的代码组织更加清晰，易于维护。

3，模块化路由

Vue Router 可以配置为模块化的路由系统，允许将不同的功能区域（模块）分割到不同的文件或目录中。例如，一个电子商务网站可能会有“产品”、“购物车”和“用户”等模块，每个模块都有自己的路由配置。

4，Vuex 模块

如果项目使用 Vuex 状态管理，你可以将不同的功能领域拆分成各自的模块。这样可以避免状态之间的耦合，使状态管理更加清晰和易于测试。

5，动态组件和异步组件

利用 Vue.js 的动态组件和异步组件特性，可以在运行时按需加载组件，这对于大型应用来说可以显著提升性能和加载速度。

6，抽象和复用

尽量抽象出通用的组件和功能，如布局、表单、按钮等，以便在整个项目中复用，减少重复代码，提高开发效率。

7，构建和打包

使用 Webpack 或 Vite 等构建工具来处理模块的加载和打包。这些工具可以帮助你进行代码分割、压缩、热更新等，从而优化生产环境下的性能。

8，测试

编写单元测试和集成测试来确保每个模块的功能正确无误。Vue Test Utils 和 Jest 是常用的测试框架。

9，文档和注释

维护良好的文档和代码注释对于模块化开发至关重要，它帮助新加入的开发者更快地理解和使用现有模块。

10，持续集成/持续部署 (CI/CD)

设置 CI/CD 流水线，自动执行构建、测试和部署流程，确保每次提交的质量，并自动化部署过程。

二，实战

下面从0到1创建一个标准的Vue模块化项目。

1，全局安装 webpack

npm install webpack -g

2，全局安装 vue 脚手架

npm install -g @vue/cli

3，初始化 vue 项目

vue init webpack vue-demo

基于vue 脚手架和 webpack 模板初始化一个名为vue-demo的Vue项目。

在这里插入图片描述
初始化工程的过程中有几个交互：

vue init webpack vue-demo 是使用 Vue CLI 2.x 版本时的一个命令，用于初始化一个新的 Vue.js 项目。此命令使用 webpack 模板来创建一个名为 vue-demo 的项目。在执行此命令时，CLI 会引导你完成一系列的交互式配置步骤，这些步骤通常包括以下几项：

  • ① Project name (项目名称): 默认情况下，这将是你通过命令指定的项目名，例如 vue-demo。你可以根据需要修改项目名称。

  • ② Project description (项目描述): 描述你的项目。这是一个可选字段，可以输入简短的项目说明。

  • ③ Author (作者): 输入项目作者的名字或其他标识信息。

  • ④ Vue build (Vue 构建类型): 选择你想要使用的 Vue 构建版本。选项通常包括 runtime + compiler 和 runtime-only。前者包含模板编译器，可以在运行时解析和编译模板字符串；后者则不包含编译器，适用于预编译的场景，体积更小。

  • ⑤ Install Vue Router? (是否安装 Vue Router): 询问你是否需要在项目中集成 Vue Router，即是否需要路由功能。

  • ⑥ Use ESLint to lint your code? (是否使用 ESLint 校验代码): 决定是否在项目中启用代码质量检查工具 ESLint。

  • ⑦ Setup unit tests with Karma + Mocha? (是否设置单元测试): 询问是否需要设置单元测试框架，通常会使用 Karma 作为测试运行器，Mocha 作为测试框架。

回答完这些交互问题后，CLI 将会基于你的选择创建项目结构和配置文件，然后安装必要的依赖包。一旦完成，你就可以开始开发你的 Vue.js 应用了。

4，启动 vue 项目

项目的 package.json 中有 scripts，代表我们能运行的命令。

  • 启动项目npm start 或 npm run dev
  • 将项目打包 npm run build

在上一步创建的项目的根目录下，执行命令npm run dev。

在这里插入图片描述
启动成功后，在浏览器访问：http://localhost:8080/#/，界面如下，说明初始化、启动成功。

在这里插入图片描述

三，Vue应用原理初探

1，main.js

项目中的index.html是主页面，但是其非常简单，如果不搞懂Vue项目运行的原理，很难理解这一点。

要理解Vue项目是如何运行起来的，要从程序主入口main.js入手，其代码如下。

import Vue from 'vue'
import App from './App'
import router from './router'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

这段代码是 Vue.js 应用程序的入口文件，通常是 main.js 或 main.ts，其作用是初始化 Vue 应用并将其挂载到 DOM 中。下面是代码的具体分析：

  1. 导入必要的模块

    import Vue from 'vue'
import App from './App'
import router from './router'

    这里导入了 Vue 核心库、应用的根组件（App.vue）以及路由配置（router/index.js 或类似文件）。

  2. 配置 Vue 实例

    Vue.config.productionTip = false

    这行代码关闭了 Vue 在启动时的生产提示，该提示在生产环境中显示，告知开发者应用已进入生产模式。在生产环境下，我们通常不需要这个提示，因为它会影响应用的启动性能。

  3. 创建 Vue 实例

    new Vue({el: '#app',router,components: { App },template: '<App/>'
})

    这里创建了一个新的 Vue 实例，并传递了配置选项：

    • el: '#app'：指定 Vue 实例将挂载到哪个 DOM 元素上。这里的 #app 是一个 ID 选择器，意味着 Vue 会寻找页面中 id 为 app 的元素作为挂载点。

    • router：将前面导入的路由配置注入到 Vue 实例中，这样整个应用就可以使用路由功能了。

    • components: { App }：注册了全局组件 App，这样在模板中就可以直接使用 <App> 标签。

    • template: '<App/>'：指定了应用的根模板，即整个应用的内容将由 App 组件提供。 index.html文件中名为app的div元素会被编译后的App组件代替。这点非常重要。

  4. 执行 Vue 实例
    当这段代码执行完毕，Vue 实例就会被创建并挂载到 DOM 上，触发 Vue 的生命周期钩子，开始渲染 App 组件，并根据路由配置处理页面跳转和内容更新。

综上所述，这段代码是整个 Vue 应用程序的起点，它负责启动应用，配置路由，注册组件，并将 Vue 实例与 DOM 结构关联起来。

2，App.vue

main.js中的Vue对象加载App.vue组件，并渲染到页面上。

接下来看看App.vue的代码。

<template><div id="app"><img src="./assets/logo.png"><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

App.vue 文件是 Vue.js 单文件组件（Single File Component，简称 SFC）的一个典型示例，它集成了 HTML 模板、JavaScript 逻辑和 CSS 样式。让我们逐部分分析这段代码：

3.1 模板部分（<template>）

<template><div id="app"><img src="./assets/logo.png"><router-view/></div>
</template>

模板部分定义了组件的 HTML 结构。在这个例子中：

  • <div id="app">...</div>：这是根元素，它将包含组件的所有内容。id="app" 通常用于让外部的 Vue 实例找到并挂载到这个元素上。
  • <img src="./assets/logo.png">：插入一个图像元素，src 属性指向 assets 文件夹中的 logo.png 图片文件。
  • <router-view/>：这是一个特殊的 Vue Router 组件，用于渲染当前活动的路由组件。这意味着，根据当前的 URL 路径，不同的组件将会被渲染在这个位置。

注意，最为关键的是要理解**router-view的作用，它根据URL路径结合index.js中定义的路由，加载对应的组件。**

比如，在浏览器中输入http://localhost:8081/，router-view组件会根据url从index.js中定义的路由中进行path匹配，如下图，该地址将匹配到组件HelloWorld，记下来该组件会被加载渲染到页面上。

在这里插入图片描述

3.2 脚本部分（<script>）

<script>
export default {name: 'App'
}
</script>

脚本部分包含组件的 JavaScript 逻辑。在这里：

  • export default：导出了一个默认的组件对象。这个对象定义了组件的配置和行为。
  • { name: 'App' }：组件的名称被定义为 App。虽然在这个特定的例子中，组件名称没有被直接使用，但在调试或与其他组件交互时，它有助于识别组件。

3.3 样式部分（<style>）

<style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

样式部分定义了组件的 CSS 样式。

4，动手实战-自定义组件和路由

为了加深理解，我们可以自定义一个组件，并配置路由。

4.1 创建Hello.vue组件

在HelloWorld.vue同目录下，新建一个名为Hello.vue的文件。

在这里插入图片描述

<template><div>Hello, {{name}}</div>
</template><script>
export default {data() {return {name: 'World'}}
}
</script><style></style>

4.2 配置路由

在index.js中新增路由配置。

{path: '/hello',name: 'Hello',component: Hello
}

在这里插入图片描述

在浏览器地址栏输入http://localhost:8081/#/hello，router组件会根据hello匹配到Hello组件，然后将其渲染到页面上。

在这里插入图片描述

4.3 router-link

还有一种使用路由的方式，类似超链接标签a，点击挑战到对应的页面，如下图，点击"去Home"跳转到Home界面，点击"去Hello"，跳转到Hello页面。

在这里插入图片描述

要实现这个效果，可以在App.vue中添加如下代码：

<router-link to="/">去Home</router-link>
<router-link to="/hello">去Hello</router-link>

在这里插入图片描述

错误参考

使用vue脚手架初始化工程失败

vue init webpack vue-demo

执行如上命令时报错：

vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查

解决方案参考文章：Vue踩坑参考

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

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

相关文章

Nginx反向代理概述

Nginx反向代理概述

正向代理与反向代理概述 正向代理&#xff1a; 定义&#xff1a;正向代理位于客户端和目标服务器之间&#xff0c;客户端的请求首先发送到代理服务器&#xff0c;然后由代理服务器转发到目标服务器&#xff0c;最后将目标服务器的响应返回给客户端。 作用&#xff1a;正向代理…
阅读更多...
Linux - 进程的概念、状态、僵尸进程、孤儿进程及进程优先级

Linux - 进程的概念、状态、僵尸进程、孤儿进程及进程优先级

目录 进程基本概念 描述进程-PCB task_struct-PCB的一种 task_struct内容分类 查看进程 通过系统目录查看 通过ps命令查看 通过系统调用获取进程的PID和PPID 通过系统调用创建进程- fork初始 fork函数创建子进程 使用if进行分流 Linux进程状态 运行状态-R 浅度睡眠状态-S…
阅读更多...
uni-app:踩坑路---关于使用了transform导致fixed定位不生效的问题

uni-app:踩坑路---关于使用了transform导致fixed定位不生效的问题

前言&#xff1a; 继续记录&#xff0c;在上篇文章中&#xff0c;弹出框遮罩层在ios上没有正确的铺盖全屏&#xff0c;是因为机型的原因&#xff0c;也和我们的代码结构有相关的问题。今天再来展示另外一个奇葩的问题。 这次我使用了在本篇博客中的弹出框组件CustomDialog.vue…
阅读更多...
《昇思25天学习打卡营第19天|基于MobileNetv2的垃圾分类》

《昇思25天学习打卡营第19天|基于MobileNetv2的垃圾分类》

基于MobileNetv2的垃圾分类 本文档主要介绍垃圾分类代码开发的方法。通过读取本地图像数据作为输入&#xff0c;对图像中的垃圾物体进行检测&#xff0c;并且将检测结果图片保存到文件中。 1、实验目的 了解熟悉垃圾分类应用代码的编写&#xff08;Python语言&#xff09;&a…
阅读更多...
【C++】：AVL树的深度解析及其实现

【C++】：AVL树的深度解析及其实现

目录 前言一&#xff0c;AVL树的概念二&#xff0c;AVL树节点的定义三&#xff0c;AVL树的插入3.1 第一步3.2 第二步 四&#xff0c;AVL树的旋转4.1 右单旋4.2 左单旋4.3 右左双旋4.4 左右双旋4.5 插入代码的完整实现4.6 旋转总结 五&#xff0c;AVL树的验证六&#xff0c;实现…
阅读更多...
插入和选择排序

插入和选择排序

1.1直接插入排序 void InsertSort(int* a, int n) {for (int i 1; i < n - 1; i) {//i的范围要注意的&#xff0c;防止指针越界int end i;int tmp a[end 1];while (end>0) {if (tmp< a[end]) {a[end 1] a[end];//小于就挪动&#xff0c;虽然会覆盖后面空间的值…
阅读更多...
【Linux】通过分配虚拟内存的方式来解决因内存不够而导致部署的项目自动挂掉

【Linux】通过分配虚拟内存的方式来解决因内存不够而导致部署的项目自动挂掉

多个 jar 包项目部署在同一台服务器上&#xff0c;当服务器配置低&#xff0c;内存不足时&#xff0c;有可能出现 nohup java -jar 启动的进程就莫名其妙挂掉的问题。 解决方式&#xff1a; 第一种方法&#xff1a;进行JVM调优可以改善这种情况&#xff0c;但是项目太多&…
阅读更多...
【Android】安卓四大组件之广播知识总结

【Android】安卓四大组件之广播知识总结

文章目录 动态注册使用BroadcastReceiver监听Intent广播注册Broadcast Receiver 静态注册自定义广播标准广播发送广播定义广播接收器注册广播接收器 有序广播修改发送方法定义第二个广播接收器注册广播接收器广播截断 使用本地广播实践-强制下线使用ActivityCollector管理所有活…
阅读更多...
sql注入 mysql 执行命令 sql注入以及解决的办法

sql注入 mysql 执行命令 sql注入以及解决的办法

我们以前很可能听过一个词语叫做SQL注入攻击&#xff0c;其是威胁我们系统安全的最危险的因素之一&#xff0c;那么到底什么是SQL注入攻击呢&#xff1f;这里我会用一个最经典最简单的例子来跟大家解释一下&#xff1a; 众所周知&#xff0c;我们的sql语句都是有逻辑的&#xf…
阅读更多...
STM32之九：ADC模数转换器

STM32之九：ADC模数转换器

目录 1. 简介 2. ADC 2.1 逐次逼近型寄存器SAR 2.2 ADC转换时间 3 ADC框图 3.1 8 bit ADC0809芯片内部框图 3.2 ADC框图 3.2.1 注入通道和规则通道 3.2.2 单次/连续转换模式 3.2.3 扫描模式 3.2.4 外部触发转换 3.2.5 数据对齐 3.2.6 模拟看门狗 4. 总结和ADC驱…
阅读更多...
MYSQL ODBC驱动安装时的注意事项

MYSQL ODBC驱动安装时的注意事项

今天想使用MYSQL的ODBC驱动连接数据库。 安装的时候遇到一个大坑&#xff0c;在这里记录一下。 window 64位的操作&#xff0c;要安装64位驱动&#xff0c;这个大家都知道了。 有以下的问题要注意区别的。 1 、windows是64位的&#xff0c;但是开发软件是32位的。 这个时候…
阅读更多...
OpenStack Yoga版安装笔记（七）glance练习补充

OpenStack Yoga版安装笔记（七）glance练习补充

1、练习场景说明 在OpenStack Yoga版安装笔记&#xff08;五&#xff09;中&#xff0c;glance已经在controller node虚拟机上安装完成&#xff0c;并且已经成功拍摄了快照。 此时&#xff0c;controller node虚机已经安装了keystone、keystone DB、glance、glance DB、OpenSta…
阅读更多...
PCL-基于FPFH的SAC-IA结合ICP的点云配准方法

PCL-基于FPFH的SAC-IA结合ICP的点云配准方法

目录 一、相关方法原理1.凸包方法2.FPFH特征描述3.SAC-IA概述4.ICP概述 二、实验代码三、实验结果 一、相关方法原理 点云是在同一空间参考系下表达目标空间分布和目标表面特性的海量点集合&#xff0c;在获取物体表面每个采样点的空间坐标后&#xff0c;得到的是点的集合&…
阅读更多...
构建智能运维系统：创新架构与效率优化

构建智能运维系统：创新架构与效率优化

随着信息技术的迅猛发展&#xff0c;企业对于运维效率和服务质量的要求越来越高。智能运维系统的设计和实施&#xff0c;不仅能够提升系统可靠性和响应速度&#xff0c;还能有效降低成本和人力投入。本文将深入探讨智能运维系统的架构设计原则和关键技术&#xff0c;为企业在运…
阅读更多...
数据结构重置版（概念篇）

数据结构重置版（概念篇）

本篇文章是对数据结构的重置&#xff0c;且只涉及概念 顺序表与链表的区别 不同点 顺序表 链表 存储空间上 物理上一定连续 逻辑上连续&#xff0c;但物理上不一定连续…
阅读更多...
.env.local 配置本地环境变量 用于团队开发

.env.local 配置本地环境变量 用于团队开发

.env.local 用途&#xff1a;.env.local 通常用于存储本地开发环境中的环境变量。这些变量可能包括敏感数据或特定于单个开发者的设置&#xff0c;不应该被提交到版本控制系统中。优先级&#xff1a;在大多数框架中&#xff0c;.env.local 文件中的变量会覆盖其他 .env 文件中…
阅读更多...
分类模型的完整流程及Python实现

分类模型的完整流程及Python实现

1、加载函数和数据集 import numpy as np from sklearn.datasets import load_breast_cancer from sklearn.svm import SVC from sklearn.model_selection import train_test_split from sklearn.preprocessing import StandardScaler import matplotlib.pyplot as plt cancer…
阅读更多...
linux系统查历史cpu使用数据（使用sar 查询cpu和网络占用最近1个月历史数据）。

linux系统查历史cpu使用数据（使用sar 查询cpu和网络占用最近1个月历史数据）。

一 sar 指令介绍 在 Linux 系统中&#xff0c;sar 是 System Activity Reporter 的缩写&#xff0c;是一个用于收集、报告和保存系统活动信息的工具。它是 sysstat 软件包的一部分&#xff0c;提供了丰富的系统性能数据&#xff0c;包括 CPU、内存、网络、磁盘等使用情况&am…
阅读更多...
SQL中的LEFT JOIN、RIGHT JOIN和INNER JOIN

SQL中的LEFT JOIN、RIGHT JOIN和INNER JOIN

在SQL中&#xff0c;JOIN操作是连接两个或多个数据库表&#xff0c;并根据两个表之间的共同列&#xff08;通常是主键和外键&#xff09;返回数据的重要方法。其中&#xff0c;LEFT JOIN&#xff08;左连接&#xff09;、RIGHT JOIN&#xff08;右连接&#xff09;和INNER JOIN…
阅读更多...
《JavaEE篇》--多线程(2)

《JavaEE篇》--多线程(2)

《JavaEE篇》--多线程(1) 线程安全 线程不安全 我们先来观察一个线程不安全的案例&#xff1a; public class Demo {private static int count 0;public static void main(String[] args) throws InterruptedException {Thread t1 new Thread(() -> {//让count自增5W次…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023