vue开发手册,vue 应用
本文主要介绍Vue开发实践指南应用门户的相关信息。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
目录
前言创建应用程序添加加载效果开始创建应用程序多页转换摘要
前言
Vue开发实践是我最好的实践，不是业内最好的，仅供大家参考。这是一个系列文章，但是发布时间和内容不固定。
通常一个前端工程只会导出一个前端单页应用，main.js是这个应用的入口文件。
创建应用
默认情况下，src/main.js直接初始化Vue应用程序。
从“vue”导入Vue
从导入应用程序。/App.vue
从导入路由器。/路由器
从导入存储。/商店
新Vue({
店，
路由器，
render: h=h(App)
}).$ mount(“# app”)
但是在后台项目中，应用必须登录后才能被用户操作，这就导致很多时候，我们会设置一个函数。
从“vue”导入Vue
从导入应用程序。/App.vue
从导入路由器。/路由器
从导入存储。/商店
函数render() {
新Vue({
店，
路由器，
render: h=h(App)
}).$ mount(“# app”)
}
只要render函数没有被调用，应用程序就不会被创建，用户也不能操作它。
添加 Loading 效果
但是，这将导致页面空白。为了友好，你可以添加一些加载动画效果。
打开public/index.html文件，把你的加载效果放到div#app里。
身体
div id=应用程序
！-在这里写下你的加载动画-
/div
/body
当我们创建一个应用时，Vue会自动清空div#app的内容，所以初始化后不需要清理关系。
开始创建应用
当加载动画有了，我们就可以得到了，比如授权，认证，菜单获取。
从“vue”导入Vue
从导入应用程序。/App.vue
从导入路由器。/路由器
从导入存储。/商店
函数render() {
新Vue({
店，
路由器，
render: h=h(App)
}).$ mount(“# app”)
}
异步函数main() {
//获取用户信息，如果没有，跳转到登录页面。
//获取菜单数据
}
main()。然后(渲染)
一旦数据准备好了，应用就会显示出来，不会出现应用一闪而过的问题。
多页面改造
正常情况下，一个前端项目只有一个前端应用，也就是大家熟悉的SPA模式，但有时需要导出多个html文件，每个文件对应一个Vue实例。这种开发模式也叫MPA模式。
但是不管是SPA还是MPA，对于项目来说，都是把源代码放在一起，所以配置是一样的。
Vucli的默认应用程序类型是SPA单页应用程序，但页面字段在中提供。
//vue.config.js
模块.导出={
//详情见https://cli.vuejs.org/zh/config/#pages。
页数：{
索引：{
标题：“主页”，
条目：“src/main.js”，
},
登录：{
标题：“登录页面”，
条目：“src/login.js”，
},
}
}
添加登录页面的应用门户和应用视图文件。
src/
观点/
登录/
Login.vue #应用查看
login.js #应用门户
main.js
包. json
创建视图文件
模板
！- src/login/Login.vue -
这是登录页面/div
/模板
创建应用程序门户
///src/login.js
从“vue”导入Vue
从导入登录。/views/login/Login.vue
新Vue({
render: h=h(登录)
}).$ mount(“# app”)
重新启动您的应用程序。
#启动后，将login.html添加到当前项目的地址，以查看新页面。
$ open http://localhost:8080/log in . html
总结
这就是这篇关于Vue开发实践指南的应用门户的文章。有关Vue应用门户的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。