摸魚不如學(xué)vue3，總結(jié)一下帶薪學(xué)習(xí)的收獲

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

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

2.引入UI框架（vant，按需導(dǎo)入）

安裝3.x版本vant

npm i vant@next -S

使用 vite-plugin-style-import 實現(xiàn)按需引入。

// 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中導(dǎo)入相關(guān)的組件（之前忘了導(dǎo)入，試半天沒效果= =）

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

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

3.集成路由

此處用到alias，所以把vite配置相關(guān)貼出來

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版本的，不支持相關(guān)的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
這里我導(dǎo)入router/index.js創(chuàng)建好的路由并且調(diào)用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

至此已經(jīng)可以寫寫靜態(tài)和路由跳轉(zhuǎn)，axios和vuex的集成在后面再補充吧

使用tsx開發(fā)

之前使用非vite項目集成tsx，發(fā)現(xiàn)報錯React is not defined，看到這個報錯感到十分頭疼，抱著試試的想法百度了下，居然還真找到了解決方法
具體可以參考這個https://blog.csdn.net/weixin_44441196/article/details/118727593
大概就是要裝vite版本的plugin-vue-jsx然后vite.config.js配置一下，就可以愉快地寫tsx了！