菜鸟之路Day24一一前端工程化（一）

作者：blue

时间：2025.3.17

1.概述

文章内容大部分学习自黑马程序员BV1m84y1w7Tb

本文旨在梳理，从0到1，在仅有一个vscode的情况下，一步步完成一个使用Vue框架搭建的前端页面，并最终将其部署在Nginx服务器上

2.环境配置

要快速生成一个vue项目，我们可以利用vue-cli这个vue官方提供的脚手架，它用于快速生成vue的模板。vue-cli依赖于node.js环境，所以我们需要先配置好node.js环境，然后再安装vue-cli

2.1node.js环境配置

Node.js — 在任何地方运行 JavaScript (nodejs.org)

①首先进入node.js官网，下载node.js安装包

②下载完成之后，双击下载好的文件，然后一路按next，中途可以自己修改安装路径（注意英文命名），然后点击install，最后Finish，这里就不再截图展示了，整个过程没有特别需要注意的地方

③验证NodeJS的环境变量，node.js在安装好后会自动配置环境变量，我们可以直接打开cmd，然后在cmd中输入下面指令。

node -v

出现对应的版本号，即为安装成功

④配置npm的全局安装路径

以管理员身份运行命令行

在命令行中运行以下命令

npm config set prefix "NodeJS的安装目录"

⑤切换npm的淘宝镜像

npm config set registry https://registry.npmmirror.com

2.3vue-cli环境配置

①安装vue-cli，执行下面指令

npm install -g @vue/cli

②检查是否安装成功，在命令行中输入如下语句，出现对应版本号即为安装成功

vue --version

至此整个vue-cli环境就配置好了

3.创建Vue项目

两种方式：

方式一：命令行输入

vue create vue-project01(项目名称直接创建)

方式二：利用命令行打开vue的图形化界面，在界面中创建

vue ui

在此对图像化界面的方法进行演示

命令行中输入，会直接在本地启动一个图形化界面

vue ui

包管理器选择npm

选择手动配置，然后下一步

勾选Vue的router（路由）功能，后面会用到

创建成功，之后这个图形化界面可以直接关闭

4.vue项目解析

利用vscode打开我们刚刚创建的vue项目

在这里我欲解释一下何为组件，组件：组成网页部件，例如超链接，按钮，图片，表格，表单，分页条等等

比方说，我们现在想修改这个Vue项目的端口，只要在vue.config.js下增加修改端口的代码即可

const {
    defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
   
  transpileDependencies: true,

  devServer:{
   
    //修改默认端口
    port:7000
  }

})

如何启动这个Vue项目呢？在项目的终端中输入如下指令

npm run serve

Ctrl+单机跟进访问，可以看到成功启动了这个Vue项目

所访问到的页面就是App.vue组件访问的页面，在其中简单修改文件代码，发现浏览器中的页面跟随变化，这就是Vue项目提供的"热部署"功能

那么我们是如何看到这个App.vue这个组件所展示的内容的呢？

实际上网页默认的首页是处于public文件夹下的index.html文件，在这个index.html文件中默认引入了main.js这个入口js文件。我们可以看到在index中，这里声明了一块id为app的DOM元素（div区域），这块div区域与main.js中的Vue实例，通过$mount方法挂载。

而在这个Vue示例中render: h => h(App)：这是一个渲染函数，render 选项是 Vue 实例的一个重要选项，用于创建虚拟 DOM。h 是 createElement 函数的缩写，它是 Vue 提供的一个用于创建虚拟节点的函数。h(App) 表示创建一个 App 组件的虚拟节点。

而App组件又从哪里来呢？其实这里所指的App就是，我们刚才所提到的App.vue，它是main.js通过'import App from './App.vue''引入到js文件中来的。

所以，我们不难发现其中的逻辑关系，我们要编写页面，其实就是编写组件，在哪里编写组件呢？当然实在views这个文件夹下编写，然后编写完成后import到main.js，然后创建对应的实例，最后与html页面中的DOM元素挂载，使之最终渲染到页面中。

接下来我们分析一下这个App.vue文件，也就是我们要编写的组件页面的构成

template部分与style部分和原来我们写html页面的书写方式是差不多，这里我要着重解释一下这个script部分，我们在这个部分中看到，代码外面套了一层export default，因为我们需要将这里面的内容export（导出）一下，才能在外面的其他js文件中import我们的组件。

接下来我们就尝试在这个App.vue的文件中，将原来的代码删除，然后尝试编写一个登录界面，最终渲染到index.html中。

笔者前端水平差，对vue的使用不熟练，所以在一本书上学习了这个注册页面的编写，我认为应该要能做到能看懂每一行代码的作用即可。

代码摘抄自：《循序渐进Vue.js3 前端开发实战》一一张益珲

<template>
  <div class="container" id="app">
    <div class="container">
      <div class="subTitle">永远相信，美好的事情即将发生</div>
      <h1 class="title">创建你的账号</h1>
      <!-- 在使用 v-for 时，要为每个迭代元素添加唯一的 :key 绑定 -->
      <div v-for="(item,index) in fields" :key="item.title" class="inputContainer">
        <div class="field">
          {
  {item.title}}
          <span v-if="item.required" style="color: red;">*</span>
          <input class="input" :type="item.type" />
          <div class="tip" v-if="index==2">请确定密码长度需要大于6位</div>
        </div>
      </div>
      <div class="subContainer">
        <div class="setting">偏好设置</div>
        <input class="checkbox" type="checkbox" /><label class="lable">接收更新邮件</label>
      </div>
      <button class="btn">创建账号</button>
    </div>
  </div>
</template>

<script>
  export default {
    
    data() {
    
      return {
    
        fields: [
          {
    
            title: "用户名",
            required: true,
            type: "text"
          }, {
    
            title: "邮箱地址",
            required: true,
            type: "text"
          }, {
    
            title: "密码",
            required: true,
            type: "password"
          }
        ]
      }
    }
  }
</script>

<style>
  .container {
    
    margin: 0 auto;
    margin-top: 70px;
    text-align: center;
    width: 300px;
  }
  .subTitle {
    
    color:gray;
    font-size: 14px;
  }
  .title {
    
    font-size: 45px;
  }
  .input {
    
    width: 90%;
  }
  .inputContainer {
    
    text-align: left;
    margin-bottom: 20px;
  }
  .subContainer {
    
    text-align: left;
  }
  .field {
    
    font-size: 14px;
  }
  .input {
    
    border-radius: 6px;
    height: 25px;
    margin-top: 10px;
    border-color: silver;
    border-style: solid;
    background-color: cornsilk;
  }
  .tip{
    
    margin-top: 5px;
    font-size:12px;
    color: gray;
  }
  .setting {
    
    font-size: 9px;
    color:black;
  }
  .label {
    
    font-size: 12px;
    margin-left: 5px;
    height: 20px;
    vertical-align: middle;
  }
  .checkbox {
    
    height: 20px;
    vertical-align: middle;
  }
  .btn {
    
    border-radius: 10px;
    height: 40px;
    width: 300px;
    margin-top: 30px;
    background-color: deepskyblue;
    border-color: blue;
    color: white;
  }
</style>

编写完毕，我们再次启动Vue项目，访问，就可以看到如下界面，还是非常酷的，前端给学习者的正反馈真是非常大，种瓜得瓜，种豆得豆

让我们在次回顾这个过程，在这个vue项目中，main.js中定义得根组件将被挂载到index.html中id为"app"的div标签上。

在mian.js文件中导入了一个名为App的组件作为根组件，可以看到项目工程中有一个名为App.vue的文件，这其实使用了Vue中单文件组件的定义方法，即将组件定义在单独文件中，以便于开发和维护。