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

Vue是一种很优秀的语言，使用它，简单快捷。生产出一些好的页面后，如何与现有的工程进行结合呢。以express工程为例（1）页面很多，自成体系。且页面是通过vue的脚手架工程里编译而成的。编译后的工程放在这个目录/dist/将此目录作为静态目录，可以直接访问app.use(express.static(path.join(__dirname, 'dist

dualven_in_csdn

4492人浏览 · 2018-01-09 17:51:55

dualven_in_csdn · 2018-01-09 17:51:55 发布

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了，所以，就当它是一个普通的页面处理吧

Vue

前往低代码交流专区

更多推荐