文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue非Node和Vuecli环境开发网站项目-支持动态路由

2024-12-02 23:45

关注




介绍

有时候我总有疑问,vue一定要在node和vuecli环境下才能开发项目?vue只有在node+vuecli中才能如此便利?为了回答这些问题,我们开发一个vue在非node.js和vuecli环境下开发项目同样便利的项目框架。

Node.js是JavaScript库的一个管理应用,我们通过使用node.js实现JavaScript库的一个快速管理,通过vuecli框架我们可以将项目进行更便捷的开发和打包。但是node.js+vuecli的模式也给我们带来了一些麻烦。

所以我们搭建了一个摆脱node.js+vuecli的开发框架,并命名为UnitUI(以下简称unit),unit的出现对于我们来说是非常有利的。

随着Apache和Nginx的完善,现在已经基本可以保障我们后端文件的一个安全,其次再搭配上动态路由,从而我们只需要通过动态路由和动态菜单的管理组件,对vue组件进行挂载,对于我们的安全性来说是非常有用的。基本保障了我们网站的安全。

优点

一是有利于我们组建那个开发。我们可以通过与后端搭配实现vue文件上传的方式,实现一个功能组件的添加,或者通过删除vue文件实现一个功能的去除,这样对我们来说还是非常直观的。

二是有利于我们快速开发vue项目。Unit支持非node.js和vuecli环境下进行开发,这样子就意味着我们这个项目在一台新的电脑上,即使没有node.js和vuecli开发环境,我们也可以直接通过vscode编辑器+Live Server插件启动我们的开发项目。或者搭载模拟服务器直接练习我们的项目,实现一个快速的开发,减少开发前期投入。

三是利于我们减少项目体积。Unit支持在index.html文件上直接通过cdn加载一些我们常用的JavaScript库和css文件。可以有利于减少我们项目的一个体积,提高网站的访问速度。

四是实现快速部署。Unit不需要编译,我们甚至可以以分工的形式让每个人负责不同的部分,并通过内置的“组件管理”功能对项目进行挂载。

前期准备

一、搭建开发目录

在项目目录创建一个index.html。创建创建一个文件夹命名为unitui,然后在该文件夹下面新建ui(放置左侧菜单,顶部菜单和底部菜单等)、pages(放置一些登录,注册,忘记密码这些我们无需权限便可访问的页面)、sub(一些内置组件)三个文件夹。


二、在项目目录下新建main.js用于加载js库

示例:


然后在index.html中引入main.js(和在index.html中引入效果一样)。

3、在项目目录下新建init.js用于初始化项目(在body下引用)


用于动态路由防刷新丢失和注册ui组件

必备js库和简介

我们想要实现在非node和vuecli环境下开发项目,最大的难点就是怎样去加载一个vue组件。随着vue的发展相关JavaScript库的出现,我们可以通过集成一些JavaScript库,实现vue功能组件的加载。

常用JavaScript库介绍

http-vue-loader

它是一个用于在非node环境下加载本地vue文件的一个JavaScript库,通过它我们可以在非node+vuecli环境下加载vue文件。

vue-router

主要是为了实现我们的项目之间的跳转,可以实现和vuecli开发项目中路由完全一样的效果有利于我们快速开发。

element-ui

用于构建视图框架

加载组件示例

  1. components: { 
  2.  
  3. Subadmintable: httpVueLoader("./sub/SubAdminTable.vue"),//组件挂载管理 
  4.  
  5. Menuadmin: httpVueLoader("./sub/MenuAdmin.vue"),//菜单生成、管理与匹配 
  6.  
  7. }, 

vue-router路由使用

在unitui文件夹下新建router.js

在main.js文件中添加


在router.js文件中写入一些静态路由


动态路由的实现

动态路由的原理是通过循环addRoute往里面添加路由信息实现(不理解请看我的视频原理一致)。通过后端返回的json信息,进行数据循环添加进而实现动态路由。我们在生成动态路由的时候我们需要使用如下形式进行注册。


动态菜单的实现

我们通过后端返回的菜单json数据,真循环生成左侧菜单信息,然后通过对菜单json信息的修改实现动态菜单。这一节非常简单,大家可以不懂的话可以看我的视频。

路由和菜单间相互绑定

路由和菜单之间的相互绑定,这是一个非常复杂的组件功能。这个组件我已经内置到了整个的一个项目当中,包括cuecli项目和unit项目,我们都内置了一个动态管理组件,通过这个组件你可以实现可视化组件管理,实现菜单信息和路由之间的一个绑定。

 

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯