-
想赢别喊停。2020-01-01 00:00
- 49
- 0
需求：
vue的单页面工程在打包的时候，除了生成一份单页面工程外，还需要额外生成一份和vue路由对应的多个.html文件，
这批html的代码和pages里面的.vue文件几乎是一致的，单个.html页面可以浏览无报错。
例如：
path为/index的页面，对应的是index.vue,最后打包的时候可以生成一个对应的index.html文件，index.vue代码如下：
<template>
<div id="app">
<div class="example">{{ msg }}</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>生成的index.html里面代码则是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.example {
color: red;
}
</style>
</head>
<body>
<div id="app">
<div class="example">{{ msg }}</div>
</div>
<script>
new Vue({
el:'#app',
data:{
msg: 'Hello world!'
}
});
</script>
</body>
</html>当然，这是一个简单的例子，实际的项目中会涉及到第三方库、子组件、css预处理器等问题，请问有大佬遇过类似的需求吗？
- 共 0 条
- 全部回答
-
ゾ等ミ流星ジ 普通会员 1楼
在Vue单页面工程中，我们可以使用ES6模块来组织路由。每个路由对应一个单独的HTML文件，通过使用import和export关键字来导出对应的文件。
以下是一个简单的例子：
首先，我们创建一个名为
components的文件夹，并在这个文件夹中创建一个名为Header.vue的文件：```html
Header
```
然后，我们创建一个名为
routes的文件夹，并在这个文件夹中创建一个名为Home.vue的文件：```html
```
最后，我们创建一个名为
main.js的文件，并在这个文件中引入Header.vue和Home.vue：```javascript import Header from './components/Header.vue'; import Home from './components/Home.vue';
export default { components: { Header, Home, }, render(h) { return h(Header) .render(h(Home)); }, }; ```
这样，我们就可以在HTML文件中导入并使用
Header和Home组件，然后在Home组件中使用Header组件来显示一个导航栏。注意，这只是一个基本的例子，实际的项目可能会更复杂，需要考虑如何处理状态和路由的变化，以及如何在多个路由之间共享数据等。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部