JavaWeb学习日记3-前端工程化，Element

最新推荐文章于 2024-07-21 23:11:29 发布

heowhenfo3heyt03rh

最新推荐文章于 2024-07-21 23:11:29 发布

阅读量1.3k

点赞数 33

分类专栏：黑马Web学习日记文章标签：学习前端

本文链接：https://blog.csdn.net/LFhsmd/article/details/137377338

版权

黑马Web学习日记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端分离开发

一个功能就是一个接口，接口连接前后端
开发流程
- 需求分析
- 接口定义
- 前后端并行开发
- 测试
- 前后端联调测试

YApi

接口文档管理平台
- API接口管理
- Mock服务：模拟
此平台已停止维护，假装不需要接口管理

环境准备

Vue脚手架
- Vue-cli是官方提供的一个脚手架，用于快速生成一个Vue的项目模板
- 功能：统一的目录结构，本地调试，热部署（应用程序代码变动后不需要再次运行），单元测试，集成打包上线
- 依赖环境：Node.js
- 配置prefix
  - ```
  C:\windows\system32>npm config set prefix "D:\code\tool\Node.js v14.19.1"
  
  C:\windows\system32>npm config get prefix
  D:\code\tool\Node.js v14.19.1
```
- 切换淘宝镜像
  - npm最新淘宝镜像站已经更新（2024-2-22）_npm淘宝镜像最新-CSDN博客
- 安装vue-cli
  - npm install -g @vue/cli
  - 确认是否安装成功：vue --version
  - 这里由于之前安装了两个版本的node.js，而使用的nodejs和npm安装目录不是同一个而出现了错误，修改path环境变量为相应的node.js即可

创建Vue项目

命令行

vue create vue-project01

图形化界面

vue ui

node_modules：存放项目依赖包
public：存放项目的静态文件
src：存放项目源代码
- asserts：静态资源
- compotents：可重用的组件
- router：路由配置
- views：视图组件（页面）
- App.vue：入口页面（根组件）
- main.js：入口js文件
package.json：模块基本信息，项目开发所需要模块、版本信息
vue.config.js：保存vue配置信息

启动Vue项目

图像化：npm点击运行（选中文件夹右键即可选择显示npm）
命令行：npm run serve
端口：8080
如果想修改端口号，可以在vue.config.js中添加相应语句：

Vue项目开发流程

Vue项目默认首页：index.html

默认引入入口文件main.js：引入了很多公共组件如App.vue

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

router:router简写为router，是因为属性值和属性名一致，可以省略
render：将导入的视图创建DOM元素，然后挂载到app

xxx.vue：组件文件
- 每一个组件都由三个部分组成
  - 1.<template>模板部分，由它生成HTML代码
  - 2.<script>控制模板的数据来源和行为
  - 3.<style>CSS样式部分

App.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

<script>
export default{
    data(){
        return{
            message:"Hello"
        }
    }
}
</script>

Element

是一套基于Vue2.0的桌面端组件库
组件：组成网页的部件，如超链接、按钮等
官网：Element - 网站快速成型工具
作用：更好看，更省事

快速入门

安装ElementUI组件库（在当前工程的目录下），在命令行执行指令：
- npm install element-ui@2.15.3
- 先停止当前项目，在当前项目中，右键选择在集成终端中打开，然后输入指令，会存放在node.modules目录下
引入ElementUI组件库
```
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
```
- 在scr下的main.js入口文件中引入（可以在官网文档中查看引入方法）
访问官网，复制组件代码，进行调整
- 放在views路径下，可以创建一个element文件夹，存放相关组件（最好用驼峰命名，不然语法检查可能会报错）
- 在根组件中，使用<element-view>标签，即会自动导入

常见组件

crtl+alt+l/crtl+alt+f可以排列格式

table表格
- 官网最下方有相应属性的介绍
pagination分页组件
- events
  - size-change：每页展示的记录数发生变化
  - current-change：当前页变化
Dialog对话框组件
- visible.syn：控制显示隐藏
Form表单组件
- 用于采集数据，由输入框、选择器等组成
- model，通过model绑定数据模型（需要在data中定义相关数据模型）
- 查看提交的数据：使用相关数据对象（转成字符串）

案例

步骤
- 创建页面，完成整体布局规划
- 布局中各个组件的实现
- 列表数据的异步加载，并渲染展示
使用标签引入组件，组件叫什么，标签就叫什么
Container布局容器，方便快速进行页面布局

Axios异步加载

安装Axios
- 在项目目录下安装axios：
  - npm install axios;
- 需要使用axios时，导入axios：
  - import axios from 'axios';

在vue当中的钩子方法（如mounted）中发送异步请求

mounted(){
    axios.get("......").then((result)=>{
        this.tableData=result.data.data;
    })
}

插槽slot-scope
- scope.row.gender==1?'男':'女'
- 可以处理展示数据

Vue路由

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

Vue.Router
- 是Vue的官方路由
- 组成：
  - VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
  - <router-link>：请求链接组件，浏览器会解析成<a>
  - <router-view>：动态视图组件，用来渲染展示与路由路径对应的组件
- 安装
  - 创建时已勾选
    - npm install vue-router@3/5/1
  - 定义路由
    - src/router/index.js
- <router-link to="/dept">部分管理</router-link>：点击跳转到相关页面
- <router-view>：在App.vue中加上即可动态展示
配置默认路径（重定向）
- ```
{
    path:'/',
    redirect:'dept'
}
```