# ts-2206

**Repository Path**: connerljlx_admin/ts-2206

## Basic Information

- **Project Name**: ts-2206
- **Description**: 2206班ts xxxxxxx
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-02-01
- **Last Updated**: 2023-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 启动vite项目
[vite中文网](https://vitejs.cn/)
```js
npm create vite@latest
``` 

# vite配置文件
项目根目录下的 vite.config.js
```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()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@v': fileURLToPath(new URL('./src/views', import.meta.url))
    }
  },
  server: {
    host: '0.0.0.0',
    port: 9527,
    open: true,
    proxy: {}
  }
})

```
注意配置路径别名后，还需要 在 根目录 tsconfig.json文件中配置， ts才可以识别这个路径别名，否则ts会标注错误
```json
{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@v/*": ["./src/views/*"]
    }
  },

  "references": [
    {
      "path": "./tsconfig.config.json"
    }
  ]
}

```

# vite中环境变量
在项目根目录下创建
.env.development
.env.prodution 
文件 存储 环境变量
环境 命名必须以 VITE_开头 比如  VITE_BASE_URL
```js
VITE_MSG='开发环境的值'
```

获取 import.meta.env.环境变量名



Vue Volar extension Pack
volar vscode vue3 插件



# vue3 组合式api

选项式api  options api
```js
{
  data(){
    return {
      // 数据
    }
  },
  methods: {},
  computed: {},
  watch: {}
  ....
}
```
选项式api:
  你可以看到，处理相同逻辑关注点的代码被强制拆分在了不同的选项中，位于文件的不同部分。在一个几百行的大组件中，要读懂代码中的一个逻辑关注点，需要在文件中反复上下滚动，这并不理想。另外，如果我们想要将一个逻辑关注点抽取重构到一个可复用的工具函数中，需要从文件的多个不同部分找到所需的正确片段。

组合式api  composition api


![](https://user-images.githubusercontent.com/499550/62783026-810e6180-ba89-11e9-8774-e7771c8095d6.png)

# 组合式api 入口函数 setup 
setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：

需要在非单文件组件中使用组合式 API 时。
需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。

一切 数据 方法 以及 其他计算属性 都在 setup中完成


注意：
  setup 返回对象的属性和方法会自动暴露给 模板 template

```js
{
  props: {
    title: {
      type: String,
      required: true
    }
  },
  setup(props, context){
    /* 
      参数1  props props.title
      context.emit 触发自定义事件方法 相当于 optionApi中this.$emit

      一切业务 都要在定义在setup中 （数据、方法、计算属性。侦听器、生命周期函数）

      setup 返回对象属性 和方法 会自动暴露给 模板 template
      setup触发时 组件还未实例化完成，无法使用this
    */
    const msg = '你好世界'
     return {
      msg
     }
  },
  components: {}
}
```
组合式api特点是 函数式编程


# 组合式api 中的响应式数据
## 使用ref 定义响应式数据
使用场景:
  定义基础数据类型 字符串 number 数组（一般也使用ref)
+ 定义动态数据
```js
import { ref } from 'vue'
{
  setup(){
    const msg = ref('你好vue3')
    const changeMsg = () => {
      msg.value = '值改变了'
    }
    /* 
      自动 包装一个对象，将 数据初始值 定义在包装对象的value属性中 并使用Proxy代理返回代理对象
      注意：
        模板使用 可以省略value 但是在js中一定要加value
    */
   return {
      msg
   }
  }
}
```
+ 获取dom或子组件实例
```html
<button ref="btnRef">按钮</button>
```
```js
import { ref, onMounted } from 'vue'
{
  setup(){
  const btnRef = ref(null)
  onMounted(() => {
    // btnRef.value 获取 button这个dom对象
  })
   return {
      btnRef
   }
  }
}