# vue3.0 + vite2.0 + element-puls

**Repository Path**: xia_ming/vueViteElement

## Basic Information

- **Project Name**: vue3.0 + vite2.0 + element-puls
- **Description**: 使用 vue3.0、vite2.0、element-plus、vuex、axios、pug、sass 搭建的项目。使用了 vue3.0 的 script setup 语法糖来处理页面逻辑。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: https://gitee.com/xia_ming/vueViteElement
- **GVP Project**: No

## Statistics

- **Stars**: 14
- **Forks**: 0
- **Created**: 2021-07-06
- **Last Updated**: 2023-04-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Axios, element-plus, vue-router, vue3, vite2

## README

### [在线访问](http://vue3-vite2.linxiaming.cn/) 有点慢0.0.

### 通过 git / zip 把代码下载下来
1. npm install 安装依赖(node > 12.0)
2. npm run dev 运行
3. npm run build 打包项目

### 项目使用 vue3.0、vite2.0、element-plus、vuex、axios、pug、sass 等搭建的。
### .vue 模板文件的逻辑都是用 script-setup 语法糖来编写的

### vue3.0 项目创建
### 依赖根据 package.json
### 启动文件为 vite.config.js

### 一、定义全局属性值，并获取
1. 在 main.js
2. app.config.globalProperties.$axios = axios // 定义全局属性值

### 在模板里(setup中)

1. 使用 proxy 来代替 vue 之前的 this
const { proxy } = getCurrentInstance()
proxy.$axios
2. 使用 defineProps 来获取父组件传递给子组件的数据，defineEmit 用来把数据传给父组件
import { defineProps, defineEmit } from 'vue'
const emit = defineEmit(['closeFun', 'update:isDialog'])
const props = defineProps({
  isDialog: {
    required: true
  }
})

### 使用 async/await
1. 页面请求服务器数据，可以使用 async/await 来处理服务器回传的数据。然后进行逻辑处理。（参考 src/views/Login/index.vue）