SoFunction
Updated on 2025-04-05

Vue Development Practice Guide Application Portal

Preface

Vue development practice is my best practice, not the best in the industry, and is only used for reference. This is a series of articles, but the release time and content are not fixed.

Usually oneFront-end engineeringOnly one will be exportedFront-end single page application, and it is the entrance file of this application.

Create an application

By default src/ is to directly initialize a Vue application

import Vue from 'vue'

import App from './'
import router from './router'
import store from './store'

new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

However, in background projects, applications must be logged in before being operated by users, which leads to many times when we install a function.

import Vue from 'vue'

import App from './'
import router from './router'
import store from './store'

function render() {
  new Vue({
    store,
    router,
    render: h => h(App)
  }).$mount('#app')
}

In this way, as long as the render function is not called, the application will not be created and the user will not be able to operate.

Add Loading effect

But this will cause the page to be blank. For the sake of being friendly, you can add some loading animation effects.

Openpublic/File, put your Loading effect indiv#appmiddle.

<body>
  <div >
    <!-- Write yours here Loading Animation -->
  </div>
</body>

When we create an app, Vue will automatically cleardiv#appThe contents are included, so there is no need to clean up after relationship initialization.

Start creating an app

After the Loading animation is available, we can obtain it, such as authorization and authentication and menu acquisition.

import Vue from 'vue'

import App from './'
import router from './router'
import store from './store'

function render() {
  new Vue({
    store,
    router,
    render: h => h(App)
  }).$mount('#app')
}

async function main() {
  // Get user information, if not, jump to the login page  // Get menu data}

main().then(render)

Once the data is ready, the application will be displayed, and there will be no problem of the application flashing by.

Multi-page transformation

Normally, a front-end project will only have one front-end application, that is, the familiar SPA mode, but sometimes multiple html files are required to export, each html file corresponds to a Vue instance. This development model is also called the MPA mode.

But whether it is SPA or MPA, for projects, the source code is put together, so the configuration is the same.

The default application type of Vue CLI is the SPA single page application, but it is providedpagesField.

// 

 = {
  // See /zh/config/#pages for details  pages: {
    index: {
      title: 'front page',
      entry: 'src/',
    },
    login: {
      title: 'Login page',
      entry: 'src/',
    },
  }
}

Add the application portal and application view files for the login page

 ├── src/
 │ ├── views/
+│ │   └── login/
+│ │       └──   # Application View+│ ├──            # Application portal │ └── 
 ├──  
 └──

Create a view file

<template>
  <!-- src/login/ -->
  <div> This is login page</div>
</template>

Create an application portal

// /src/

import Vue from 'vue'

import Login from './views/login/'


new Vue({
  render: h => h(Login)
}).$mount('#app')

Restart your app

# After starting, add the new page after the current project address.$ open http://localhost:8080/

Summarize

This is the article about the application entrance of Vue Development Practice Guide. For more related Vue application entrance content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!