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