请问 vue.js 路由的开发流程

作为一个全干工程师, 用 vue 做过几个传统项目, 新项目准备做单页面 SPA 并且实现路由懒加载, 但是对路由的使用不太了解, 而且之前没有用过前端的构建工具, 想请问一下大家。

现在开发流程是:
UI 设计负责开发 html 的原型
在原型 html 的基础上添加 vue 语义和 js

现在看了几个路由教程, 类似

// 直接加载
const Foo = { template: '<div>foo</div>' }

const routes = [
  { path: '/foo', component: Foo }
]

或者

// 懒加载, 需要构建工具
// const Foo = () => import('./Foo.vue')

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

看起来页面都是写成 js，html 页面不能直接拿来用了。
这是不是意味着现在的开发流程不管用了?
如果不是, 能不能给个例子参考怎么让路由懒加载相应的 html, js，css

谢谢