自学内容网 自学内容网

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


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

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

一,Vue的模块化开发

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

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

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

1,目录结构

在这里插入图片描述

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

  1. build: 包含构建相关的配置文件和脚本,如 webpack.base.conf.jswebpack.dev.conf.jswebpack.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 + compilerruntime-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 startnpm 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.jsmain.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/#/hellorouter组件会根据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踩坑参考


原文地址:https://blog.csdn.net/epitomizelu/article/details/140583753

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!