Vue非Node和Vuecli環境開發網站項目-支持動態路由
前言
圖片示例：
介紹
有時候我總有疑問，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組件進行掛載，對于我們的安全性來說是非常有用的?；颈Ｕ狭宋覀兙W站的安全。
優點
一是有利于我們組建那個開發。我們可以通過與后端搭配實現vue文件上傳的方式，實現一個功能組件的添加，或者通過刪除vue文件實現一個功能的去除，這樣對我們來說還是非常直觀的。
二是有利于我們快速開發vue項目。Unit支持非node.js和vuecli環境下進行開發，這樣子就意味著我們這個項目在一臺新的電腦上，即使沒有node.js和vuecli開發環境，我們也可以直接通過vscode編輯器+Live Server插件啟動我們的開發項目?；蛘叽钶d模擬服務器直接練習我們的項目，實現一個快速的開發，減少開發前期投入。
三是利于我們減少項目體積。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庫介紹
1.http-vue-loader
它是一個用于在非node環境下加載本地vue文件的一個JavaScript庫，通過它我們可以在非node+vuecli環境下加載vue文件。
2、vue-router
主要是為了實現我們的項目之間的跳轉，可以實現和vuecli開發項目中路由完全一樣的效果有利于我們快速開發。
3.element-ui
用于構建視圖框架
加載組件示例
- components: {
- Subadmintable: httpVueLoader("./sub/SubAdminTable.vue"),//組件掛載管理
- Menuadmin: httpVueLoader("./sub/MenuAdmin.vue"),//菜單生成、管理與匹配
- },
vue-router路由使用
1.在unitui文件夾下新建router.js
2.在main.js文件中添加
3.在router.js文件中寫入一些靜態路由
動態路由的實現
動態路由的原理是通過循環addRoute往里面添加路由信息實現(不理解請看我的視頻原理一致)。通過后端返回的json信息，進行數據循環添加進而實現動態路由。我們在生成動態路由的時候我們需要使用如下形式進行注冊。
動態菜單的實現
我們通過后端返回的菜單json數據，真循環生成左側菜單信息，然后通過對菜單json信息的修改實現動態菜單。這一節非常簡單，大家可以不懂的話可以看我的視頻。
路由和菜單間相互綁定
路由和菜單之間的相互綁定，這是一個非常復雜的組件功能。這個組件我已經內置到了整個的一個項目當中，包括cuecli項目和unit項目，我們都內置了一個動態管理組件，通過這個組件你可以實現可視化組件管理，實現菜單信息和路由之間的一個綁定。
