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

前面主要是学习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踩坑参考