vue3+vite+vant搭建项目

摸鱼不如学vue3，总结一下带薪学习的收获

1. 新建vue版本的vite项目模板

yarn create vite my-vue-app --template vue

2.引入UI框架（vant，按需导入）

安装3.x版本vant

npm i vant@next -S

使用 vite-plugin-style-import 实现按需引入。

// vite.config.js

import vue from '@vitejs/plugin-vue';

import styleImport from 'vite-plugin-style-import';

export default {

  plugins: [

    vue(),

    styleImport({

      libs: [

        {

          libraryName: 'vant',

          esModule: true,

          resolveStyle: (name) => `vant/es/${name}/style`,

        },

      ],

    }),

  ],

};

注意在使用的时候要在main.js中导入相关的组件（之前忘了导入，试半天没效果= =）

// main.js
// 以button组件为例
import { createApp } from 'vue';
import { Button } from 'vant';

const app = createApp();
app.use(Button);

3.集成路由

此处用到alias，所以把vite配置相关贴出来

export default defineConfig({
  //...
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      "components": path.resolve(__dirname, "src/components"),
      "styles": path.resolve(__dirname, "src/styles"),
      "plugins": path.resolve(__dirname, "src/plugins"),
      "views": path.resolve(__dirname, "src/views"),
      "layouts": path.resolve(__dirname, "src/layouts"),
      "utils": path.resolve(__dirname, "src/utils"),
      "apis": path.resolve(__dirname, "src/apis"),
      "dirs": path.resolve(__dirname, "src/directives"),
    },
  }
  //...
})

npm install vue-router@next
tip:之前没装@next版本，路由是3.x版本的，不支持相关的api，所以要注意在vue3时要装@next，也就是4.x版本的路由

新建router文件夹及index.js

// index.js简单配置 routes和vue2定义是一样的
import * as VueRouter from 'vue-router'
import routes from './routes'

const router = VueRouter.createRouter({
  routes,
  history: VueRouter.createWebHashHistory(),
})

export default router

main.js中使用router

import router from "./router";
app.use(router);
app.mount("#app");

使用router
这里我导入router/index.js创建好的路由并且调用push，看到很多帖子上说

import {useRouter} from 'vue-router'
const router = useRouter()
router.push('/xxx')

这样的方式可以，但是我试过会报错，useRouter()是个null，这个问题我不知道为何，有知道的可以告知我一下哈

我的router使用：

import vueRouter from "@/router";
vueRouter.push("/test");

4.main.ts入口支持

npm install typescript

根目录添加tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true, 
        "jsx": "preserve",
        "moduleResolution": "node"
    },
    "include": [
        "src/**/*",
        "src/main.d.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

修改main.js为main.ts 以及index中的引入也改为main.ts

---

至此已经可以写写静态和路由跳转，axios和vuex的集成在后面再补充吧

使用tsx开发

之前使用非vite项目集成tsx，发现报错React is not defined，看到这个报错感到十分头疼，抱着试试的想法百度了下，居然还真找到了解决方法
具体可以参考这个https://blog.csdn.net/weixin_44441196/article/details/118727593
大概就是要装vite版本的plugin-vue-jsx然后vite.config.js配置一下，就可以愉快地写tsx了！