记录在项目中使用vite+vue3+tsx遇到的问题

现在vue很火，vite和vue3的出现无疑又是前端的又一波浪潮，本着在工作中学习的态度，现在项目中用起来

1、如何在vue3中使用router？

vue3弱化了this的使用，在setup中不需要使用this，那在vue3中又是怎么使用router的呢？

答案是先引用useRouter

code 1.1

import { useRouter } from 'vue-router';

然后在setup中调用

code1.2

export default defineComponent({  
    name: 'App',
    setup() {
    const router = useRouter();
    const goHome = () => {
      router.push('/');
    };
    const goSetting = () => {
      router.push('/setting');
    };
    return () => (      <>        // ...      </>    );  },});

2、vue3中怎么访问组件的 property？

执行 setup 时，组件实例尚未被创建。因此，你只能访问以下 property：

• props

• attrs

• slots

• emit

  setup(props, context) { setTimeout(() => { context.emit("showSYCM", "allen"); }, 1200); return {}; }

换句话说，你将无法访问以下组件选项：

• data
• computed
• methods

setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

code 2.1

setup: (props) => {    // const data = reactive({ count: 0 });    const count = ref(0);    return () => (      <>        <h1>{props.msg}</h1>      </>    );  },});

3、Vue3.0在JSX下如何使用插槽(slot)

template写法

<a-table bordered :data-source="dataSource" :columns="columns">
    <template #name="{ text, record }">
      <editable-cell :text="text" @change="val => onCellChange(record.key, 'name', val)" />
    </template>
    <template #operation="{ text, record }">
      <a-popconfirm
        title="Sure to delete?"
      >
        <a>Delete</a>
      </a-popconfirm>
    </template>
  </a-table>

jsx写法

<a-table bordered :data-source="dataSource" :columns="columns" v-slot={{
    name: () => <editable-cell text={text} onChange={val => onCellChange(record.key, 'name', val)} />    operation: () => <a-popconfirm
        title="Sure to delete?"
      >
        <a>Delete</a>
      </a-popconfirm>
}}>
  </a-table>

个人觉得会简介很多

4、vue3项目中如何使用less来写样式

这是我比较意外的一个点，vite不像webpack那样需要配置less，而是直接yarn add less就完事了，就连loader也不需要

------------------------------分割线--------------------------------

有新的问题后续跟进吧，总体来说vite确实很快，但是发现还有一些问题不能解决，例如很多npm包都是使用commonjs的标准封装，存在编译不了的现象。还有就是vue3结合tsx的话，使用组合api是最好的，全程使用函数式编程

参考文献：

vue3js.cn/

vitejs.dev/