建站
咨詢
售后
建站咨詢
新聞中心
[[418140]]
前言
圖片示例：
介紹
有時(shí)候我總有疑問(wèn)，vue一定要在node和vuecli環(huán)境下才能開發(fā)項(xiàng)目?vue只有在node+vuecli中才能如此便利?為了回答這些問(wèn)題，我們開發(fā)一個(gè)vue在非node.js和vuecli環(huán)境下開發(fā)項(xiàng)目同樣便利的項(xiàng)目框架。
Node.js是JavaScript庫(kù)的一個(gè)管理應(yīng)用，我們通過(guò)使用node.js實(shí)現(xiàn)JavaScript庫(kù)的一個(gè)快速管理，通過(guò)vuecli框架我們可以將項(xiàng)目進(jìn)行更便捷的開發(fā)和打包。但是node.js+vuecli的模式也給我們帶來(lái)了一些麻煩。
所以我們搭建了一個(gè)擺脫node.js+vuecli的開發(fā)框架，并命名為UnitUI(以下簡(jiǎn)稱unit)，unit的出現(xiàn)對(duì)于我們來(lái)說(shuō)是非常有利的。
隨著Apache和Nginx的完善，現(xiàn)在已經(jīng)基本可以保障我們后端文件的一個(gè)安全，其次再搭配上動(dòng)態(tài)路由，從而我們只需要通過(guò)動(dòng)態(tài)路由和動(dòng)態(tài)菜單的管理組件，對(duì)vue組件進(jìn)行掛載，對(duì)于我們的安全性來(lái)說(shuō)是非常有用的?；颈Ｕ狭宋覀兙W(wǎng)站的安全。
優(yōu)點(diǎn)
一是有利于我們組建那個(gè)開發(fā)。我們可以通過(guò)與后端搭配實(shí)現(xiàn)vue文件上傳的方式，實(shí)現(xiàn)一個(gè)功能組件的添加，或者通過(guò)刪除vue文件實(shí)現(xiàn)一個(gè)功能的去除，這樣對(duì)我們來(lái)說(shuō)還是非常直觀的。
二是有利于我們快速開發(fā)vue項(xiàng)目。Unit支持非node.js和vuecli環(huán)境下進(jìn)行開發(fā)，這樣子就意味著我們這個(gè)項(xiàng)目在一臺(tái)新的電腦上，即使沒(méi)有node.js和vuecli開發(fā)環(huán)境，我們也可以直接通過(guò)vscode編輯器+Live Server插件啟動(dòng)我們的開發(fā)項(xiàng)目?；蛘叽钶d模擬服務(wù)器直接練習(xí)我們的項(xiàng)目，實(shí)現(xiàn)一個(gè)快速的開發(fā)，減少開發(fā)前期投入。
三是利于我們減少項(xiàng)目體積。Unit支持在index.html文件上直接通過(guò)cdn加載一些我們常用的JavaScript庫(kù)和css文件?？梢杂欣跍p少我們項(xiàng)目的一個(gè)體積，提高網(wǎng)站的訪問(wèn)速度。
四是實(shí)現(xiàn)快速部署。Unit不需要編譯，我們甚至可以以分工的形式讓每個(gè)人負(fù)責(zé)不同的部分，并通過(guò)內(nèi)置的“組件管理”功能對(duì)項(xiàng)目進(jìn)行掛載。
前期準(zhǔn)備
一、搭建開發(fā)目錄。
在項(xiàng)目目錄創(chuàng)建一個(gè)index.html。創(chuàng)建創(chuàng)建一個(gè)文件夾命名為unitui，然后在該文件夾下面新建ui(放置左側(cè)菜單，頂部菜單和底部菜單等)、pages(放置一些登錄，注冊(cè)，忘記密碼這些我們無(wú)需權(quán)限便可訪問(wèn)的頁(yè)面)、sub(一些內(nèi)置組件)三個(gè)文件夾。
二、在項(xiàng)目目錄下新建main.js用于加載js庫(kù)
示例：
然后在index.html中引入main.js(和在index.html中引入效果一樣)。
3、在項(xiàng)目目錄下新建init.js用于初始化項(xiàng)目(在body下引用)
用于動(dòng)態(tài)路由防刷新丟失和注冊(cè)u(píng)i組件
必備js庫(kù)和簡(jiǎn)介
我們想要實(shí)現(xiàn)在非node和vuecli環(huán)境下開發(fā)項(xiàng)目，最大的難點(diǎn)就是怎樣去加載一個(gè)vue組件。隨著vue的發(fā)展相關(guān)JavaScript庫(kù)的出現(xiàn)，我們可以通過(guò)集成一些JavaScript庫(kù)，實(shí)現(xiàn)vue功能組件的加載。
常用JavaScript庫(kù)介紹
1.http-vue-loader
它是一個(gè)用于在非node環(huán)境下加載本地vue文件的一個(gè)JavaScript庫(kù)，通過(guò)它我們可以在非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)路由
動(dòng)態(tài)路由的實(shí)現(xiàn)
動(dòng)態(tài)路由的原理是通過(guò)循環(huán)addRoute往里面添加路由信息實(shí)現(xiàn)(不理解請(qǐng)看我的視頻原理一致)。通過(guò)后端返回的json信息，進(jìn)行數(shù)據(jù)循環(huán)添加進(jìn)而實(shí)現(xiàn)動(dòng)態(tài)路由。我們?cè)谏蓜?dòng)態(tài)路由的時(shí)候我們需要使用如下形式進(jìn)行注冊(cè)。
動(dòng)態(tài)菜單的實(shí)現(xiàn)
我們通過(guò)后端返回的菜單json數(shù)據(jù)，真循環(huán)生成左側(cè)菜單信息，然后通過(guò)對(duì)菜單json信息的修改實(shí)現(xiàn)動(dòng)態(tài)菜單。這一節(jié)非常簡(jiǎn)單，大家可以不懂的話可以看我的視頻。
路由和菜單間相互綁定
路由和菜單之間的相互綁定，這是一個(gè)非常復(fù)雜的組件功能。這個(gè)組件我已經(jīng)內(nèi)置到了整個(gè)的一個(gè)項(xiàng)目當(dāng)中，包括cuecli項(xiàng)目和unit項(xiàng)目，我們都內(nèi)置了一個(gè)動(dòng)態(tài)管理組件，通過(guò)這個(gè)組件你可以實(shí)現(xiàn)可視化組件管理，實(shí)現(xiàn)菜單信息和路由之間的一個(gè)綁定。
本文題目：Vue非Node和Vuecli環(huán)境開發(fā)網(wǎng)站項(xiàng)目-支持動(dòng)態(tài)路由
文章網(wǎng)址：http://www.5511xx.com/article/cdcdgji.html
