# city_region_screen

**Repository Path**: regis/city_region_screen

## Basic Information

- **Project Name**: city_region_screen
- **Description**: 城市体征区级屏
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-16
- **Last Updated**: 2025-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CITY REGION SCREEN

## 启动说明
1. 安装依赖 `npm install`
2. 执行 `node ./node_modules/esbuild/install.js`
3. 启动 `npm run dev`


## 项目说明
### 1. 入口文件 
文件 `src/main.ts`

### 2. 引入样式
main.ts 文件中引入全局样式，根据需要选择相应格式文件，目前默认是less,

```js
import '@/style/basic.less' // 公共less文件目录
// import '@/style/basic2.scss' // scss 文件目录
```

另外每个 `.vue` 文件中可以定义组件的样式

``` css
<style lang="less" scoped>
...
....
</style>

```
lang 参数根据需要配置， scoped 保证样式不污染其他组件

### 3. 组件js
写在每个组件中

```js

import {ref, reactive } from 'vue';
import component1 from '@/components/component1.vue';
import component2 from '@/components/component2.vue';

export default {
  name: 'templatename', // 组件名称
  components: {
    component1,
    component2,
  },
  props: { // 定义父子传递prop 参数
    prop1: String,
    prop2: String,
    prop3: Object,
  },
  setup(props) {
    let title = ref("")
    title.value = '智慧城市'

    let person = reactive({name: '', gender: ''})

    person.name = '小明'

    return {
      title,
      person
    }

  }
}

```

### 4. api 文件目录
目录 `src/api/`

### 5. mock 文件
目录 `mock/*`

### 6. http 请求
使用axios 请求数据，封装axios 在  `src/utils/axios.ts`