菜鸟自学WEB记—前端工程化基础

前言：

个人介绍：硕士搞自动驾驶算法，非科班，懂点CPP但不多，工作原因开始自学java/web开发等，目的为了解开发流程，个人不做实际开发。

系列文档是整理了个人认为重要的干货，详情请查看原视频。
java-web开发入门

独学而无友，则孤陋而寡。欢迎各路大神指点！

---

1.VUE简介

（1）前端框架

基于MVVM模型，将**View(视图)与Model（数据模型）**进行双向绑定。

（2）指令

HTML标签上带有v-前缀的特殊属性，常用的有v-bind,v-model,v-on；

（3）VUE对象

一个数据模型可与多个视图进行绑定，基本定义方式：

<script>
    new Vue({
        el:"#app",  //vue接管区域
        data:{
            url:"www.baidu.com"
        },
        methods: {
            handle():function () {
                alert("点击动作");
            }
        }
    })

</script>

（4）Vue-cli（脚手架）

统一目录结构、本地调试、热部署、单元测试、集成打包上线；
依赖环境：node js

（5）Vue组件库Element

通过Element，可以运用其中的各种组件制作更精美的界面。
使用方式为：登录官网，选择自己喜欢的结构，复制代码… 23333

2.Vue项目简介

（1）项目创建

命令行：Vue create xxx
图形化界面：Vue ui

（2）目录结构

1）node modules:存放项目依赖包
2）public：存放项目静态文件
3）src：存放源码
Assets:静态资源
Components:可重用组件
Router：路由配置
Views：视图组件（界面），放置自定义组件
App.vue:根组件，入口页面
Main.js：入口Js文件
4）package.json：基本信息和项目依赖的资源及资源版本信息
5）vue.config.js:代理、端口配置等

（3）项目分析

1）图形化界面，点击运行（或执行命令npm run serve）
2）VUE的组件：以.vue结尾，每个组件包括三个部分：

<template>：生成html文件
<script>：定义js，控制模板中的数据来源和行为
<style>：编写css样式

3）实际操作流程：首先在views目录下建立自己的vue文件，并在APP.vue中引用自定义组件，然后对自定义vue文件进行编辑。

---

3.实例分析

本部分在原教学视频中有实例教学，仅整理要点。

（1）常用的组件

（1）表格Table
（2）分页Pagination
（3）dialog对话框（可嵌入表格或表单）

（2）案例操作步骤

（1）通过Element得到布局模板；
（2）根据原型添加表格、表单、分页符等数据；
（3）通过axios异步加载数据，通过mounted钩子函数获取接口数据，并为表格等赋值；
（4）通过slot函数对接口数据进行统一处理。

---

4.VUE路由

（1）组成：

VueRouter：路由器类，内部维护了路由表(hash表：定义标识和组件对应关系)，根据路由请求在路由视图中动态渲染选中的组件；

<router-link>：请求链接组件，浏览器会解析成超链接标签，指定路由访问请求（访问标识）；
<router-view>：动态视图组件，用来渲染展示与路由对应的组件；

（2）步骤

1）在router文件夹下的index.js中定义路由；
2）在组件中通过router-link指定设置路由标识的部位；
3）在APP.vue中添加router-view空标签；
4）为了避免开始访问时是空白的（此时访问根路径标识未在路由表中定义），可以在路由定义中通过重定向操作将访问根路径转移到访问某路径；

---

5.打包部署（静态资源）

此处只讲述前端静态资源的部署方法，动态资源在后续章节。
步骤：
（1）对于VUE项目，点击下方NPM脚本build vue XXX 后面的开始即可；
（2）打包完成后dist目录下产生打包后的文件；
（3）将整个dist目录部署在服务器**（NGINX）上，将dist目录下的文件复制到nginx安装目录下的html目录**；
（4）启动nginx可执行程序，浏览器输入地址即可查看前端界面（默认占用80端口，如果端口被占用，err.log中会报错，可在nginx的配置文件中修改）；

说明：nginx为轻量级的web服务器/反向代理服务器。

---

后记：

此章节之前为前端基础知识，前面学的都是各种碎片，知识都是点的概念。

从本节开始，逐渐接触前端工程化知识，一方面通过主流的VUE和Element原理了解实际工程化的流程，也将各类知识由点串成了线。

同时，注意后续思维方式的变化，从整体角度看问题。