Vue怎么创建应用入口

发布时间:2022-01-18 09:07:33 作者:iii
来源:亿速云 阅读:154

这篇文章主要介绍“Vue怎么创建应用入口”,在日常操作中,相信很多人在Vue怎么创建应用入口问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue怎么创建应用入口”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创建应用

默认情况下 src/main.js 是直接初始化一个 Vue 应用

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

但在后台类项目中,应用在被用户可操作前,一定是需要登录的,这就导致很多时候,我们会套一个函数。

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

这样只要不调用 render 函数,那么应用就不会被创建,用户也就无法操作。

添加 Loading 效果

但这样会导致页面处于空白状态,为了友好,可以加一些加载动画效果.

打开 public/index.html 文件,将你的 Loading 效果放在 div#app 中。

<body>
  <div id="app">
    <!-- 这里写你的 Loading 动画 -->
  </div>
</body>

当我们创建应用,Vue 会自动清空 div#app 里面的内容,所以不需要关系初始化后的清理工作。

开始创建应用

当有了 Loading 动画之后,我们就可以去获取,如 授权认证 和 菜单获取 等操作。

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() {
  // 获取用户信息,没有就跳转到登录页
  // 获取菜单数据
}

main().then(render)

一旦数据准备完毕,应用就显示了,就不会出现应用一闪而过的问题了。

多页面改造

正常而言,一个 前端工程 只会存在一个 前端应用,也就是比较熟悉的 SPA 模式,但有时候也需要导出多个 html 文件,每一个 html 文件都对应一个 Vue 实例,这种开发模式也被称为 MPA 模式。

但不管是 SPA 还是 MPA,对于工程而言,源码都是放在一起的,所以配置都是一样的。

Vue CLI 默认的应用类型是 SPA 单页应用,但在提供了 pages 字段。

// vue.config.js

module.exports = {
  // 详见 https://cli.vuejs.org/zh/config/#pages
  pages: {
    index: {
      title: '首页',
      entry: 'src/main.js',
    },
    login: {
      title: '登录页',
      entry: 'src/login.js',
    },
  }
}

添加 登录页 的 应用入口 和 应用视图 文件

 ├── src/
 │ ├── views/
+│ │   └── login/
+│ │       └── Login.vue  # 应用视图
+│ ├── login.js           # 应用入口  
 │ └── main.js
 ├── vue.config.js 
 └── package.json

创建视图文件

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

创建应用入口

// /src/login.js

import Vue from 'vue'

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


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

重启你的应用

# 启动之后,在当前项目项目地址后面加上 login.html 就可以看到新增的页面了
$ open http://localhost:8080/login.html

到此,关于“Vue怎么创建应用入口”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. Django应用程序入口WSGIHandler源码解析
  2. react 应用多入口配置及实践总结

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:ajax能做什么

下一篇:Springboot中分离出common父依赖的项目搭建是怎样的

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》