2023-03-10 Vue3 学习笔记

style v-bind CSS变量注入

<template>
  <span> style v-bind CSS变量注入</span>  
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  const color = ref('red')
</script>
<style scoped>
  span {
    /* 使用v-bind绑定组件中定义的变量 */
    color: v-bind('color');
  }  
</style>

v-model升级

子组件

<template>
  <div>
    <p>{{msg}}，{{modelValue}}</p>
    <button @click="onChangeMsg">改变msg</button>
  </div>
</template>

<script setup lang="ts">
type Props = {
  modelValue: string,
  msg: string
}
defineProps<Props>()
const emit = defineEmits(['update:modelValue', 'update:msg'])

const onChangeMsg = () => {
  // 触发父组件的值更新
  emit('update:modelValue', '恰如此时此刻')
  emit('update:msg', '彼时彼刻')
}
</script>

父组件

<template>
  // v-model:modelValue简写为v-model
  // 绑定多个v-model
  <Children v-model="name" v-model:msg="msg"></Children>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Children from "./Children.vue"

const msg = ref('hello啊')
const name = ref('树哥')
</script>

另外一种使用方式

<template>
  <mtd-checkbox size="small" v-model:checked="value" class="elsa-check-box">
    {{ label }}
  </mtd-checkbox>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps({
  modelValue: Boolean,
  label: String,
});

const emit = defineEmits(['update:modelValue']);

const value = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  },
});
</script>

vue3 deep写法

 :deep(.el-upload--picture-card) {
    display: none;
 }

unplugin-auto-import / unplugin-vue-components

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
// import { ArcoResolver } from 'unplugin-vue-components/resolvers'

import path from 'node:path';
import { fileURLToPath } from 'node:url';

const _filename = fileURLToPath(import.meta.url);
const _dirname = path.dirname(_filename);

const base = process.env.PUBLIC_PATH || process.env.PUBLIC_URL || '';

// https://vitejs.dev/config/
export default defineConfig({
  base: base + '/',
  resolve: {
    alias: {
      '@': path.resolve(_dirname, './src'),
      '@assets': path.resolve(_dirname, './src/assets'),
      '@components': path.resolve(_dirname, './src/components'),
      '@pages': path.resolve(_dirname, './src/pages'),
      '@common': path.resolve(_dirname, './src/common'),
      '@utils': path.resolve(_dirname, './src/utils'),
    },
  },
  root: process.cwd(),
  plugins: [
    vue(),
    AutoImport({
      // 需要去解析的文件
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
      ],
      // imports 指定自动引入的包位置（名）
      imports: ['vue', 'pinia', 'vue-router'],
      dts: 'src/auto-import.d.ts',
      // 生成相应的自动导入json文件。
      eslintrc: {
        // 启用
        enabled: true,
        // 生成自动导入json文件位置
        filepath: './.eslintrc-auto-import.json',
        // 全局属性值
        globalsPropValue: true,
      },
      resolvers: [],
      // resolvers: [ArcoResolver()],
    }),
    Components({
      // imports 指定组件所在目录，默认为 src/components
      dirs: ['src/components/', 'src/view/'],
      // 需要去解析的文件
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      dts: 'src/components.d.ts',
      resolvers: [
        // ArcoResolver({
        //   sideEffect: true,
        // }),
      ],
    }),
  ],
  build: {
    // 消除打包大小超过500kb警告
    chunkSizeWarningLimit: 2000,
    sourcemap: true,
  },
});