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

2019-04-25 14:57:36 +08:00
 a123321456b

作为一个全干工程师, 用 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

谢谢

2228 次点击
所在节点    Vue.js
8 条回复
c9y
2019-04-25 15:57:56 +08:00
例如要加载 foo 页面,localhost:port/#/foo
1KN6sAqR0a57no6s
2019-04-25 16:34:23 +08:00
如果我没猜错,你们现在是在 html 文件里通过 script 标签引入 vue,并且没有使用 Vue.component()方法。
murmur
2019-04-25 16:35:10 +08:00
spa 才用 route 多个页面可以视作每个页面都是独立的 vue 应用,href 跳转就搞定
a123321456b
2019-04-25 17:28:56 +08:00
@YuxiangLuo 对,现在就是 html 的 script 标签引入 vue.js 和自己的 js。
在自己的 js 里用以下方式实例化
new Vue({
el: '#app',
data: obj
})
a123321456b
2019-04-25 17:31:36 +08:00
@murmur href 就是之前项目的做法,感觉良好。
现在的新项目要做 spa,不知道能不能继续像现在的流程一样,html 交给 UI,自己只需要做业务逻辑。
1KN6sAqR0a57no6s
2019-04-25 17:46:00 +08:00
@a123321456b 按照你目前的需求,用构建工具进行组件化开发是必须的。
banricho
2019-04-25 17:52:23 +08:00
都新项目了直接 vue-cli 建一个不就好了,纠结这个干啥
a123321456b
2019-04-26 11:13:38 +08:00
@YuxiangLuo
@banricho
谢谢回答!这就去试试

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/558601

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX