javaweb-day03-前端工程化、Element以及打包部署

101.淳风

已于 2024-10-09 23:28:22 修改

阅读量220

点赞数 2

文章标签：前端

于 2024-10-08 08:24:41 首次发布

本文链接：https://blog.csdn.net/qq_44119525/article/details/142742657

版权

这里写目录标题

3、前端工程化、Element以及打包部署

3、前端工程化、Element以及打包部署

3.1 前后端分离开发

在这里插入图片描述

3.1.1 YAPI

在这里插入图片描述

3.2 前端工程化

在这里插入图片描述

3.2.1 环境准备

在这里插入图片描述

1、安装NodeJS

黑马课程推荐安装长期维护版：
在这里插入图片描述

淘宝镜像地址需要用最新（202410.07）：https://registry.npmmirror.com

执行vue --version命令能看到版本号则安装成功

3.2.2 Vue项目简介

在这里插入图片描述

方式一报错，可将VsCode设置以管理员身份运行

3.3 Element

3.3.1 什么是Element

在这里插入图片描述

3.3.2 Vue组件库Element

1、Element快速入门

在这里插入图片描述 https://element.eleme.cn/#/zh-CN/component/button

2、Element常见组件

（1）Element常见组件-Table

ctrl+alt+l :格式化快捷键

<template>
  <div>
    <!-- button按钮 -->
    <el-row>
      <el-button disabled>默认按钮</el-button>
      <el-button type="primary" disabled>主要按钮</el-button>
      <el-button type="success" disabled>成功按钮</el-button>
      <el-button type="info" disabled>信息按钮</el-button>
      <el-button type="warning" disabled>警告按钮</el-button>
      <el-button type="danger" disabled>危险按钮</el-button>
    </el-row>

    <!-- Table 表格 -->
    <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>