这篇文章主要介绍“Vue怎么创建应用入口”，在日常操作中，相信很多人在Vue怎么创建应用入口问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue怎么创建应用入口”的疑惑有所帮助！接下来，请跟着小编一起来学习吧
这篇文章主要介绍“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 函数，那么应用就不会被创建，用户也就无法操作。
但这样会导致页面处于空白状态，为了友好，可以加一些加载动画效果.
打开 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.jsmodule.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.jsimport 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怎么创建应用入口”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
--结束END--
本文标题: Vue怎么创建应用入口
本文链接: https://lsjlt.com/news/307313.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0