前言图片示例：简介有时候我总是有疑问，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编辑器+LiveServer插件启动我们的开发项目。或者直接用模拟服务器实践我们的项目，实现快速开发，减少前期开发投入。第三是帮助我们缩小项目规模。Unit支持在index.html文件上直接通过CDN加载一些我们常用的JavaScript库和css文件。可以帮助我们减小项目的体积，提高网站的访问速度。四是实现快速部署。单元不需要编制，我们甚至可以通过分工的形式让每个人负责不同的部分，通过内置的“组件管理”功能挂载项目。前期准备1.建立开发目录。在项目目录中创建一个index.html。新建新建文件夹unitui，然后在文件夹下新建ui（放置左侧菜单，顶部菜单，底部菜单等），pages（放置一些登录，注册，忘记密码等我们不用访问的页面）permission),sub(一些内置组件)三个文件夹。2、在工程目录下新建main.js加载js库示例：然后在index.html中导入main.js（效果与在index.html中导入是一样的）。3、在项目目录下新建init.js，用于初始化项目（在body下引用）进行动态路由防止刷新丢失和注册UI组件。必备的js库及介绍我们要在非node和vuecli环境下开发项目，最大的难点就是如何加载一个vue组件。随着Vue开发相关的JavaScript库的出现，我们可以通过集成一些JavaScript库来实现Vue功能组件的加载。常用JavaScript库介绍1.http-vue-loader是一个用于在非node环境下加载本地vue文件的JavaScript库，通过它我们可以在非node+vuecli环境下加载vue文件。2.vue-router的主要目的是实现我们项目之间的跳转。可以达到和vuecli开发项目中的路由一模一样的效果，有利于我们的快速开发。3.element-ui用于构建视图框架加载组件示例组件：{Subadmintable:httpVueLoader("./sub/SubAdminTable.vue"),//组件挂载管理Menuadmin:httpVueLoader("./sub/MenuAdmin.vue"),//菜单生成、管理和匹配}、vue-router路由使用1.在unitui文件夹下新建router.js2.在main.js文件中添加3.在router中写一些静态路由动态。js文件路由的实现动态路由的原理是通过循环addRoute向其中添加路由信息（不懂的请看我的视频，原理一样）。通过后端返回的json信息，循环添加数据，实现动态路由。当我们生成动态路由时，需要使用下面的形式进行注册。动态菜单的实现我们利用后台返回的菜单json数据，真正循环生成左侧菜单信息，然后通过修改菜单json信息实现动态菜单。这一段很简单，不懂的可以看我的视频。路由与菜单的绑定路由与菜单的相互绑定是一个非常复杂的组件功能。我把这个组件构建成了一个完整的项目，包括cuecli项目和unit项目。我们构建了一个动态管理组件。通过该组件，可以实现可视化的组件管理，实现菜单信息与路由的绑定。
