# vite+ts-2207

**Repository Path**: connerljlx_admin/vite-ts-2207

## Basic Information

- **Project Name**: vite+ts-2207
- **Description**: 2207和vite和ts基础
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-14
- **Last Updated**: 2025-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vite基础配置
https://vitejs.cn/
配置文件在 根目录下的 vite.config.js中
```js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
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)),
      '@c': fileURLToPath(new URL('./src/components', import.meta.url)),
      '@v': fileURLToPath(new URL('./src/views', import.meta.url))
      
    }
  }
})

```
注意注意注意：
    如果vite是ts环境,路径别名还需要在 ts配置文件中声明，告诉ts我有这个路径别名
    tsconfig.json
```json
{
  
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@c/*": ["./src/components/*"]
    }
  }
}

```
# 组合式api  compositionApi


option api
composition api

特点：
  解决了选项式api,造成当组件 业务 复杂时，代码可读性和可维护性变差的问题

特点：
  函数式编程

# 组合式api入口setup
组合式api  属性如下

  
    setup 组合式api 入口， 取代了（beforeCreate个created钩子） 所有代码业务代码要写在setup中
    返回值：  
      向 template 暴露 变量和方法，这里面的变量方法 模板可以直接使用
    setup触发时 实例还未创建完成 不能使用this 访问 实例
  
```js
{
  props: {},
  setup(){
    return {
      // 这里面的属性方法会直接暴露给模板
    }
  },
  components: {}
}
```

+ setup访问props
setup 第一个参数就是props
```js
{
  props: {
    title: String
  },
  setup(props) {
    // props.title
  }
}
```
+ setup 第二个参数
对象  有如下属性
  attrs 组件的自定义属性的值 （props中这里没有） props没有接收的在这里拿到
  emit 触发 子组件自定义事件的方法
  slots 插槽
  expose 暴露公共方法
```js
{
  props: {
    title: String
  },
  setup(props, {attrs, emit}) {
   
  }
}
```