Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to create an application portal by Vue". In daily operation, I believe many people have doubts about how to create an application portal by Vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to create an application portal by Vue". Next, please follow the editor to study!

Create an application

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

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')

But in the background project, before the application can be operated by the user, it must be logged in, 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')}

So 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 lead to a blank page, to be friendly, you can add some loading animation effects.

Open the public/index.html file and put your Loading effect in div#app.

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

Start creating an application

When we have Loading animation, we can get it, such as authorization authentication and menu acquisition.

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, jump to login page / / get menu data} main (). Then (render)

Once the data is ready, the application will be displayed, and there will be no fleeting problems of the application.

Multi-page transformation

Normally, there is only one front-end application in a front-end project, that is, the familiar SPA pattern, but sometimes multiple html files need to be exported, each html file corresponds to a Vue instance, this development mode is also known as MPA pattern.

But for both SPA and MPA, the source code is put together for the project, so the configuration is the same.

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

/ / vue.config.jsmodule.exports = {/ / see https://cli.vuejs.org/zh/config/#pages pages: {index: {title: 'home page', entry: 'src/main.js',}, login: {title:' login page', entry: 'src/login.js',},}}

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

├── src/ │ ├── views/+ │ │ └── login/+ │ │ └── Login.vue # Application View + │ ├── login.js # Application Portal │ └── main.js ├── vue.config.js └── package.json

Create a view file

This is login page

Create an application portal

/ / src/login.jsimport Vue from 'vue'import Login from'. / views/login/Login.vue'new Vue ({render: h = > h (Login)}). $mount ('# app')

Restart your application

# after startup, add login.html to the current project address and you can see the new page $open http://localhost:8080/login.html. This is the end of the study on "how to create an application portal for Vue". I hope you can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.