Vue.js初学备忘录（四）多页面开发

最新推荐文章于 2024-05-27 21:03:40 发布

星旅zl

最新推荐文章于 2024-05-27 21:03:40 发布

阅读量248

点赞数

分类专栏： JS相关

本文链接：https://blog.csdn.net/nzzl54/article/details/87699009

版权

JS相关专栏收录该内容

18 篇文章 0 订阅

订阅专栏

关于new Vue() 和 export default {}的区别：

https://blog.csdn.net/qq_37887764/article/details/81034516

多页面开发参考文章：

https://jingyan.baidu.com/album/67662997998a9654d51b8487.html?picindex=1

本文作为记录文章，大部分参考自上面的“多页面开发”连接，效果图如下：

一、按下图创建文件夹

二、参考百度的经验进行相关配置步骤2-5，这里不再赘述

三、配置好了之后写相关js、HTML、vue文件，按上图文件顺序写

1、/one/components/OneFine.vue：这个vue是用来测试引用组件的，不要问为什么放在one下，有兴趣自己研究

<template>
  <div class="onefine">
    <h1>{{ msg }}</h1>
    <h2>{{p1}}</h2>
  </div>
</template>

<script>
export default {
  name: 'onefine1',
  data () {
    return {
      msg: 'This is a component name oneFine',
      p1: 'onefine!!!！'
    }
  }
}
</script>

<style>
</style>

2、one.html：引用我们的one组件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>这是One页面</title>
  </head>
  <body>
    <div id="one"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3、one.js

import Vue from 'vue'
import Router from 'vue-router'
import One from './one.vue'
import OneFine from './components/OneFine.vue'

Vue.config.productionTip = false

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/onefine',
      name: 'OneFine',
      component: OneFine,
      meta: {
        title: '测试页面'
      }
    }
  ]
})

/* eslint-disable no-new */
new Vue({
  el: '#one',
  render: h => h(One)
})

4、one.vue

<template>
<div id="one">
    多页面开发之 页面一
    <OneFine></OneFine>
</div>
</template>
<script>
import OneFine from './components/OneFine.vue'
export default {
  name: 'One',
  components: {
    OneFine
  }
}
</script>
<style >

</style>

5、App.vue中给个链接进入one.html

<a href="one.html">one</a>

星旅zl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js初学备忘录（四）多页面开发

关于new Vue() 和 export default {}的区别：https://blog.csdn.net/qq_37887764/article/details/81034516多页面开发参考文章：https://jingyan.baidu.com/album/67662997998a9654d51b8487.html?picindex=1本文作为记录文章，大部分参考自上面...
复制链接

扫一扫

专栏目录