当前位置： 首页 > news >正文

Web前端快速入门（Vue、Element、Nginx)

news 2025/5/30 14:56:20

目录

前端工程化

Element

vue路由&打包部署

前端工程化

前后端分离开发：

早期的模式为：前后端混合开发，缺点：沟通成本高，分工不明确，不方便管理，不方便拓展

当前主流开发模式：前后端分离

接口文档：通过原型+需求分析得来

 接口文档的维护：在线、离线。

流程：需求分析->接口定义（API接口文档）->前后端并行开发->测试（前端、后端）->前后端联调测试

YApi：

介绍：YApi是高效、易用、功能强大的api管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务

地址：https:// yapi smart x-work.cn.

 API接口管理功能

Mock服务：可以生成真实接口，用于模拟的接口测试，实现前后端分离开发

使用：添加项目、添加分类、添加接口

前端开发工程化:

模块化（JS\css)、组件化（UI结构、样式、行为）、规范化（目录结构、编码、接口）、自动化（构建、部署、测试）

前端工程化：把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

一、环境准备

介绍：Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板。

Vue-cli功能：统一的目录结构、本地调试、热部署、单元测试、集成打包上线

依赖环境：NodeJS

NodeJS官网：Node.js — 在任何地方运行 JavaScript

1.安装NodeJS

2.配置npm全局路径

点击开始

输入cmd 、点击

使用管理员身份运行命令，在命令行中，执行如下指令：

npm config set prefix "D:\NodeJS" （该路径为你所选择的nodejs的安装目录）

验证是否设置成功执行：npm config get prefix

出现你设置的路径则设置成功

3.切换npm的淘宝镜像(用于加速资源下载）

使用管理员身份运行命令，在命令行中，执行如下指令：

npm config set registry https://registry.npm.taobao.org

4.安装vue-cli

使用管理员身份运行命令，在命令行中，执行如下指令：

npm install -g @vue/cli

执行完后会自动给你下载资源

验证是否成功下载执行：vue --version

出现版本号则下载成功

二、Vue项目简介

Vue项目-创建

方式一：命名行： vue create vue-project01

（create后为项目名称）

方式二：

图形化界面 ：vue ui

(会调用出Vue的项目管理器)

创建方法：创建一个文件夹  -->  双击进入文件夹输入cmd，再输入vue ui调出图形化界面 -> 点击创建，输入名称，点击包管理器选择npm->不选择初始化地址仓库(后续需用到）--> 下一步选择预设模板为手动 -> 下一步选择插件的功能，额外选择Router（路由功能）--> 下一步，选择版本2.x --> 语法检测规范选择第一个即可->点击创建项目不预设

用方式二创建完项目后

在vs中打开

每个文件包的意义：

node_modules存放依赖包

public存放静态变量

src存放源代码

package.json 依赖的资源信息，和版本信息

vue.config.js 保存vue配置的文件，如：代理、端口的配置等

 vue端口配置

在vue.config.js中增加这几行代码

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

 Vue项目开发流程

默认首页 index.html 引入了入口文件 main.js（引入了很多模块import）

 export导出，import导入，只有在导出定义完模块之后才能用import导出

 Vue的组件文件以.vue结尾，每个组件由三个部分组成：<template>、<script>、<style>。

<template>模板部分，由它生成HTML代码

<script>：控制模板部分的数据来源和行为 

<style>：css样式部分

 

 

Element

Element：一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面组件库。

组件：组成网页的部件，例如 超链接、按钮、图片、表格等

官网：Element - 网站快速成型工具https://element.eleme.cn/#/zh-CN

 快速入门：

一、安装ElementUI组件库（在当前工程的目录下），在命令执行指令：

npm install element-ui@2.15.3

二、引入ElementUI组件库

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

三、访问官网，复制组件代码，调整

       在views下创建新页面

常见组件：

表格组件：

Table表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

从官方文档中查询然后粘贴再修改

<template>
<div><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button>
</el-row><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</div>
</template>
<script>
export default{data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}
}
</script><style></style>

分页组件：

Pagination分页：当分页数据量过多时，使用分页分解数据。

可通过改变组件的名字的位置改变组件在展示页面中的位置

  <el-pagination background layout="sizes,prev, pager, next,jumper,total"@size-change="handleSizeChange"@current-change="handleCurrentChange" :total="1000">
</el-pagination>

 对话框组件：

Dialog对话框：在保留当前页面状态的情况下，告知用户并承载相应操作。（相当于一个弹窗，可以展示表格、表单、图片等）

<el-dialog title="收货地址" :visible.sync="dialogTableVisible"><el-table :data="gridData"><el-table-column property="date" label="日期" width="150"></el-table-column><el-table-column property="name" label="姓名" width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table>
</el-dialog>

 gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],dialogTableVisible: false,

表单组件：

From表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

<template>中代码

<!-- Dialog 对话框 呈现From表单组件--><el-button type="text" @click="dialogFromVisible = true">打开From 的Dialog表单</el-button><el-dialog title="From表单" :visible.sync="dialogFromVisible"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间"><el-col :span="11"><el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">提交</el-button><el-button>取消</el-button></el-form-item>
</el-form></el-dialog>

 <script>中代码

    form: {name: '',region: '',date1: '',date2: '',},dialogFromVisible:false,

 最终效果：

 案例：

<template><div><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size: 40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header><el-container><el-aside width="200px"><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统信息管理</template><el-menu-item index="1-1">部门管理</el-menu-item><el-menu-item index="1-2">员工管理</el-menu-item></el-submenu></el-menu></el-aside></el-aside><el-main><!-- From表单 --><el-form :inline="true" :model="searchFrom" class="demo-form-inline"><el-form-item label="姓名"><el-inputv-model="searchFrom.name"placeholder="审批人"></el-input></el-form-item><el-form-item label="性别"><el-select v-model="searchFrom.gender" placeholder="活动区域"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-from-item label="入职日期"><el-date-pickerv-model="searchFrom.enrydate"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></el-from-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form><el-table :data="tableData" border><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="image"label="图像"width="180"></el-table-column><el-table-columnprop="gender"label="性别"width="140"></el-table-column><el-table-columnprop="job"label="职位"width="140"></el-table-column><el-table-columnprop="entrydate"label="入职日期"width="180"></el-table-column><el-table-columnprop="updatetime"label="最后操作时间"width="230"></el-table-column><el-table-column label="操作"><el-button type="primary" size="mini">编辑</el-button><el-button type="danger" size="mini">删除</el-button></el-table-column></el-table><el-paginationbackgroundlayout="sizes,prev, pager, next,jumper,total"@size-change="handleSizeChange"@current-change="handleCurrentChange":total="1000"></el-pagination></el-main></el-container></el-container></div>
</template><script>
import axios from "axios";export default {data() {return {tableData: [],searchFrom: {name: "",gender: "",enrydate: [],},};},methods: {onsubmit: function () {alert("查询数据");},handleSizeChange: function (val) {alert("每页记录数发生变化" + val);},handleCurrentChange: function (val) {alert("访问的页码发生变化" + val);},},mounted() {axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {this.tableData = result.data.data;});},
};
</script><style></style>

Vue路由&打包部署

Vue路由：

前端路由：URL中的hash（#号）与组件之间的对应关系。

介绍：Vue Router 是 Vue的官方路由。

组成：

       VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件

      （维护了一份路由表，记录了url与组件的对应关系）

       <router-link>:请求连接组件，浏览器会解析成<a>

       <router-view>:动态视图组件，用来渲染展示与路由路径对应的组件

1.安装（创建Vue项目时已选择）

2.定义路由

在router 文件目录下的 index.js下来定义

 通过<router-link-to>发生事件时自动找到 link to 定义的组件

再通过<router-view></router-view>在相应的部分展示组件（在App.vue中动态展示）

 

需要配置根路径，否则再次打开浏览器则没有路径

打包部署：

打包：

执行脚本：

打包后的文件会被放到dist目录下

部署：

介绍：Nginx是一款轻量级的Web服务器/反向代理电子邮件服务器。特点：占用内存少，并发能力强

官网：nginx: download

部署：将打包好的dist目录下的文件，复制到nginx安装目录html目录下。

启动：双击nginx.exe

注意：Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。查看被谁占用：（netstat -ano| findStr 80）

http://www.xdnf.cn/news/691867.html

相关文章：

  • 通过海康萤石API控制家里相机的云台及抓图
  • PHP：从Web开发基石到现代应用引擎的进化之路
  • 青岛市长任刚与深兰科技董事长陈海波会谈，深兰青岛项目即将进入快车道！
  • Nacos注册中心原理
  • System Properties 和 Settings.Global 的区别
  • 尚硅谷redis7 70-72 redis哨兵监控之案例实操7
  • go实现定时任务
  • QT 5.15.2 程序中文乱码
  • Linux基础 -- Linux 启动调试之深入理解 `initcall_debug` 与 `ignore_loglevel`
  • JavaScript核心总结与现代化应用指南
  • 弥散制氧机工作机制：高原低氧环境的氧浓度重构技术
  • Laravel单元测试使用示例
  • linux安装ffmpeg7.0.2全过程
  • es6 函数解构
  • 【系统架构设计师】2025年上半年真题论文回忆版: 论事件驱动架构及应用（包括解题思路和参考素材）
  • nova14 ultra，是如何防住80°C热水和10000KPa水压冲击的？
  • pytorch部分函数理解
  • 【网络通信】详解网络通信、实现 CS / BS架构 通信
  • xxl-job快速创建复制任务
  • IACEES 2025：创新材料与能源模式，迎接未来的挑战
  • 27、请求处理-【源码分析】-怎么改变默认的_method
  • 【周输入】517周阅读推荐-3
  • Spring Boot 启动流程深度解析：从源码到实践
  • 【烧脑算法】定长滑动窗口：算法题中的“窗口”智慧
  • MySQL OCP 与 Oracle OCP 认证，怎么选？
  • 怎样将win11+ubuntu双系统的ubuntu从机械硬盘迁移至固态硬盘(1)
  • 【Elasticsearch】track_total_hits
  • CAD图纸中的文字看不到，这是什么原因？
  • 传输线的特性阻抗和传播延迟
  • DL00916-基于深度学习的金枪鱼各类别目标检测含完整数据集