[[418140]]

前言

圖片示例：

介紹

有時(shí)候我總有疑問，vue一定要在node和vuecli環(huán)境下才能開發(fā)項(xiàng)目?vue只有在node+vuecli中才能如此便利?為了回答這些問題，我們開發(fā)一個(gè)vue在非node.js和vuecli環(huán)境下開發(fā)項(xiàng)目同樣便利的項(xiàng)目框架。

Node.js是JavaScript庫的一個(gè)管理應(yīng)用，我們通過使用node.js實(shí)現(xiàn)JavaScript庫的一個(gè)快速管理，通過vuecli框架我們可以將項(xiàng)目進(jìn)行更便捷的開發(fā)和打包。但是node.js+vuecli的模式也給我們帶來了一些麻煩。

所以我們搭建了一個(gè)擺脫node.js+vuecli的開發(fā)框架，并命名為UnitUI(以下簡稱unit)，unit的出現(xiàn)對于我們來說是非常有利的。

隨著Apache和Nginx的完善，現(xiàn)在已經(jīng)基本可以保障我們后端文件的一個(gè)安全，其次再搭配上動態(tài)路由，從而我們只需要通過動態(tài)路由和動態(tài)菜單的管理組件，對vue組件進(jìn)行掛載，對于我們的安全性來說是非常有用的?；颈Ｕ狭宋覀兙W(wǎng)站的安全。

優(yōu)點(diǎn)

一是有利于我們組建那個(gè)開發(fā)。我們可以通過與后端搭配實(shí)現(xiàn)vue文件上傳的方式，實(shí)現(xiàn)一個(gè)功能組件的添加，或者通過刪除vue文件實(shí)現(xiàn)一個(gè)功能的去除，這樣對我們來說還是非常直觀的。

二是有利于我們快速開發(fā)vue項(xiàng)目。Unit支持非node.js和vuecli環(huán)境下進(jìn)行開發(fā)，這樣子就意味著我們這個(gè)項(xiàng)目在一臺新的電腦上，即使沒有node.js和vuecli開發(fā)環(huán)境，我們也可以直接通過vscode編輯器+Live Server插件啟動我們的開發(fā)項(xiàng)目?；蛘叽钶d模擬服務(wù)器直接練習(xí)我們的項(xiàng)目，實(shí)現(xiàn)一個(gè)快速的開發(fā)，減少開發(fā)前期投入。

三是利于我們減少項(xiàng)目體積。Unit支持在index.html文件上直接通過cdn加載一些我們常用的JavaScript庫和css文件?？梢杂欣跍p少我們項(xiàng)目的一個(gè)體積，提高網(wǎng)站的訪問速度。

四是實(shí)現(xiàn)快速部署。Unit不需要編譯，我們甚至可以以分工的形式讓每個(gè)人負(fù)責(zé)不同的部分，并通過內(nèi)置的“組件管理”功能對項(xiàng)目進(jìn)行掛載。

前期準(zhǔn)備

一、搭建開發(fā)目錄。

在項(xiàng)目目錄創(chuàng)建一個(gè)index.html。創(chuàng)建創(chuàng)建一個(gè)文件夾命名為unitui，然后在該文件夾下面新建ui(放置左側(cè)菜單，頂部菜單和底部菜單等)、pages(放置一些登錄，注冊，忘記密碼這些我們無需權(quán)限便可訪問的頁面)、sub(一些內(nèi)置組件)三個(gè)文件夾。

二、在項(xiàng)目目錄下新建main.js用于加載js庫

示例：

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

3、在項(xiàng)目目錄下新建init.js用于初始化項(xiàng)目(在body下引用)

用于動態(tài)路由防刷新丟失和注冊ui組件

必備js庫和簡介

我們想要實(shí)現(xiàn)在非node和vuecli環(huán)境下開發(fā)項(xiàng)目，最大的難點(diǎn)就是怎樣去加載一個(gè)vue組件。隨著vue的發(fā)展相關(guān)JavaScript庫的出現(xiàn)，我們可以通過集成一些JavaScript庫，實(shí)現(xiàn)vue功能組件的加載。

常用JavaScript庫介紹

1.http-vue-loader

它是一個(gè)用于在非node環(huán)境下加載本地vue文件的一個(gè)JavaScript庫，通過它我們可以在非node+vuecli環(huán)境下加載vue文件。

2、vue-router

主要是為了實(shí)現(xiàn)我們的項(xiàng)目之間的跳轉(zhuǎn)，可以實(shí)現(xiàn)和vuecli開發(fā)項(xiàng)目中路由完全一樣的效果有利于我們快速開發(fā)。

3.element-ui

用于構(gòu)建視圖框架

加載組件示例

components: { 
 
Subadmintable: httpVueLoader("./sub/SubAdminTable.vue"),//組件掛載管理 
 
Menuadmin: httpVueLoader("./sub/MenuAdmin.vue"),//菜單生成、管理與匹配 
 
}, 

vue-router路由使用

1.在unitui文件夾下新建router.js

2.在main.js文件中添加

3.在router.js文件中寫入一些靜態(tài)路由

動態(tài)路由的實(shí)現(xiàn)

動態(tài)路由的原理是通過循環(huán)addRoute往里面添加路由信息實(shí)現(xiàn)(不理解請看我的視頻原理一致)。通過后端返回的json信息，進(jìn)行數(shù)據(jù)循環(huán)添加進(jìn)而實(shí)現(xiàn)動態(tài)路由。我們在生成動態(tài)路由的時(shí)候我們需要使用如下形式進(jìn)行注冊。

動態(tài)菜單的實(shí)現(xiàn)

我們通過后端返回的菜單json數(shù)據(jù)，真循環(huán)生成左側(cè)菜單信息，然后通過對菜單json信息的修改實(shí)現(xiàn)動態(tài)菜單。這一節(jié)非常簡單，大家可以不懂的話可以看我的視頻。

路由和菜單間相互綁定

路由和菜單之間的相互綁定，這是一個(gè)非常復(fù)雜的組件功能。這個(gè)組件我已經(jīng)內(nèi)置到了整個(gè)的一個(gè)項(xiàng)目當(dāng)中，包括cuecli項(xiàng)目和unit項(xiàng)目，我們都內(nèi)置了一個(gè)動態(tài)管理組件，通過這個(gè)組件你可以實(shí)現(xiàn)可視化組件管理，實(shí)現(xiàn)菜單信息和路由之間的一個(gè)綁定。