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>