vite2+vue3踩坑

Vite

vite简单来说是一个快速的构建工具。初始化命令为
npm init @vitejs/app vue-demo或者npm init vite-app vite-demo
也可以安装脚手架，用脚手架命令初始化，就不细讲了。
vite支持很多框架，所以初始化时会进行一些选择，按需选即可。
我选的是vue3，项目初始结构与普通vue项目类似，主要2点不同：

1. index.html，位置位于根路径下，原因官网有说明。
2. vite.config.ts，比较重要，类似vue.config.ts。

vite的一些API主要面向于插件作者，一般开发/学习者关注配置项即可。
配置项踩坑：

1. resolve.alias

// 原写法 vue.config.ts
chainWebpack: (config) => {
    config.resolve.alias
      .set('@api', resolve('src/api'))
      .set('@assets', resolve('src/assets'))
}
// 现写法 主要是src前面多了/
resolve: {
    alias: [
      { find: '@/', replacement: '/src/' },
      { find: '@com', replacement: '/src/components' },
    ]
  }

2. server

//原为devServer，且rewrite有点不同
server: {
    port: 3000,
    proxy: {
      '/local': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/local/, '')
      }
    }
  }

Vue3

主要是记录与vue2的一些差别。

Vue Router

初始化状态是没有第三方库和插件的，要自己安装。
安装vue-router时犯了个错，没有指定版本，安装了3.x的，当引用router的时候，一直提示没有install方法，后来才知道，要指定4.x版本进行安装，路由初始化也不一样。
用npm info plugin-name versions查看版本。

import { createRouter, createWebHashHistory } from 'vue-router'

const routes: any[] = []

export default createRouter({
    routes,
    history: createWebHashHistory()
})

详见官方文档。
在main.ts用

const app = createApp(App)
app.use(router)
app.mount('#app')

---

路由跳转和传参也是个比较坑的。

1. 路由跳转使用方法，只能在setup中用，不能使用this.$router，要用useRouter，vue-router模块的方法
2. push方法推荐设置name，不能用path（硬用也可以，但是会有警告，而且params传不了参），不过传参params和query可以一起用，但是页面刷新后params会清空，而query不会。
3. route打印不出来，只能打印route.params这样。

// from
setup() {
    const router = useRouter();

    const toAdd = () => {
      router.push({
        name: "add",
        params: {
          test: 111,
        },
        query: {
          test: 444,
        },
      });
    };
}
// to
setup() {
    const route = useRoute();
    console.log(route.params, route.query, route);
}

路由信息

刷新后params就会变为空对象。

---

有个问题没解决，是个警告。

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

将上面代码替换掉普通的router-view后，控制台会警告

transition warn

vscode template

只针对vscode的快捷键模板，ws可以直接新建模板。

"v3t": {
        "scope": "vue",
        "prefix": "v3t",
        "body": [
            "<template>",
            "",
            "</template>",
            "",
            "<script lang=\"ts\">",
            "import { defineComponent } from 'vue'",
            "",
            "export default defineComponent({",
            "  name: '',",
            "  setup() {",
            "",
            "  }",
            "})",
            "</script>",
            "",
            "<style lang=\"less\" scoped>",
            "",
            "</style>"
        ],
        "description": "vue3 ts template"
    }

v-for的ref

如果要用ref绑定一个v-for的元素，需要用一个数组存，而不是挂在$refs上。

事件方法

原来写在methods里的方法有了变化。
需要在setup里写好再return出去。

setup() {
    let count = ref(0);
    const add = () => {
      count.value++;
    };
    return { count, add };
  },

data

上面也有提到，数据定义需要用函数包装，一般来说，基本类型用ref，对象、数组之类的用reactive。
可以用toRefs将reactive对象转为ref对象，利用这点可以将对象解构出去。
另外，ref也可以包装对象，但是不能使用toRefs方法，用了会报很多警告，且无值返回。