Ant Design Vue官网，先上效果图
使用vue3的话，node版本最好大于14如下图，如果多个版本之间切换的话建议也用nvm Node管理
开始搭建
以vite创建项目 npm create vite vue3-demo 这里叫你选 ts 或者 js 这里我们选TS
项目创建完之后，就是下载依赖
下载我们的这次需要用到的UI andt UI
npm i --save ant-design-vue
UI的使用，如下，博主是自己新建了一个文件，然后注册进去main.ts
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
export function utilAntd(app:any){
console.log(`andtUi模板: ${Antd.version}: `.concat('https://www.antdv.com/docs/vue/getting-started-cn'))
app.use(Antd)
}
import { createApp } from 'vue'
import App from './App.vue'
import {setupStore} from './store' //pinia
import { utilAntd } from './util/andt' //andt
import router from './router' // 路由
import './permission' //路由权限未写
const app = createApp(App)
setupStore(app)
utilAntd(app)
app.use(router)
app.mount('#app')
如下图
配置 vite.config
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve:{
alias:{
'@':path.resolve('./src'),
}
},
server:{
port:8999,
open: true,
hmr:{
host:'127.0.0.1',
port:8999
},
proxy:{
'/api':{
target: 'www.baidu.com',
changeOrigin: true,
rewrite: (path: string) => path.replace(/^\/api/, '')
}
}
},
css:{
preprocessorOptions:{
scss:{
additionalData: '@import "@/style/index.scss";'
}
}
}
})
安装 pinia
npm install pinia
使用 pinia
import { createPinia } from "pinia";
import type { App } from "vue";
const store = createPinia ()
export function setupStore(app: App<Element>) {
app.use(store);
}
export { store }
安装route
npm install vue-router@4
或
yarn add vue-router@4
router的使用，在src下新建一个route的文件，然后新建 index.ts 如下图
代码如下
import { createRouter,createWebHashHistory,RouteRecordRaw } from 'vue-router'
export const constRoutes:RouteRecordRaw[]=[
{
...
}
]
const router = createRouter({
history:createWebHashHistory(),
routes:constRoutes as RouteRecordRaw[],
// 刷新滚动
scrollBehavior: () => ({ left: 0, top: 0 })
})
export default route
