Vue-cli multi-page application practice to achieve component preview

vue-cli multi-page application

Most of the students in the vue technology stack use vue-cli to build single-page applications. Such as background management system, H5 activities, etc.;

Vue-cli multi-page application development may have browsed this knowledge when you were a beginner, but it is rarely used in actual development;

In fact, multi-page is very practical, it can be used to realize the function preview of the component library, the page preview of the H5 visualization system, the function introduction of the personal site, etc.;

You can skip directly to the repository source code at the end of the article, or you can follow this article to build a vue-cli multi-page application step by step

For example, the following websites can be implemented with multi-page applications:

Liked by: Vant

Are you hungry: Mint-UI

JD.com: Nutui

Implement the component preview project

The functions implemented in this case:
1. On the left menu bar, after clicking the menu, the page in the center area and the mobile interface will be switched;
2. Middle page area: is our component introduction, used to write component parameters, descriptions, etc.;
3. The right mobile page: an iframe page used to preview the specific functions of the component;

In fact, the mobile page on the right can also be implemented using dynamic components , so why use multi-page application development?
Mainly due to the following considerations:

• Components may involve functions such as life cycle. Using iframe pages can simulate component calls more realistically;
• Using the iframe page can avoid the influence of the global style and variables of the main interface on the preview page;
• Using multi-page applications, the code of the main interface and the preview interface can be separated, making them two relatively independent projects, which are easy to maintain;

Multi-page application configuration

After building the project with vue-cli, configure multiple pages in the vue.config.js file (if there is no such file, create a new one manually), refer to the official website case vue-cli multi-page configuration

Project directory for multi-page projects (core file description)

 ├── public                # html
    ├── index.html        # 主应用
    ├── view.html         # 子应用
├── src                   # 主应用
    ├── layout            # 页面布局
    ├── router            # 路由
    ├── view              # 页面
    ├── App.vue           # 视图入口
    ├── main.js           # 项目入口
├── srcview               # 子应用
    ├── router            # 路由
    ├── view              # 页面
    ├── App.vue           # 视图入口
    ├── main.js           # 项目入口

vue.config.js configuration

   pages: {
    index: {
      entry: './src/main.js',
      template: './public/index.html',
      filename: 'index.html',
      title: "主应用",
    },
    view1: {
      entry: './srcview/main.js',
      template: './public/view.html',
      filename: 'view.html',
      title: "子应用",
    },
  }

Page Layout

• Left menu bar: recursively generated according to the main application route;
• Middle area: the sub-page of the main application, which is switched according to the route;
• Left area: mobile phone preview page, implemented using iframe;

Directory Structure

 ├── layout                
    ├── menu              # 菜单
    ├── index.vue         # 主体
    ├── look.vue          # 手机页

left menu bar

The menu of this project uses component recursion. For detailed cases, please refer to the previous article [Business Example] Vue component recursion and its application . There are two points to note in menu development:

1. @src/layout/menu: index.vue

Use v-bind= "$attrs" to pass the props attribute of the intergenerational component;

Use v-on= "$listeners" for event delivery of intergenerational components;

In component development, code writing can be reduced, and this writing skill is very practical (take notes, this is the focus of the final exam)

  <!-- 核心代码 -->
<el-menu class="p-el-menu">
      <p-el-menu v-bind="$attrs" v-on="$listeners" />
</el-menu>

2. @src/layout/menu: p-el-menu.vue

The menu is generated recursively using components, so for multi-layer code, we need to pass events through v-on= "$listeners" , otherwise the click event of the menu cannot be obtained correctly

  <!-- 核心代码 -->
 <p-el-menu :menuList="menu.children" v-on="$listeners" />

middle area

The middle area is a more conventional routing nested <router-view> setting, directly on the code

@src/layout/menu:index.vue

 <el-main>
    <transition name="fade-transform" mode="out-in">
        <!-- 核心代码 -->
        <router-view></router-view>
    </transition>
</el-main>

Right mobile page

@src/layout/menu: look.vue

The mobile interface is implemented with iframe. After clicking the menu, you will get the latest currentUrl, and then splicing /view#/ (because the page with this path is configured in vue.config.js), you can open the page of the sub-application

 <!-- 核心代码 -->
<iframe :src="src" frameborder="0" class="view-iframe"></iframe>

<!-- 计算属性-->
computed: {
    src() {
      let url = `${location.origin}/view#/${this.currentUrl}`;
      return url;
    },
},

Feature extension suggestion

This project separates the main interface and the mobile interface for easy maintenance. You can try secondary transformation, for example:

• The routing of the sub-application can be dynamically registered by monitoring the file, and the file mapping routing can be realized, so there is no need to configure the routing table tediously;
• For the routing of the main application and sub-applications, you can distinguish the routing address, or dynamically display the mobile page
• Project packaging can be divided into directories and deployed separately

More function realization, exchange in the comment area

Warehouse source code

vue-multi-page