# vite+ts+组合式api

**Repository Path**: connerljlx_admin/vite-ts-composite-api

## Basic Information

- **Project Name**: vite+ts+组合式api
- **Description**: vite+ts+组合式api
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-14
- **Last Updated**: 2023-08-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 静态资源处理
https://cn.vitejs.dev/guide/assets.html
# 环境变量
+ 定义环境
根目录下创建
.env.devemopment
.env.production
```
VITE_BASE_URL=/api
```
自定义环境变量 需要 以 VITE_ 开头
+ 获取
import.meta.env.VITE_BASE_URL

# 常见开发配置
```js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  server: {
    host: '0.0.0.0',
    port: 9527,
    open: true,
    proxy: {
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    }
  },
  // 路径别名
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@v': fileURLToPath(new URL('./src/views', import.meta.url)),
      '@c': fileURLToPath(new URL('./src/components', import.meta.url))
    }
  }
})

```
注意：
    如果 vite 配置ts环境，环境变量 需要 tsconfig.app.json 再次配置ts环境变量

  
# 组合式api  composition Api
特点：
  实现了 函数式编程

options Api 选项式api
```js
{
  data(){
    return {

    }
  },
  methods: {},
  watch: {},
  computed: {}
}
```

组合式api优点:
  1 实现了函数式编程 代码复用程度更高
  2 更灵活的代码组织  代码可维护性更高  
    处理相同逻辑关注点的代码被强制拆分在了不同的选项中，位于文件的不同部分。在一个几百行的大组件中，要读懂代码中的一个逻辑关注点，需要在文件中反复上下滚动，这并不理想。另外，如果我们想要将一个逻辑关注点抽取重构到一个可复用的工具函数中，需要从文件的多个不同部分找到所需的正确片段。
  3 更好的类型推导 对于ts支持程度更高
  4 更小的生产包体积 打包体积更小


# 组合式api setup
1
```js
{
  // 是组合式api入口函数， 一切 业务代码定义在setup中 无法访问this(触发在实例初始化之前)
  setup(){
    const msg = '你好vue3';
    const fn = () => {

    }
    // 返回对象中的属性方法 暴露给 模板使用
    return {
      msg,
      fn
    }
  }
}
```
2 setup中接收props
```js
{
  props: {
    title: {
      type: String,
      required: true
    }
  },
  setup(props){
    // setup第一个参数就是props 用于 在setup业务代码中获取 props
  }
}
```
3 setup 第二个参数
```js
export default {
  setup(props, context) {
    // 透传 Attributes（非响应式的对象，等价于 $attrs）
    console.log(context.attrs)

    // 插槽（非响应式的对象，等价于 $slots）
    console.log(context.slots)

    // 触发事件（函数，等价于 $emit）
    console.log(context.emit)

    // 暴露公共属性（函数）
    console.log(context.expose)
  }
}
```