# EVA-VUE3

**Repository Path**: mefisto/eva-vue3

## Basic Information

- **Project Name**: EVA-VUE3
- **Description**: vue3+ts+elementPlus
- **Primary Language**: JavaScript
- **License**: GPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-18
- **Last Updated**: 2022-06-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs,
check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

###

1. deep .xxx 取消了， 使用 :deep(.xxx)

2. 子组件使用<script setup></script> 包裹js代码

3. 赋值使用ref绑定双向数据监听

4. input的值无法输入，检查一下ref是否和v-model重名了

5. watch 监听
   watch(() => useRouter().currentRoute.value.path, (toPath) => {
   console.log('toPath', toPath)
   }, {immediate: true, deep: true})

6. 引入图片路径

  <li class="JianShePage_content_top_right_state_item"
              v-for="(item, index) in stateList"
              :key="index"
              :style="{ backgroundImage: `url(${menuCfg[index]})` }"

const menuCfg = [
require('@/assets/item-bg1.png'),
]

7.使用icon
import {ArrowDown, Avatar, SwitchButton} from '@element-plus/icons-vue'

<el-icon>
<SwitchButton/>
</el-icon>

8. router 跳转
   import {useRouter} from 'vue-router'
   const router = useRouter(); //必须先声明的

   router.push({
   path: '/editPassword', query: {}
   })

===
中文时间或日期选择器
<el-config-provider :locale="locale">
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
format="YYYY/MM/DD"
value-format="YYYY-MM-DD"
:locale="locale"
/>
</el-config-provider>

import zhCn from "element-plus/lib/locale/lang/zh-cn";

const locale = ref(zhCn)