# AdminSystem-front

**Repository Path**: sanjin126/admin-system-front

## Basic Information

- **Project Name**: AdminSystem-front
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-27
- **Last Updated**: 2023-11-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AdminSystem-front

> 暂时记录项目的搭建过程

## 学习过程

### 技术选择

首先，技术选择：

- html

- css

- JavaScript

- vue 2 还是 **vue 3**：选择了最新版本vue 3.3.4
  - 选项式API
- Element-ui 还是 **Element-plus**
  - vue 3.x.x 只能选择 plus
- 构建工具：vite
  - 什么是构建工具？就是build工具，将代码build为浏览器所支持的形式
  - vite是官方推荐的，可以命令行形式创建一个initializer项目
- 包管理工具：npm
  - 为什么需要？
- `Axios`

### 创建一个空壳

> 参考了 https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application

因为需要使用npm命令，则先要安装node。（安装过程中，有一个automatically不需要选

安装的版本：![image-20231127210852429](C:\Users\10326\AppData\Roaming\Typora\typora-user-images\image-20231127210852429.png)

创建成功后，使用vs code或其他ide打开。（若使用vs code，则需要安装一些插件）参考：https://cn.vuejs.org/guide/scaling-up/tooling.html#ide-support

### 修改这个空壳

观察一下结构：

修改哪里？`index.html `，`App.vue`

同时增加自己的`RoleControl.vue`和`DataShowTable.vue`

#### 解释一下`RoleControl.vue`和`DataShowTable.vue`

`RoleControl.vue`是`DataShowTable.vue`的父组件，后者用于展示角色列表的表格，前者包含表格及其他元素。

对于一个`RoleControl.vue`：

- `<script></script>` 
  - `data()` : 定义了 `roles`角色对象，后端传过来的
  - `components`：定义了子组件`DataShowTable.vue`
  - `methods`：定义了本组件所要用的方法
- `<template></template>` 是这个vue所表示的html页面

#### 遇到的问题：

- 组合式和选项式可以混着用
- 如何从父组件向子组件传递数据
- Element-plus提供的2.0table没法显示
- plus提供的1.0table的button显示有问题
- Virtual script not found, may missing <script lang="ts"> /
  - [解決 Vue 專案上開發出現 Virtual script not found 的錯誤 | 是 Ray 不是 Array (israynotarray.com)](https://israynotarray.com/vue/20230419/135728563/)
- interface是TypeScript提供的
- https://blog.csdn.net/qq_40830369/article/details/124417692
- 插槽：\#default="scope"

### 下一步

使用`axios`发送请求

引入异常处理