Vue：组件化开发

ma_no_lo

于 2024-08-27 16:55:23 发布

阅读量497

点赞数 5

分类专栏： Python全栈开发文章标签： vue.js 前端 javascript css html

本文链接：https://blog.csdn.net/ma_no_lo/article/details/141600105

版权

Python全栈开发专栏收录该内容

18 篇文章 0 订阅

订阅专栏

我们为什么要组件化开发？

在之前的vue中，我们要么是通过本地引入vue.js进行开发，要么就是通过CLI（脚手架）来创建环境然后单独在App.vue中进行开发，这样的开发模式当然没有问题，但是当项目庞大起来后，将所有的组件，data,methods等等选项式组件放在一个文件中进行开发是很不理智的，后期维护的成本巨大是毋庸置疑的，同时文件庞大带来的首页渲染问题该如何解决呢？向服务器申请网页源码所花费的时间提升也不利于用户的体验，当然还有命名上同名的情况，即使可以设置不同的作用域，但会造成代码的冗余，不利于优化。

所以，我们将不同的组件抽离出来写在不同文件中，这样可以让每个部分各司其职，而且最重要的是这大大提升了组件的复用性，我们把写好的组件写好作为类似ppt模板的东西，当我们需要在某个地方使用这个组件时只需要导入并注册一下这个组件就可以而不需要去思考其他逻辑。简单来讲，组件化开发把过去混杂在一起的代码模式转变成了如拼图一般的代码模式。当然，组件化开发产生了文件的分离，这使得如果要构建的组件间的通信也不如之前同一文件下简单。总的来说，组件化除了难一些以外基本上优于过去的编程模式。

组件化开发如何部署环境？

为了部署vue组件化开发的环境，我们一般采用脚手架，也就是CLI，在使用脚手架之前，我们得确保nodejs的配置：找到nodejs官网后根据自己设备选择合适的安装包后一路next就可以了。

在安装CLI中，我们会使用到nodejs中的npm，当然也可以使用pnpm（这个更新一点，但是好像得自己配环境，这个看其他的pnpm配置文章就可以了）。这里就用npm了。

检查你的前置条件是否满足

打开命令窗口(win+R) ，键入

npm -v

顺便检查一下nodejs:键入

node -v

都没出问题的话就可以安装脚手架了，有问题重装一下nodejs。进入Vue CLI，我们可以有两种方法来配置环境，第一种就是通过webpack来部署，这个方法是默认的。第二种方法是使用vite来配置，这个速度更快，只要1.1s左右，比webpack快2s，除了速度，使用vite也是一种趋势，有时间可以学学vite方法，这里就用webpack的方式。

可以看到官方推荐使用Vite来创建自己的项目，但本文还是采用下方传统的方式：

键入

npm install -g @vue/cli

下完后验证一下是否安装成功: 键入

vue -V

有其版本号就说明安装成功，如果显示没有vue这个命令的话也不要紧，可以手动进入nodejs中寻找一下vue.exe，把路径拷到环境变量PATH中即可。

接下来就是最后一步：

首先你得有个放工程的文件夹，我这里用test来举例了，用的vscode（这个可以在命令窗口完成，但前提是你之前的脚手架是装在全局下的，也就是没切过路径的情况下）:

进入vscode终端，cd到test文件夹中，键入

vue create beginner(项目名称)

接下来选择vue的版本和一些部件，对于新手来说，只要个babel 就可以了，其他的对入门不是很有必要。

其他的选项都随意，vue的版本看你需求。我还是推荐vue3，毕竟有composition API，挺好用的。

创建完就是一坨文件，我这里就不讲那些配置文件了，主要就是两个命令用来启动项目：

cd beginner（这个看你自己的项目名）

npm run serve

以上在创完项目会提示的。

基本的界面介绍

其次就是src文件夹了，这就是写网页，写功能的地方。

components文件夹一般放组件（要不说组件化开发呢），App.vue就是根组件，是最大的组件，其他组件都写依附在它身上，本质上还是组件。main.js是程序的入口，一般就写些根组件的配置。

一般这些代码都不会变，直接当套路就行了，其实作用也就等同于

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
   
  </div>
  <script src="../static/vue.js"></script>
  <script>
    const app = Vue.createApp(
      {
    )
    app.mount("#app")
  </script>

</body>

</html>

组件化的注册与使用？

到此为止，基本的环境我们已经设定好了，接下来就可以引入本文正文了，对于组件的注册，我们有两种方式：

全局注册（用的较少）
局部注册（用的很多）

全局注册，顾名思义就是在根组件中进行注册，在任何子组件中都可以使用。

局部注册，指必须在某个子组件中注册后才可以使用。

为什么全局注册用的很少？

如果组件进行全局注册后，那么它可以在任何地方使用，这难道不是让操作更加方便了？

其实不然，全局注册后的组件即使未被使用，在打包时也会占据空间，而且这也不利于理解组件间的嵌套关系，所以只有在必要的时候才会使用全局注册。

全局注册

import { createApp } from 'vue'
import App from './01_vue嵌套关系/components/App.vue'
import student from './01_vue嵌套关系/components/student.vue'

const app = createApp(App);
app.component("student-info", student);
app.mount("#app");

以上为main.js的内容，我们调用app中的component方法，第一个参数为自定义组件名称，第二给参数为组件的模板以及逻辑。当然你也可以直接把模板和逻辑直接写在第二个参数中。

局部注册

局部注册其实更好理解，因为它更符合组件树的概念，接下来用一个例子来解释。

App.vue文件

<template>
<h2>{{ title }}</h2>
<student></student>
</template>


<script>
import student from './student.vue'

export default{
  components:{
    student
  },
  data(){
  return{
    title:"我是标题"
  }

}}
</script>



<style>
h2{
  color:black;
}
</style>

student.vue文件

<template>
  <p>姓名:{{name}}</p>
  <p>班级:{{class}}</p>
  <p>学号:{{ID}}</p>
</template>

<script>
export default {
  data(){
    return{
      name:"Mike",
      class:"7",
      ID:"001"
    }
  }
}
</script>

<style>

</style>

在上面例子中，我们在App.vue（根组件）中，首先导入了student组件，然后在components中局部注册student组件，components是新的选项式api，后面还会有更多（props,emits,生命周期函数等等）。在局部注册后，我们就可以使用这个组件了，关于组件命名问题，横短线命名法和驼峰命名法都是可以的，它们可以互相转化，例如：“MyBanner” --> “my-banner”

组件与组件之间相互独立，在使用组件时不必担心命名重复或者逻辑冲突的问题，但在后面组件之间相互通信需要注意这类情况。