为什么使用多页面开发

vue是单页面应用,对多页面的页面间的相互跳转间没有过渡效果,难以维护;当一个应用越来越大的时候单页面模式应付不来,这时候就需要使用多页面应用了。

多页和单页应用模式的对比

在这里插入图片描述

转载于:https://www.cnblogs.com/xiyangcai/p/8609773.html

如果使用 vue-cli3 构建多页面应用的话,看这个:https://www.cnblogs.com/zhaoxiaoying/p/10647545.html

vue在工程化开发的时候依赖于webpack,而webpack是将所有的资源整合到一块后形成一个html文件一堆js文件,如果将vue实现多页面应用,就需要对他的依赖进行重新配置,也就是修改webpack的配置文件

vue开发有两种,一种是直接在script标签里引入vue.js文件即可,这样子引入的话个人感觉做小型的多页面会比较舒坦,一旦做大型一点的项目,还是离不开webpack。所以另一种方法也就是基于webpack和vue-cli的工程化开发。下面详解步骤:

vue多页面开发步骤

第一步:

进入 \build\webpack.base.conf.js 目录下,在module.exports的域里,找到entry,在那里配置添加多个入口

// 文件路径更具自己的实际情况进行配置,我这仅是 demo
entry: {
    app: './src/main.js',
    one: './src/js/one.js',
    two: './src/js/two.js'
  },

在这里插入图片描述这里的 one two 一定时,要先在这里定义好,后面是要用到的,好比里面的app 不是随便瞎写的

第二步:

对开发环境 run dev 里进行修改,打开 \build\webpack.dev.conf.js文件,在 module.exports 那里找到 plugins,下面写法如下

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks: ['app']
    }), 
    new HtmlWebpackPlugin({
      filename: 'one.html',
      template: 'one.html',
      inject: true,
      chunks: ['one']
    }),
    new HtmlWebpackPlugin({
      filename: 'two.html',
      template: 'two.html',
      inject: true,
      chunks: ['two']
    }),

在这里插入图片描述这里的配置比较重要,如果没写好,在打包的时候就会报错了,在chunks那里的app指的是webpack.base.conf.jsentry 那里与之对应的变量名。chunks 的作用是每次编译、运行时每个入口都会对应一个 entry ,如果没写则引入所有页面的资源。

第三步:

run build 也就是编译环境进行配置。首先打开 \config\index.js 文件,在 build 里加入这个:

 index: path.resolve(__dirname, '../dist/index.html'),
one: path.resolve(__dirname, '../dist/one.html'),
two: path.resolve(__dirname, '../dist/two.html'),

在这里插入图片描述
这里也就是打包之后 dist 文件夹中形成的 html

第四步:

打开/build/webpack.prod.conf.js文件,在 plugins 那里找到 HTMLWebpackPlugin,然后添加如下代码:


new HtmlWebpackPlugin({
        filename: config.build.index,
        template: 'index.html',
        inject: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
            
        },
        chunksSortMode: 'dependency',
        //(在这里和你上面chunks里面的名称对应)
        chunks: ['manifest', 'vendor', 'app']
    }),
    new HtmlWebpackPlugin({
        filename: config.build.one,
        template: 'one.html',
        inject: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency',
        chunks: ['manifest', 'vendor', 'one']
    }),

在这里插入图片描述其中filename引用的是\config\index.js里的build,每个页面都要配置一个chunks,不然会加载所有页面的资源。

上面的操作完成之后进行下面的傻瓜式操作 对咱们创建的文件进行码代码
one.js文件可以这样写:

import Vue from 'vue'
import one from './one.vue'

Vue.config.productionTip = false

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


在这里插入图片描述one.vue写法如下:

<template>
  <div id="one">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'one',
  data () {
    return {
      msg: 'I am one'
    }
  }
}
</script>

tow 文件中的代码一样 我就不写了

第五步:

一定要在index.html的同级目录下创建one.html 与 two.html
在这里插入图片描述

第六步:

主要步骤写完,试试打包文件 输入 npm run build 打包文件
在这里插入图片描述

没有问题, 跑一下项目看看 npm run dev在这里插入图片描述在这里插入图片描述

转载于:https://www.jianshu.com/p/eceb2ac9df90

参考于:https://jingyan.baidu.com/article/67662997998a9654d51b8487.html

vue多页面配置以及实现路由跳转

第一步:

在src文件夹下新建一个view文件夹,用于存放多个页面
在这里插入图片描述

第二步:

在view文件夹下新建一个index文件夹,把public目录下的index.html,src目录下的main.js 、App.vue 统一挪到 index 文件夹下(记得修改相对应的路径)

在这里插入图片描述

第三步:

再新建一个文件夹是跳转的页面,例如我的是Dingtalk文件夹。再把上面的index下的三个文件复制过来在这里插入图片描述
,复制过来要把里面的内容全部清除,成为新的文件,然后再配置

第四步:

失去了默认的入口文件和页面,我们需要自己重新配置
在项目的根目录下新建vue.config.js文件,如下:
在这里插入图片描述

第五步:

在这个文件中,我们可以配置每个页面的入口文件,和输出路径
在这里插入图片描述##### 第六步:
现在,我们就可以在项目下通过标签实现页面跳转了
在这里插入图片描述注意,这里不必写成相对路径!

转载于:https://blog.csdn.net/qq_44699164/article/details/107744201

Logo

前往低代码交流专区

更多推荐