菜鸟之路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 -vAI 代码解读
出现对应的版本号，即为安装成功
④配置npm的全局安装路径
以管理员身份运行命令行
在命令行中运行以下命令
npm config set prefix "NodeJS的安装目录"
AI 代码解读
⑤切换npm的淘宝镜像
npm config set registry https://registry.npmmirror.com
AI 代码解读
2.3vue-cli环境配置
①安装vue-cli，执行下面指令
npm install -g @vue/cliAI 代码解读
②检查是否安装成功，在命令行中输入如下语句，出现对应版本号即为安装成功
vue --versionAI 代码解读
至此整个vue-cli环境就配置好了
3.创建Vue项目
两种方式：
方式一：命令行输入
vue create vue-project01(项目名称直接创建)AI 代码解读
方式二：利用命令行打开vue的图形化界面，在界面中创建
vue ui
AI 代码解读
在此对图像化界面的方法进行演示
命令行中输入，会直接在本地启动一个图形化界面
vue uiAI 代码解读
包管理器选择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
}
})
AI 代码解读
如何启动这个Vue项目呢？在项目的终端中输入如下指令
npm run serveAI 代码解读
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>
AI 代码解读
编写完毕，我们再次启动Vue项目，访问，就可以看到如下界面，还是非常酷的，前端给学习者的正反馈真是非常大，种瓜得瓜，种豆得豆
让我们在次回顾这个过程，在这个vue项目中，main.js中定义得根组件将被挂载到index.html中id为"app"的div标签上。
在mian.js文件中导入了一个名为App的组件作为根组件，可以看到项目工程中有一个名为App.vue的文件，这其实使用了Vue中单文件组件的定义方法，即将组件定义在单独文件中，以便于开发和维护。
