免费源码 vue非node和vuecli环境开发网站项目-支持动态路由
前言图片示例:
https://p3-sign.toutiaoimg.com/pgc-image/3ad157ed3ea343ed851b2063aa70da68~tplv-tt-large.image?x-expires=1970206282&x-signature=jnwaPLFOLc97op6g33Z%2BPRwF80k%3D
https://p3-sign.toutiaoimg.com/pgc-image/c712a5ba5544446098df1a212b112c05~tplv-tt-large.image?x-expires=1970206282&x-signature=2fKUcvmXHLz6WCIzW%2FtnxXlwwcc%3D
https://p3-sign.toutiaoimg.com/pgc-image/3d2537bf7f9843aab209c781a5091d00~tplv-tt-large.image?x-expires=1970206282&x-signature=aQxrOpNnYxzwP5uAcy5dCSDrnc0%3D
https://p3-sign.toutiaoimg.com/pgc-image/aa13c8d90bf64354bcb3046b7eb0d796~tplv-tt-large.image?x-expires=1970206282&x-signature=vtZ2z46Fa4VkgvTuix1%2B8Bapwts%3D
先容
有时候我总有疑问,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不需要编译,我们乃至可以以分工的形式让每个人负责不同的部门,并通过内置的“组件管理”功能对项目举行挂载。
前期准备
一、搭建开发目录。(可以在私信复兴“unitui”获取源码),在项目目录创建一个index.html。创建创建一个文件夹命名为unitui,然后在该文件夹下面新建ui(放置左侧菜单,顶部菜单和底部菜单等)、pages(放置一些登录,注册,忘记密码这些我们无需权限便可访问的页面)、sub(一些内置组件)三个文件夹。
https://p3-sign.toutiaoimg.com/pgc-image/a83538e983eb4511b5e648c9d6a66f92~tplv-tt-large.image?x-expires=1970206282&x-signature=M%2FKIh4qTyF0CvVgmzdzLHRPWIjU%3D
二、在项目目录下新建main.js用于加载js库
示例:
https://p3-sign.toutiaoimg.com/pgc-image/04668b9dc82f465e8791bb1053f0b96c~tplv-tt-large.image?x-expires=1970206282&x-signature=%2FMAapjkO%2BbiUrHw1ByNFsEVBzZw%3D
然后在index.html中引入main.js(和在index.html中引入结果一样)。
3、在项目目录下新建init.js用于初始化项目(在body下引用)
https://p3-sign.toutiaoimg.com/pgc-image/e9e6418034c74309bc222b7efd2b5486~tplv-tt-large.image?x-expires=1970206282&x-signature=vko08w3G6SbdxTD%2B5skSkB5etgw%3D
用于动态路由防刷新丢失和注册ui组件
必备js库和简介
我们想要实现在非node和vuecli环境下开发项目,最大的难点就是怎样去加载一个vue组件。随着vue的发展相关JavaScript库的出现,我们可以通过集成一些JavaScript库,实现vue功能组件的加载。
常用JavaScript库先容
[*]http-vue-loader
它是一个用于在非node环境下加载本地vue文件的一个JavaScript库,通过它我们可以在非node+vuecli环境下加载vue文件。
2、vue-router
主要是为了实现我们的项目之间的跳转,可以实现和vuecli开发项目中路由完全一样的结果有利于我们快速开发。
[*]element-ui
用于构建视图框架
加载组件示例
components: {
Subadmintable: httpVueLoader("./sub/SubAdminTable.vue"),//组件挂载管理
Menuadmin: httpVueLoader("./sub/MenuAdmin.vue"),//菜单天生、管理与匹配
},
vue-router路由使用
[*]在unitui文件夹下新建router.js
[*]在main.js文件中添加
https://p3-sign.toutiaoimg.com/pgc-image/483902f692654198a2ffe7bbd135f721~tplv-tt-large.image?x-expires=1970206282&x-signature=Vg8nxvfNvopBWRKEZcXClh3E0MA%3D
[*]在router.js文件中写入一些静态路由
https://p3-sign.toutiaoimg.com/pgc-image/67aa5263b1a44be188aacef55af9a6fa~tplv-tt-large.image?x-expires=1970206282&x-signature=gX8z0f8NqI3xaATA8FuhEuySQIk%3D
动态路由的实现
动态路由的原理是通过循环addRoute往里面添加路由信息实现(不明确请看我的视频原理一致)。通过后端返回的json信息,举行数据循环添加进而实现动态路由。我们在天生动态路由的时候我们需要使用如下形式举行注册。
https://p3-sign.toutiaoimg.com/pgc-image/b69c4361f61e49f48e603ea8e521046c~tplv-tt-large.image?x-expires=1970206282&x-signature=uAaASj2KuDA9RQXH%2BFugPF9XOE4%3D
动态菜单的实现
我们通过后端返回的菜单json数据,真循环天生左侧菜单信息,然后通过对菜单json信息的修改实现动态菜单。这一节非常简单,各人可以不懂的话可以看我的视频。
路由和菜单间相互绑定
路由和菜单之间的相互绑定,这是一个非常复杂的组件功能。这个组件我已经内置到了整个的一个项目当中,包括cuecli项目和unit项目,我们都内置了一个动态管理组件,通过这个组件你可以实现可视化组件管理,实现菜单信息和路由之间的一个绑定。
结语
非node和vuecli项目是一个非常复杂的项目,你带着源码阅读这篇文章可能会更容易明确,你可以背景私信“unitui”获取源码。
喜欢可以关注我。
页:
[1]