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

Usually a front-end project will only export a front-end single-page application, and main.js is the entry file for this application.

Create an

By default, SRC /main.js directly initializes a Vue application

import Vue from 'vue'

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

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

But in a background class project, the application must be logged in before it can be operated by the user, which leads to a lot of times, we will set a function.

import Vue from 'vue'

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

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

As long as the Render function is not called, the application will not be created and the user will not be able to operate it.

Adding Loading effects

This will leave the page blank, so add some loading animations to be friendly.

Open the public/index.html file and place your Loading effects in div#app.

<body>
  <div id="app">
    <! -- Here write your Loading animation -->
  </div>
</body>
Copy the code

When we create the app, Vue automatically empties the contents of div#app, so there is no need to clean up the relationship after initialization.

Start creating an application.

When Loading animation is enabled, we can perform operations such as authorization and menu retrieval.

import Vue from 'vue'

import App from './App.vue'
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 no, jump to login page
  // Get menu data
}

main().then(render)

Copy the code

Once the data is ready and the application is displayed, you don’t have the problem of apps flashing by.

Multi-page transformation

Normally, a front-end project only has one front-end application, which is the familiar SPA mode. However, sometimes it is necessary to export multiple HTML files, and each HTML file corresponds to a Vue instance. This development mode is also called MPA mode.

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

The default Vue CLI application type is SPA single-page application, but the Pages field is provided in the Vue CLI.

// vue.config.js

module.exports = {
  / / https://cli.vuejs.org/zh/config/#pages
  pages: {
    index: {
      title: 'home'.entry: 'src/main.js',},login: {
      title: 'Login page'.entry: 'src/login.js',}}}Copy the code

Add the application entry and application view file for the login page

├ ─ ─ SRC / │ ├ ─ ─ views / + │ │ └ ─ ─ the login / + │ │ └ ─ ─ the login. The vue# Application view+ │ ├ ─ ─ the login. Js# App entry│ ├─ ├─ ├─ ├─ ├─ ├─ download.jsonCopy the code

Creating a View file

<template>
  <! -- src/login/Login.vue -->
  <div> This is login page</div>
</template>
Copy the code

Creating an Application Portal

// /src/login.js

import Vue from 'vue'

import Login from './views/login/Login.vue'


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

Restart your app

# started, in the current project project address followed by the login. The HTML can see the new page $open http://localhost:8080/login.htmlCopy the code

series

  • Application entry Modification
  • Menu and Routing
  • Local Proxy scheme
  • Local Mock scheme