Vite2+vue3+ts 使用 router，layout 搭建页面框架,并做页面自适应

Posted 2023-04-04

参考技术A vue3 对应使用的是 vue-router@4 版本， 有新的用，但是向下兼容
本文档源码： Lzq811/vite-vue-ts-eslint at vite2+vue3+ts使用vue-router搭建页面框架 (github.com)

本文的对应源码地址： Lzq811/vite-vue-ts-eslint at vite2+vue3+ts使用vue-router搭建页面框架 (github.com)

vite vue自动加载api（再也不用每个文件引入refreactivevue-router）

安装自动引入插件

pnpm i -D unplugin-auto-import

vite.config.ts

...
export default defineConfig(
  plugins: [
    vue(),
+    AutoImport(
      imports: ["vue", "vue-router"], // 自动导入vue和vue-router相关函数
      dts: "src/auto-import.d.ts", // 生成 `auto-import.d.ts` 全局声明
    ),
  ],
);

这时候呢 就可以去使用 不再去引入ref

<script setup lang="ts">
const router = useRoute();
const name = ref("奥特曼");
</script>

如果 会报以下提示 她说告诉你 不知道ref是什么

 解决方法 可以去.eslintrc.cjs 文件中 把 no-undef关闭校验

module.exports = 
 ...
  rules: 
    "no-undef": "off",
  ,
;