當前位置:首頁 » 網頁前端 » 普通前端頁面怎麼改造成vue
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

普通前端頁面怎麼改造成vue

發布時間: 2022-05-14 15:41:50

㈠ 如何改造vue-cli實現多頁面應用

vue腳手架(vue-cli)所支持的就是盡可能的提高用戶體驗設計,通過路由減少頁面訪問次數達到頁面無刷新切換。也就是單頁面應用。
題主所說的「多頁面應用」其實是沒有什麼意義的。如果強行為了實現而去實現也是可以的:
取消vue-router功能,全部換成a標簽做頁面跳轉,不能直接a的用js 的location.href跳轉,就可以實現多頁面了。

㈡ 如何前端Vue實現一個PC端/移動端兼備的網頁

高度組件化,比如一個頭部,把js,css,html寫一起,看成一個組件,然後在其他需要的頁面映入這個組件

㈢ 怎麼把靜態網站轉換為vue工程

看來你不知道什麼是靜態網頁什麼是動態網頁,等你明白了,就不會問這樣的問題了。
靜態網頁,動態網頁主要根據網頁製作的語言來區分:
靜態網頁使用語言:HTML(超文本標記語言)它的內容是固定的,不會根據瀏覽者的不同需求而改變。
動態網頁使用語言:HTML+ASP 或 HTML+PHP 或 HTML+JSP 等。動態網頁是與靜態網頁相對應的,也就是說,網頁URL的後綴不是.htm、.html、.shtml、.xml等靜態網頁的常見形式,而是以.asp、.jsp、.php、.perl、.cgi等形式為後綴,並且在動態網頁網址中有一個標志性的符號——「?」。
我們將動態網頁的一般特點簡要歸納如下:
(1)動態網頁以資料庫技術為基礎,可以大大降低網站維護的工作量;
(2)採用動態網頁技術的網站可以實現更多的功能,如用戶注冊、用戶登錄、在線調查、用戶管理、訂單管理等等;
(3)動態網頁實際上並不是獨立存在於伺服器上的網頁文件,只有當用戶請求時伺服器才返回一個完整的網頁;
(4)動態網頁中的「?」對搜索引擎檢索存在一定的問題,搜索引擎一般不可能從一個網站的資料庫中訪問全部網頁,或者出於技術方面的考慮,搜索蜘蛛不去抓取網址中「?」後面的內容,因此採用動態網頁的網站在進行搜索引擎推廣時需要做一定的技術處理才能適應搜索引擎的要求

㈣ 如何通過 Vue+Webpack 來做通用的前端組件化架構設計

angular:

我覺得angularjs的學習上手周期比較長,可能遇到問題,都無法立刻解決,而且編碼的質量明顯的很差,如果團隊沒有制定規范,那寫出來的代碼就沒法看。對於一個選用angularjs的團隊來說,我認為編碼規范是很重要的,否則對編碼能力是沒有提升的。

avalon:

avalonjs文檔資料沒有那麼全,我感覺一些開源支持的力量不夠多。不過,如果有項目需求,需要去做IE瀏覽器的支持話,我建議選擇avalonjs

vue:

vuejs 文檔比較齊全,vue吸取了angularjs
的一些優點,規避了一些缺點,至少編碼規范上有了一個質的飛躍,學習上手的周期比較短。vue起初只是一個輕量級的類庫,用來做類似於react的事情,
同時vue也是可以拿來做前端架構設計的,比如:vueify + vue-router (spa框架)。

vue學習地址:http://cn.vuejs.org/

以上說了那麼多沒用的,下面就來點幹活了!

我的前端組件化架構設計,目錄如下:

項目架構用到的知識點,還是挺多的,知識清單如下:

[1]: gulp + webpack 構建打包工具, 使用了一系列的loader,比如:vue-loader, sass-loader, babel-loader , 以及 postcss,postcss-custom-properties,等等

[2] : postcss-custom-properties : 用來做樣式全局化, 只需要通過變數去維護,通過編譯變數既可以換膚。

[3] : vue-loader (vue文件組件化):用來去編譯處理 *.vue 的文件,一個vue 文件就是一個單獨的組件,vue組件開發具有高獨立且易維護。組件的劃分可大可小,一個頁面也可以看作成由多個vue 組件構成的,一個頁面也可以是一個vue組件, vue 文件結構如下:

[4] : babel-loader :實現對vue文件中 es6 語法的編譯解析

[5] : vue-router :用來做路由分發,而且文檔非常的齊全(學習地址:http://vuejs.github.io/vue-router/zh-cn/index.html)。

[6] : vue (插件式方式):vue本身提供了一個install 方式用來注入,我們可以注入一些全局的(屬性、方法、以及通用的ui組件)。

下面說說文件夾的含義:

common 文件夾: 是用來存一些通用的東西,比如樣式,以及全局的js等等

components 文件夾:用來放獨立的組件,我打算後期做細分,ui 組件,以及page 組件等等,這裡面就是團隊的心血,以後就能做成獨立的組件庫了。

filters 文件夾:用來放通用的過濾器操作。

plugins 文件夾:用來放 Vue.use 注入到Vue全局的插件庫,比如:請求載入、彈框、分頁、ui組件 等等。plugins 只是把 componets 組件暴露給 Vue全局。

views 文件夾: 用來存放頁面模塊

app.vue 文件:第一次啟動的主程序模塊

app.js 文件:啟動前的載入,注入,實例化

router.config.js 文件:路由模塊

目前該架構在前後台的SPA架構都適用,可能還是有很多不完善,不過我還很年輕,vue也還狠年輕,望各位道友多給我們年輕人一些機會。

㈤ 前端vue2新建頁面功能

一般用在控制用戶是否有許可權進入,或者當遊客進行某些必須是用戶的操作時,跳轉登陸。
是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是,Vue被設計為可以自底向上逐層應用。
Vue的核心庫只關注視圖層,不僅易於上手,還便於與第三方庫或既有項目整合。另一方面,當與現代化的工具鏈以及各種支持類庫結合使用時,Vue 也完全能夠為復雜的單頁應用提供驅動。

㈥ 普通的js怎麼改編成vue可以使用的

可以封裝起來

//判斷男女的過濾器
exportvarisMan=function(value){
switch(value){
case1:
returnvalue='男';
break;
case2:
returnvalue='女';
break;
}
};

在其他vue文件中引用

import{isMan}from'../global/common'

就可以了

㈦ vue如何實現前端頁面切換但不刷新頁面內容

在點餐的時候,我們提交到確認訂單卻又返回了,從新再點。這時我們返回時就不能刷新,所以最好是這個點餐和確認訂單是在一個頁面的。如果使用mui的單頁面,可能會是頁面太多了不方便操作。再加上介面什麼的,就內容過多。
我們可以考慮利用框架iframe,第二個頁面通過iframe引進來,但是注意他們可能是一個頁面了,當你進入第二個也就是那個iframe框架的頁面時,返回可能就是整體返回而忽視點餐的那個頁面,因為把他們當整體啦。
知識點:
window.self 對當前窗口自身的引用。等價於window

window.top. 返回頂層窗口,即瀏覽器窗口

window.parent 返回父窗口。在框架網頁中,一般父窗口就是頂層窗口,但如果框架中還有框架,父窗口和頂層窗口就不一定相同了。
在框架iframe指的那個具體的頁面中寫:

window.parent .closeiframe()
在包含框架的主頁面寫

function closeiframe(){//返回到該頁面時隱藏框架
$("iframe").hide();
}

返回父窗口。

㈧ 自己搭建了一個vue的運行環境,最後出來這個頁面,但是之後要怎麼做我自己寫了一個小demo,怎麼

你是用手腳架搭的嗎?出來這個頁面說明你成功的完成了第一步,進入到vue的世界了,接下了你想幹嘛就幹嘛了,環境已經搭建完成,你需要做的就是將你想放的東西放進去而已。

vue都是以組件形式將頁面導入進入的,import引入組件,在components中聲明,然後在<template></template>中使用就行了

㈨ 如何用vue開發後台系統的頁面

介紹:這是一個用vuejs2.0和element搭建的後台管理界面。相關技術:vuejs2.0:漸進式JavaScript框架,易用、靈活、高效,似乎任何規模的應用都適用。element:基於vuejs2.0的ui組件庫。vue-router:一般單頁面應用spa都要用到的前端路由。vuex:Vuex是一個專為Vue.js應用程序開發的狀態管理模式。