Vite 构建项目 & 路由配置

Vite 构建项目 & 路由配置

1.构建项目

(xxx表示项目名称)

npm create vite@latest xxx

2.载入依赖

npm install

3.载入路由router

npm install vue-router@next

4.运行项目

npm run dve

//mac 需要权限运行
sudo npm run dve

5.配置路由

(与 webpack构建vue-cil)配置一致

配置方式
//1 安装vue-router
npm install vue-router@next
//end

//2 main.js页面引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 
const app = createApp(App)
app.use(router)
app.mount('#app')
//end

//3 新建router文件夹 index.js 创建路由并输出对象
import {
    createRouter,
    createWebHashHistory
} from 'vue-router'


const routes = [
    {
        path: '/',
        name: 'login',
        component: () => import('../views/HomeLogin.vue')
    },
    {
        path: '/HomeView',
        name: 'home',
      children: [ // (子路由 需要在父页面 放置 <router-view /> 标签)
            { path: '/HomeView', component: () => import('./../views/AboutView.vue') },
            { path: '/HomeView', component: () => import('./../views/AaaaView.vue') },
        ]
    },
    
]
// 创建路由
const router = createRouter({ 
    history: createWebHashHistory(), //process.env.BASE_URL已废弃 //createWebHistory
    routes
})
// 输出对象
export default router
//end

//4 vue页面
<template>
  <router-view/><!-- router-view 必须存在的路由 -->
</template>
//end

//5.页面跳转
//import { useRoute, useRouter } from 'vue-router' 
//相当于vue2中的 $route 发出 和 $router 接收

<template>
  <button @click="gohome"></button>
</template>

<script setup>
    import { useRouter } from 'vue-router'
    const $router = useRouter()//路由口
    
    function goHome(){//跳转
        $router.push('/HomeView');
    }
</script>

6.打包项目

npm run build

项目生成后在build文件夹

235 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注