当前位置:首页 » 网页前端 » 普通前端页面怎么改造成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应用程序开发的状态管理模式。