vue页面与现有工程的几种集成方法

Vue是一种很优秀的语言,使用它,简单快捷。

生产出一些好的页面后,如何与现有的工程进行结合呢。以express工程为例

(1) 页面很多,自成体系。 且页面是通过vue的脚手架工程里编译而成的。

编译后的工程放在这个目录

/dist/

将此目录作为静态目录,可以直接访问

app.use(express.static(path.join(__dirname, 'dist')));

路由里添加路由

router.get('/home', function (req, res, next) {
    res.sendFile(path.resolve(__dirname, '../index.html'))
})

index.html内容为

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>GBCOM</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/build.js"></script>
  </body>
</html>

记得这个页面集里面虽然可以跳来跳去,但如果在某个页面停留,刷新,还是会走到服务器,于是,最好还是要在路由里加一下,如下:

router.get('/about', function (req, res, next) {
    res.sendFile(path.resolve(__dirname, '../index.html'))
})


(2)页面只是单独页面。 由vue脚手架编译成生产环境

也如同(1),只不过它的规模比较小,只有一个页面

(3)页面只是作为原生页面的一部分

   $(".modal-body").append("<div id='app'></div> <script src='/acdist.js'></script>   ");

将页面动态嵌入了一个原生的页面里了

(4)页面是原生的vue,没有通过脚手架编译。

因为连vue也被 当成一个普通的js了,所以 ,就当它是一个普通的页面处理吧

<script src="/js/vue.min.js"></script>
    <script src="/js/vue-resource.min.js"></script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dualven_in_csdn

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值