[保姆级搭建Vue基础]理解Vue的工程化和组件思想

316 阅读6分钟

前言

今天是就是冬至了,大家有没有吃饺子!!!冬至是北半球一年之中夜晚最长的一天,祝大家在这个长夜,能融化掉这一年所有的不快乐。

9d6523ec5f395727ae56325fd5f8a5a6.jpg

从我们学习web前端开始,我们就学习了各种html,css,js会在html文件中将css和js引入,此时我们的文件是以html为基准,由它向外延伸制造出各种页面的效果,但这仅仅局限于我们的学习阶段,就好像你只是在装修一个小小的店面。在实际的企业开发中,我们需要的则是构建一栋甚至几十栋房子,如此复杂的项目不同于简单的页面开发,我们需要一个帮手,一个前端基建工具,那么它就是vite——工程化的核心套件,今天我们通过它来理解我们项目中的工程化和构造一个组件。

项目基础

Vite就类似于我们在建房子中运用到的脚手架,既然要利用它我们首先得先安装它吧,我们首先在根目录下输入:

npm init vite

成功运行后会提示你输入项目的名称,以及选择需要用到的前端框架,在这里它提供了Vue,还支持 React、Svelte、Preact 等多个流行的前端框架,今天我们选择Vue。选择完成之会让你选择语言,我们选择JavaScript

image.png 创建成功后,我们打开根目录,也就是刚刚输入项目的名称文件,会发现下面多出了一堆文件,我们点开package.json项目描述文件:

{
  "name": "try-vue",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "vite": "^6.0.3"
  }
}
  • "type": "module":这是一个特殊字段,它告诉 Node.js 或浏览器环境,当前文件或项目应该被视为 ECMAScript 模块(ESM),这意味着你可以直接使用 importexport 语法。

script脚本区域:

  • "dev": "vite": 运行 vite 命令,启动 Vite 开发服务器。当你在开发环境中工作时,可以使用 npm run dev 启动服务器,并且 Vite 会自动监听文件变化并进行热更新,让你看到即时的效果。
  • build: 运行 vite build 命令,构建生产环境的代码。这个命令会将你的项目打包成优化后的静态文件,适合部署到生产环境中。
  • preview: 运行 vite preview 命令,启动一个本地服务器来预览构建后的生产环境。这有助于你在部署之前检查构建结果是否正常。

依赖项

  • **dependencies**:Vue.js 的核心库,版本 ^3.5.13。这些是我们项目运行时必须的依赖项,在项目所有阶段都需要用到,这里会显示依赖的名称以及版本号
  • **devDependencies**:这些是我们在开发过程中需要的依赖项,但是在生产环境中不需要,这些包只会安装在开发环境中。

工程的不同生命周期(项目的不同阶段)

  • dev 开发阶段
  • test 测试阶段
  • build 上线阶段
  • online 运营维护

接下来我们就通过npm run dev命令来启动服务器:

1. vite会通过http协议在本地启动开发服务器,监听5173端口(默认)。

2.vite会自动查找根目录下的index.html文件,并将其作为应用入口的页面,即首页。其中有我们的挂载点,用于挂载Vue应用。

3. Vite 会根据 index.html 中的 <script type="module" src="/src/main.js"></script> 标签,动态引入 src/main.js 文件。这是应用程序的主入口文件。

src 是我们项目开发的主战场,它是开发目录,让我们来看看main.js文件:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入根组件
createApp(App).mount('#app')

main.js 文件是 Vue 项目中的核心入口文件,它的主要作用是初始化和配置 Vue 应用实例,并将其挂载到 HTML 页面中。

createApp(App).mount('#app')是引入我们的根组件。根组件(Root Component)是整个应用的起点和最外层的容器组件。它是所有其他组件的父组件,所有的子组件都嵌套在这个根组件中。根组件通常由 App.vue 文件定义,并在 main.js 中被创建的应用实例挂载到 HTML 页面中的某个元素上(通常是 #app)。

组件

相信不用我解释你们也能明白,下一个地方我们就该去到根组件App.vue下了。我们的组件就是在这里被开发的,它是我们现代前端开发的新单元,组件 = 由一个逻辑单元的html + css + js 组成的一个.vue文件,就好比我们在建房子中不同的区域,卧室,客厅,卫生间,厨房,这就是我们一个又一个的组件,他们有着不同的功能,所以组件是按照功能来划分的,是我们对某项功能的抽象.vue文件下的三段式组,也就是前端三剑客成了我们的这个组件。

组件作为前端的开发单位,那为什么不是页面呢,因为在不同的页面中,我们可能需要用到同一个功能,而组件是可以重复利用的,我们只需要对标一个功能做出一个组件它就能一直复用,并且我们的组件是以标签嵌入页面中的,可读性非常高,而且在实际开发中很好维护,也是因为不同的组件发挥着不同的功能。

下面我们把默认的App.vue文件清空,自己写一个组件:

<template>
  <div>
    <h1>Hello Vue!</h1>
    <Counter />
  </div>
</template>
<script  setup>
import Counter from './components/Counter.vue'
</script>

.vue文件下,html写在标签template中,css和js还是和之前一样

可以看出来,在这个根组件中,我们还引入了其他的组件,因为我们的组件也是嵌套使用的,当你想要制作一个功能,那么一定是由不同的需求来解决的,就比如在卧室这个组件中,我们需要床,电视,电脑等等。我们现在在这里面嵌套一个组件用来计数。

<template>
    <div class="counter">
        <p>Count:{{ count }}</p>
        <button @click="increment">+1</button>
    </div>
</template>

<script setup> // setup 可以免写return

import {
         ref 
    } from 'vue'

    const count = ref(0)

    const increment = () => {
        count.value++;
    }
</script>

<style>
.count{
    text-align: center;
    margin-top: 50px;
}
button{
    padding: 10px 20px;
    font-size: 16px;
}
</style>

我们来看看效果,打开我们最开始npm run dev返回的5173端口

动画3.gif

成功啦,这就是我们vue的第一个小小小组件。

小结

这是学习Vue框架基础的开始,希望能帮助到你,我们一起进步。