V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
a123321456b
V2EX  ›  Vue.js

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

  •  
  •   a123321456b · 2019-04-25 14:57:36 +08:00 · 2197 次点击
    这是一个创建于 2042 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    谢谢

    8 条回复    2019-04-26 11:13:38 +08:00
    c9y
        1
    c9y  
       2019-04-25 15:57:56 +08:00 via Android
    例如要加载 foo 页面,localhost:port/#/foo
    1KN6sAqR0a57no6s
        2
    1KN6sAqR0a57no6s  
       2019-04-25 16:34:23 +08:00 via Android
    如果我没猜错,你们现在是在 html 文件里通过 script 标签引入 vue,并且没有使用 Vue.component()方法。
    murmur
        3
    murmur  
       2019-04-25 16:35:10 +08:00
    spa 才用 route 多个页面可以视作每个页面都是独立的 vue 应用,href 跳转就搞定
    a123321456b
        4
    a123321456b  
    OP
       2019-04-25 17:28:56 +08:00
    @YuxiangLuo 对,现在就是 html 的 script 标签引入 vue.js 和自己的 js。
    在自己的 js 里用以下方式实例化
    new Vue({
    el: '#app',
    data: obj
    })
    a123321456b
        5
    a123321456b  
    OP
       2019-04-25 17:31:36 +08:00
    @murmur href 就是之前项目的做法,感觉良好。
    现在的新项目要做 spa,不知道能不能继续像现在的流程一样,html 交给 UI,自己只需要做业务逻辑。
    1KN6sAqR0a57no6s
        6
    1KN6sAqR0a57no6s  
       2019-04-25 17:46:00 +08:00 via Android
    @a123321456b 按照你目前的需求,用构建工具进行组件化开发是必须的。
    banricho
        7
    banricho  
       2019-04-25 17:52:23 +08:00
    都新项目了直接 vue-cli 建一个不就好了,纠结这个干啥
    a123321456b
        8
    a123321456b  
    OP
       2019-04-26 11:13:38 +08:00 via Android
    @YuxiangLuo
    @banricho
    谢谢回答!这就去试试
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1063 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:32 · PVG 06:32 · LAX 14:32 · JFK 17:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.