vue案例实战
案例实战1. 创建项目npm create vite@latest 0410-vue3-vuex-project我们这个项目会用 vite2.8 + Vue3.2 + Router4 + Vuex4 + TypeScript4.6 + Element-Plus + axios2. 安装依赖npm install vue-router@4npm install vuex@nextnpm instal
·
案例实战
1. 创建项目
npm create vite@latest 0410-vue3-vuex-project
我们这个项目会用 vite2.8 + Vue3.2 + Router4 + Vuex4 + TypeScript4.6 + Element-Plus + axios
2. 安装依赖
npm install vue-router@4
npm install vuex@next
npm install axios
npm install element-plus
npm install less less-loader -D
3. 配置路由
src/router/index.ts
import {createRouter, createWebHashHistory, RouteRecordRaw} from "vue-router";
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes,
})
export default router
根组件
在根组件中添加路由视口。
<template>
<router-view></router-view>
</template>
布局组件
Layout.vue
src/views/Layout.vue
<template>
<!-- 导航组件 -->
<!-- 导航对应的内容组件 -->
<router-view></router-view>
</template>
<script setup lang="ts">
import {ref} from 'vue'
</script>
<style scoped>
</style>
配置Layout的路由
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue')
},
{
path: '/layout',
name: 'Layout',
component: () => import('../views/Layout.vue')
}
]
首页组件
src/views/Home.vue
<template>
<div>首页</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
配置路由
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Layout',
component: () => import('../views/Layout.vue'),
children: [
{
path: 'home',
name: 'Home',
component: () => import('../views/Home.vue')
},
]
}
]
新闻组件
src/views/News.vue
<template>
<div>新闻</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
配置路由
{
path: 'news',
component: () => import('../views/News.vue')
},
关于我们
src/views/About.vue
<template>
<div>关于我们</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
配置路由:
{
path: 'about',
component: () => import('../views/About.vue')
},
登录组件
src/views/Login.vue
<template>
<div>登录</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
配置路由
{
path: '/login',
component: () => import('../views/Login.vue')
}
顶部组件
src/components/Header.vue
<template>
菜单
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
使用这个组件,在 Layout.vue 中引入:
<template>
<!-- 导航组件 -->
<Header></Header>
<!-- 导航对应的内容组件 -->
<router-view></router-view>
</template>
<script setup lang="ts">
import Header from '../components/Header.vue'
</script>
挂载路由
在 main.ts 文件中挂载路由
import router from './router'
App.use(router).mount('#app')
更多推荐
已为社区贡献2条内容
所有评论(0)