摸魚不如學(xué)vue3聋涨，總結(jié)一下帶薪學(xué)習(xí)的收獲
1. 新建vue版本的vite項(xiàng)目模板
yarn create vite my-vue-app --template vue
2.引入U(xiǎn)I框架（vant琼娘，按需導(dǎo)入）
安裝3.x版本vant
npm i vant@next -S
使用 vite-plugin-style-import 實(shí)現(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`,
},
],
}),
],
};
注意在使用的時(shí)候要在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時(shí)要裝@next嗤疯，也就是4.x版本的路由
新建router文件夾及index.js
// index.js簡(jiǎn)單配置 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')
這樣的方式可以闺兢，但是我試過會(huì)報(bào)錯(cuò)身弊，useRouter()是個(gè)null，這個(gè)問題我不知道為何列敲，有知道的可以告知我一下哈
我的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的集成在后面再補(bǔ)充吧
使用tsx開發(fā)
之前使用非vite項(xiàng)目集成tsx，發(fā)現(xiàn)報(bào)錯(cuò)React is not defined戴而，看到這個(gè)報(bào)錯(cuò)感到十分頭疼凑术，抱著試試的想法百度了下，居然還真找到了解決方法
具體可以參考這個(gè)https://blog.csdn.net/weixin_44441196/article/details/118727593
大概就是要裝vite版本的plugin-vue-jsx然后vite.config.js配置一下所意，就可以愉快地寫tsx了淮逊！
