创建项目

#创建项目 #选择vue3 选择npm
vue create devops-front#安装vue-router 路由
npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4
#启动项目
vue run serve

app.vue   定义<router-view/> 路由入口 

<template><div id="app"><!--路由入口 根路由匹配到的组件--><router-view/></div>
</template>

在项目中 新建一个router目录 存放自定义的路由策略

router.js   从登录页面开始

//以 npm方式引入 vue3 路由
import { createRouter,createWebHashHistory} from 'vue-router'
//定义一个路由数组 每个路由都需要映射到一个组件
const routes = [{//登录页面path : '/',           //路由路径name : 'login',// 按需引入组件 '@:从根目录src开始路径引入'component:()=>import(/*webpackChunkName:'Login'*/ '@/views/Login.vue')}
]//创建路由实例并传递 ‘routes’ 配置
const router = createRouter({history : createWebHashHistory(),      //路由的hash模式routes       //将自己定义的路由数组注册进 vue的路由router中
})export default router

 

main.js    定义的路由方式将在项目中引入

import { createApp } from 'vue'
import App from './App.vue'//导入自定义路由
import router from './router/router.js'
const app  = createApp(App);
app.use(router);        //自定义router路由注册到全局使用
app.mount('#app');

Login.vue   登录页面的组件

<template><h1>hello vue router</h1>
</template>

至此 启动项目 从浏览器访问登录页面 

因node版本不一致导致的  报错：

配置webstorm的export的环境变量