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

最新推荐文章于 2026-07-16 10:47:50 发布
原创 最新推荐文章于 2026-07-16 10:47:50 发布 · 1.2k 阅读 · 31 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测

目录

前端工程化

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"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="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-input
                v-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-picker
                v-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-column
              prop="name"
              label="姓名"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="image"
              label="图像"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="gender"
              label="性别"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="job"
              label="职位"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="entrydate"
              label="入职日期"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="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-pagination
            background
            layout="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）

标签
#前端
于冬恋
关注
四天带你快速前端入门
Wiliam的博客
06-04 1130
Day1 什么是前端，前端技术的应用 前端就是数据的呈现 了解代码的编写软件vs code。 vs code包含Emmet，所以可以快捷的完成很多操作 ！ 快速生成html基础结构 lorem+数字 快速生成指定值的随机单词 前端的三驾马车——HTML,CSS,JS HTML——超文本标记语言 ，负责网页的结构 CSS——层叠样式表，负责网页的格式 JS ——负责网页的效果，JavaScript CTRL+/——快速注释 指令*数量——快速执行多个重复命令 HTML包含哪些元素 开始标记、结束标记、元素
web前端——Ajax、前端工程化以及Element基础
2401_84927284的博客
08-14 1001
坚持.....
JavaWeb2023_03_Vue-Element
qq_52922453的博客
05-25 457
前后台混合开发和前后台分离开发。前后台混合开发，顾名思义就是前台后台代码混在一起开发，如下图所示：这种开发模式有如下缺点：沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成功，再交给后台人员使用分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才不便管理：所有的代码都在一个工程中不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署。
谷粒商城：06. 前端开发基础知识
KaiSarH
04-20 1537
谷粒商城：06. 前端开发基础知识
前端开发基础知识-快速入门-1
m0_49692893的博客
03-17 1665
ECMAScript 6.0（以下简称 ES6，ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商协会，英文名称是 European Computer Manufacturers Association) 通过 ECMA-262 标准化的脚本程序设计语言）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了，并且从 ECMAScript 6 开始，开始采用年号来做版本。
前端学习日志(Vue)
天上白玉京，十二楼五城，仙人抚我顶，结发授长生
02-11 2549
2.3 Vue为渐进式 一个vue实例对应一个容器 <div id="id"> <h1>hello, {{name}}</h1> </div> <script text="text/javascript"> Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示 const x = new Vue({ el:'#id',/
前端入门基础
Lixuanyi6181的博客
04-03 6092
HTML和CSS的基本知识，学习周期为20天
黑马JavaWeb开发跟学(三)Web前端开发Vue-Element
心向阳光的天域的博客
03-02 1515
黑马JavaWeb开发跟学(三)Web前端开发Vue-Element
Web开发系列-第3章 Vue2 + Element
weixin_66095070的博客
07-27 843
前端工程化包括如下4个特点模块化：将js和css等，做成一个个可复用模块组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范自动化：项目的构建，测试，部署全部都是自动完成。
如何快速搭建Sub-Web：Vue前端配置生成器完整指南
最新发布
gitblog_00951的博客
07-16 769
Sub-Web是基于Vue.js 2.6与subconverter后端实现的订阅配置自动生成Web界面，提供简洁美观的前端界面，支持多种代理客户端配置生成。本指南将帮助你快速上手这款强大的Vue前端配置生成工具。 ### Sub-Web项目概述 Sub-Web是一款现代化的订阅配置生成工具，它采用Vue.js 2.6和Element UI构建，提供了直观的用户界面和丰富的功能特性。项目采用模块
前端基础篇-前端工程化 Vue 项目开发流程（环境准备、Element 组件库、Vue 路由、项目打包部署）_vue element 开发
2401_84413180的博客
04-27 1229
Element 是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。组成：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。组件 | Element正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】xe 可执行程序运行起来。**部署：将打包好的 dist 目录下的文件，复制到 nginx 安装目录的 html 目录下。
Web简单入门
go back
10-23 4533
Web简单入门，构建Vue项目的简单步骤，包括html、css、js、Vue-cli
1.JavaScript与基于前端的Web开发
2202_75940343的博客
05-05 1976
黑马程序员JavaWeb的学习
web（vue+element前端，springboot后端 ）的nginx配置
weixin_30697239的博客
08-16 384
1、开发版，nginx指向前端代码的build的生成目录dist #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid ...
前端开发Web
Qiuhuaian的博客
01-20 1036
命令行:vue create vue-project01图形化界面:vue uiElement:是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库组件:组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等官网：https://element.eleme.cn/#/zh-CNListener。
Vue快速开发一个主页
qq_45726327的博客
03-05 2796
这里讲述我们如何快速利用Vue脚手架快速搭建一个主页。
前端入门教程(一)
qq_51164450的博客
07-22 2397
1.网页 1.1 什么是网页 网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。 1.2 什么是HTML HTML指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言。 HTML不是一
前端快速入门
stange1的博客
02-10 186
API接口管理：根据需求撰写接口，包括接口的地址，参数，响应等等信息。Mock服务：模拟真实接口，生成接口的模拟测试数据，用于前端的测试。
Vue基础用法-指令(一)
qq_46199553的博客
08-24 537
vue 简介 1. 什么是 vue 官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 2. vue 的特性 vue 框架的特性，主要体现在如下两方面： ①
前端入门超级攻略：你的第一步学习指南
海风依旧
07-03 3291
由于前端技术的快速迭代性，国内的高校基本上不会去专门开设前端开发这一门课程，与之相对应的是大数据和软件工程，围绕python和java等生态和开发路线较为稳定的语言去开设课程，这就导致大部分学生在校对前端的了解局限于前端三剑客直到现在，还有不少学生到了大三以为学了三剑客就能找到实习，所以笔者总结了一份如何学习前端的指南，希望能帮助到想入门或即将入门前端的同学如果想系统的学习一门课程，只凭一时兴趣是无法长久的学习的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值