# vue3_web_demo

**Repository Path**: huangtao20211014/vue3demo

## Basic Information

- **Project Name**: vue3_web_demo
- **Description**: Vue-cli4搭建的Vue3项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-14
- **Last Updated**: 2023-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3.0demo

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

- .env.development 或 .env.test 或 .env.production 文件中，NODE_ENV 可以设置不同的打包模式，不同模式打出的包结构不同

### Compiles and minifies for development

```
npm run dev
```

### Compiles and minifies for test

```
npm run test
```

### Compiles and minifies for production

```
npm run build
```

### Lints and fixes files

```
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

## 项目共通工具使用说明

#### 1.调用后台接口方法：

- 已在全局注册，无需引入，直接使用即可。
- this.\$\_http ==> [axios 配置详解](https://github.com/axios/axios)
- this.\$\_API ==> 接口地址

```js

-----------------------vue实例内部调用后台接口------------------------------
- 通过 getCurrentInstance 找到定义的全局属性$_http、$_API
import { getCurrentInstance } from "vue"
setUp() {
  const { proxy } = getCurrentInstance()
  const _http = proxy.$_http
  const _API = proxy.$_API
}

- 执行请求
_http.get(url, config)
_http.post(url, config)
_http.put(url, config)
_http.delete(url, config)
_http.request(config)

// 其中 url为接口地址，在api目录下定义
// config内容为参数和其他配置，例如：

--------------------------执行 GET 请求---------------------------------
// 执行 GET 请求
_http.get(_API.INTERFACE_USER_LOGIN + "?ID=12345")
  .then(response => {
    // 自己的操作
    console.log(response);
  })

// 不需要写catch，框架会自动提示出来

// 可选地，上面的请求可以这样做
_http.get(_API.INTERFACE_USER_LOGIN, {
  params: {
    ID: 12345
  }
}).then(response => {
  // 自己的操作
  console.log(response);
})

--------------------------执行 POST 请求---------------------------------
// 执行 POST 请求
_http.post(_API.INTERFACE_USER_LOGIN, {
  firstName: "Fred",
  lastName: "Flintstone"
}).then(response => {
  // 自己的操作
  console.log(response);
})

--------------------------执行 DELETE 请求---------------------------------
// 执行 POST 请求
_http.delete(_API.INTERFACE_USER_LOGIN, {
  data: { id: 1 }
}).then(response => {
  // 自己的操作
  console.log(response);
})
```

#### 2.公共样式文件

- 全局样式都在`@/assets/styles/`目录下。
- `frame`目录下是框架的样式，除了框架修改一般不建议修改；
- `components`目录下的`index.less`则是开发时各组件使用的共通样式。
- `common`目录下的`vant.less`是用来全局覆盖 antDesign-ui 中的样式，会影响所有对应的 antDesign-ui 组件，慎改。`variables.less`是定义需要的 css 变量；`index.less`用来写一些通用的样式。

#### 3.使用变量样式

- 变量样式文件位于`@/assets/styles/common/variable.less`
- 已配置全局引入
```css
<style>
  .className {
    color: @mainColorBlue;
  }
</style>
```

#### 4.使用阿里图标库中的图标

- 若有新的阿里的`iconfont更新`，需要重新获取`在线链接`，更新`@/components/antCompoents.js`中的`scriptUrl`值
- 若是`阿里的iconfont`，使用示例如下

```js
<icon-font class="iconFont" type="ali-icon-name" />
```

#### 5.使用 vuex

```js
import { useState, useGetters } from "@/store/storeMap.js";

setUp() {
  const mapStateUser = useState("user", ["userInfo"]);
  const mapGettersUser = useGetters("user", ["menus"]);
  console.log(mapStateUser.userInfo, mapGettersUser.menus)
}
```