= [
{
path: ‘/‘,
name: ‘Login‘,
component: Login
},
{
path: ‘/admin‘,
name: ‘Admin‘,
component: () => import(‘@/views/Admin.vue‘) // 懒加载 Admin 组件
}
]
const router: Router = createRouter({
history: createWebHashHistory(),
routes: routes
})
export default router
# c.在 src 下创建 views 目录，用来存储页面组件。在 views 目录下创建 Login.vue 、Admin.vue。
# Login.vue
Login
登陆
# Admin.vue
Admin
# d.在 main.ts 文件中加载路由配置
import { createApp } from ‘vue‘
import App from ‘@/App.vue‘
import router from ‘./router/index‘
createApp(App).use(router).mount(‘#app‘)
# e.修改App.vue，添加路由映射
APP Module
```
### 5、集成UI框架Element Plus
```
# a.安装element-plus和vite-plugin-style-import
npm i element-plus
npm i vite-plugin-style-import -D
# b.修改vite.config.ts配置按需加载
import { defineConfig } from ‘vite‘
import vue from ‘@vitejs/plugin-vue‘
// 需要安装@types/node -> npm i @types/node -D
import { resolve } from ‘path‘
// 需要安装vite-plugin-style-import -> npm i vite-plugin-style-import -D
import styleImport from ‘vite-plugin-style-import‘;
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// 按需载入 Element Plus
styleImport({
libs: [
{
libraryName: ‘element-plus‘,
esModule: true,
ensureStyleFile: true,
resolveStyle: (name) => {
return `element-plus/lib/theme-chalk/${name}.css`
},
resolveComponent: (name) => {
return `element-plus/lib/${name}`
}
}
]
})
],
resolve: {
alias: {
‘@‘: resolve(__dirname, ‘src‘) // 设置 `@` 指向 `src` 目录
}
},
server: {
port: 4000, // 设置服务启动端口号
open: true, // 设置服务启动时是否自动打开浏览器
cors: true // 允许跨域
}
})
# c.在main.ts中加载element-plus
import { createApp } from ‘vue‘
import App from ‘@/App.vue‘
import router from ‘./router/index‘
// 按需引入需要的element-plus组件
import { ElIcon, ElLoading, ElCard, ElButton } from ‘element-plus‘
// 创建Vue3实例
const app = createApp(App)
// 加载默认路由
app.use(router)
// 加载element-plus组件
app.use(ElButton).use(ElCard).use(ElLoading).use(ElIcon)
// 挂载到DOM
app.mount(‘#app‘)
# d.修改Login.vue将登陆链接改为element-plus的el-button组件，验证UI组件是否正确引入
Login
登陆
```Vue3开发入门
原文：https://blog.51cto.com/dusthunter/2928849
