摸鱼不如学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了！
