关键词排名优化网站网站正在建设中模板

菜鸟之路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中单文件组件的定义方法，即将组件定义在单独文件中，以便于开发和维护。