vue 订阅
VUE 是 iOS 和 Android 平台上的一款 Vlog 社区与编辑工具,允许用户通过简单的操作实现 Vlog 的拍摄、剪辑、细调、和发布,记录与分享生活。 [1]  还可以在社区直接浏览他人发布的 Vlog,与 Vloggers 互动。 [2] 展开全文
VUE 是 iOS 和 Android 平台上的一款 Vlog 社区与编辑工具,允许用户通过简单的操作实现 Vlog 的拍摄、剪辑、细调、和发布,记录与分享生活。 [1]  还可以在社区直接浏览他人发布的 Vlog,与 Vloggers 互动。 [2]
信息
软件大小
46.7 MB
开发商
VUE VIDEO CO., LTD.
软件名称
VUE Vlog
更新时间
2019年3月30日
软件版本
3.1.4
软件平台
iOS,Android
软件语言
英文、简体中文
VUE产生背景
随着手机摄像头的发展,越来越多的人开始使用手机拍照和摄像。摄像一般来说要比拍照门槛高,但是视频传播的信息量又远大于照片。VUE 就诞生在这样的背景下,希望用拍照一样简单的操作,帮助用户在手机上拍摄精美的短视频。
收起全文
精华内容
参与话题
问答
  • vue是什么

    万次阅读 多人点赞 2018-12-16 14:57:46
    vue 为什么要用vue 传统的网页形式是浏览器脚本语言js连接了各种各样的Html,css,但缺乏正规的组织形式,比如在页面元素非常多,结构很庞大的网页中,数据和视图如果全部混杂在一起,像传统开发一样全部混合在...

    vue

    为什么要用vue

    传统的网页形式是浏览器脚本语言js连接了各种各样的Html,css,但缺乏正规的组织形式,比如在页面元素非常多,结构很庞大的网页中,数据和视图如果全部混杂在一起,像传统开发一样全部混合在HTML中,那么要对它们进行处理会十分的费劲,并且如果其中有几个结构之间存在藕断丝连的关系,那么会导致代码上出现更大的问题,比如juqery中使用的

    $('#xxx').parent().parent().parent()
    

    一开始很好查找,但当页面结构发生变化,也就是说DOM的关联与嵌套层次要发生改变,那么之前的代码可能就会变成这样了:

    $('#xxx').parent().parent().parent().parent().parent()
    

    这样产品迭代后,对dom节点的查找操作等行为会有很大的性能损耗。

    vue是一款友好的、多用途的且高性能的js框架,它可以帮你创建可维护性和可测试性更强的代码库。官网对vue的优点描述是这样的:
    在这里插入图片描述

    1.易用:

    学习曲线平缓,api简洁,容易上手。学习过程较react来说比较容易,不那么痛苦

    2.灵活:

    如果你已经有一个现成的服务端框架,你可以将vue作为其中的一部分嵌入,带来更加丰富的交互系统 ,或者你希望将更多业务逻辑放到前端来实现,那么vue的核心库及其生态系统也可以满足你的各式需求,vue允许你将网页分割成可复用的组件,每个组件都可以包含自身的html,css,js文件,以用来渲染网页中相应的地方。

    3.高效:

    • 虚拟dom: 其数据全部在内存中,只有js引擎参与其中
      而真实dom会有浏览器渲染层在其中

    你的知道浏览器的虚拟DOM与真实DOM的区别(注意:需不需要虚拟DOM,其实与框架的DOM操作机制有关):

    虚拟DOM不会进行排版与重绘操作

    虚拟DOM进行频繁修改,然后一次性比较并修改真实DOM中需要改的部分(注意!),最后并在真实DOM中进行排版与重绘,减少过多DOM节点排版与重绘损耗

    真实DOM频繁排版与重绘的效率是相当低的

    虚拟DOM有效降低大面积(真实DOM节点)的重绘与排版,因为最终与真实DOM比较差异,可以只渲染局部(同2)

    使用虚拟DOM的损耗计算:

    总损耗 = 虚拟DOM增删改 + (与Diff算法效率有关)真实DOM差异增删改 + (较少的节点)排版与重绘

    直接使用真实DOM的损耗计算:

    总损耗 = 真实DOM完全增删改 + (可能较多的节点)排版与重绘

    只能说 虚拟DOM 只是减少了一些情况下, 对真实DOM操作的 次数.

    虚拟DOM只是个 JavaScript object

    它会在 对比 后再选择更新哪些DOM, 而不会像有些时候, 全部删除再重建.

    获取/修改 大量DOM元素的时候,就会先在 虚拟DOM 里 取值 对比.

    虚拟dom是在内存中维护的dom树,是在实体dom之上的一层抽象。有了这层抽象,不管是查询操作还是修改操作,都是先操作内存中的虚拟dom,在这个过程中可以做很多优化,从而减少对实体dom的操作。举两个例说明,1. 查询一个text标签的值,可以直接从虚拟dom中查找得到,根本不需要查询实体dom。2. 在一次操作中,要修改列表中的两条记录,要修改的元素会先把变更同步到虚拟dom上,然后根据最新的虚拟dom,一次性渲染出最终的实体dom,如果没有虚拟dom,两条记录的修改至少要对应两次对实体dom的操作,显然操作实体dom越频繁,网页速度越慢。

    对于vue.js的Virtual DOM,目前业界有着褒贬不一的评价。有人认为Vue.js作为一个轻量级框架,引入Virtual DOM会加大Vue.js本身的代码尺寸,也会消耗更多CPU(手机上会更耗电)(注意:消耗更多的CPU并不意味着会更卡,因为JavaScript计算是后台计算,他的计算量还不至于让DOM操作变得卡顿),并且在操作单个DOM元素的时候,反而多了一道计算工序,会更慢。但也有人认为基本上会用Vue.js开发的都是页面中内容很多的元素,肯定操作的DOM量级普遍较大,平均一下还是比较划算的。

    4.社区和第三方组件库丰富

    vue是什么

    1.Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

    这里渐进式框架也就是上边vue特点中的灵活一项,使用vue,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;

    比如说刚开始用数据绑定做一个表单,后来控制整个页面的dom,再后来用router控制路由做单页应用,组件配合,vuex与数据配合等等,使用vue,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用。

    模块与可复用组件

    2.Vue 只关注视图层, 采用自底向上增量开发的设计。

    • 视图层:

    那么HTML中的DOM其实就是视图,一个网页就是通过DOM的组合与嵌套,形成了最基本的视图结构,再通过CSS的修饰,在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分,就需要用到JavaScript来接受用户的交互请求,并且通过事件机制来响应用户的交互操作,并且在事件的处理函数中进行各种数据的修改,比如说修改某个DOM中的innerHTML或者innerText部分。

    我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层。

    • MVVM

    是Model-View-ViewModel 的缩写,由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。

    在这里插入图片描述
    在这里插入图片描述
    Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷。

    • MVC

    控制器负责对模型中的数据进行更新,而视图向模型中请求数据;当有用户的行为触发操作时,会有控制器更新模型,并通知视图进行更新,在这时视图向模型请求新的数据
    在这里插入图片描述

    3.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    • 响应的数据绑定:

    就是vue.js会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系,在图上是以input 标签的v-model属性来声明的,因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>vue.js测试 -</title>
    	<script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
    	<div id="app">
    		<input type="text" name="" value="" placeholder="在这里输入文字,下面会跟着变化" v-model="message">
    		<hr>
    		<p>{{ message }}</p>
    	</div>
    	<script type="text/javascript">
    		var app = new Vue({
    		  el: '#app',
    		  data: {
    		    message: 'Hello Vue!'
    		  }
    		})
    	</script>
    </body>
    </html>
    
    
    • 组合的视图组件:

    Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑).

    组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行(组件化)

    在这里插入图片描述

    • 组件化优点:
      提高开发效率
      方便重复使用
      简化调试步骤
      提升整个项目的可维护性
      便于协同开发
    展开全文
  • Vue + Spring Boot 项目实战(一):项目简介

    万次阅读 多人点赞 2019-03-31 11:19:37
    白卷是一款使用 Vue+Spring Boot 开发的前后端分离项目。除用于入门练手之外,亦可作为搭建小型 Web 项目的脚手架。

    logo


    GitHub 地址:https://github.com/Antabot/White-Jotter
    lisense

    教程目录

    第一部分

    Vue + Spring Boot 项目实战(一):项目简介
    Vue + Spring Boot 项目实战(二):搭建 Vue.js 项目
    Vue + Spring Boot 项目实战(三):前后端结合测试(登录页面开发)
    Vue + Spring Boot 项目实战(四):数据库的引入
    Vue + Spring Boot 项目实战(五):使用 Element 辅助前端开发
    Vue + Spring Boot 项目实战(六):前端路由与登录拦截器
    Vue + Spring Boot 项目实战(七):导航栏与图书页面设计
    Vue + Spring Boot 项目实战(八):数据库设计与增删改查
    Vue + Spring Boot 项目实战(九):核心功能的前端实现
    Vue + Spring Boot 项目实战(十):图片上传与项目的打包部署

    第二部分

    Vue + Spring Boot 项目实战(十一):用户角色权限管理模块设计
    Vue + Spring Boot 项目实战(十二):访问控制及其实现思路
    Vue + Spring Boot 项目实战(十三):使用 Shiro 实现用户信息加密与登录认证
    Vue + Spring Boot 项目实战(十四):用户认证方案与完善的访问拦截
    Vue + Spring Boot 项目实战(十五):动态加载后台菜单
    Vue + Spring Boot 项目实战(十六):功能级访问控制的实现
    Vue + Spring Boot 项目实战(十七):后台角色、权限与菜单分配
    Vue + Spring Boot 项目实战(十八):博客功能开发

    第三部分

    Vue + Spring Boot 项目实战(十九):Web 项目优化解决方案
    Vue + Spring Boot 项目实战(二十):前端优化实战
    Vue + Spring Boot 项目实战(二十一):缓存的应用

    前言

    之前写了一些关于 Java EE 的文章,主要是理论性质的,目的是帮助大家快速了解 Java EE 的核心内容,早日爬出这个陈旧又绕不开的坑,进入 Java Web 开发的新天地。当然只有理论是不够的,有很多细节需要在实践中理解,所以我决定做一个实践教程。

    这个项目十分简单,是一个纯粹为教程而生的原型,可以视为一个简陋的带后台的门户网站。所以学习时不用有什么压力,估计你们学的比我写的快很多。

    我的目标是根据这个教程,可以帮助 新入行的或是刚开始学习相关技术 的小伙伴们把一个完整的项目还原出来,建立起对前后端分离式 Web 开发的整体认知。

    一开始,我会尽量详细地描述开发的过程,帮助大家快速上手。随着项目进展,曾经讲到过的、比较容易搜索到的内容会适当省略。

    当然,每个人的理解方式不同,可能有些重要的细节没讲到位,欢迎大家在评论区提问。受限于个人水平,一定有很多说的不对的地方,大家理解一下,友善白嫖哈。

    一、项目概述

    这个项目我把它命名为 “白卷”,估摸着很多同学会拿它做课程设计之类,建议你们尽量加点自己的东西在里面,直接交白卷,你的良心不会痛吗?(狗头保命)

    开个玩笑,叫白卷是因为它随着教程进展逐渐完善,象征着知识的从无到有,从有到多。

    另外我还给它起了一个英文名字,叫 White Jotter(白色笔记本),纯粹是为了谐音。

    项目遵循敏捷开发原则,会根据大家反馈的意见整理出新的需求,动态扩展、调整、优化。初始阶段按照简单的分层架构设计,具体见下图:

    • 应用架构
      应用架构

    • 技术架构
      技术架构图

    项目需要在前后端之间不断穿梭,但在做教程的时候,我会尽量模块化地去讲解。

    此外,我把教程分为了几个阶段,是为了循序渐进、由易到难地讲解知识点。

    各个阶段的主要内容如下(随教程进展更新):

    (一)第一部分

    这个项目的第一部分以图书信息管理为示例,主要帮助大家理解以下内容:

    • 如何从 0 开始搭建 Web 项目?
    • 什么是前后端分离?如何实现前后端分离?
    • 单页面应用有哪些特点?
    • 如何在 Web 项目中使用数据库并利用网页实现增删改查?
    • 在开发中如何利用各种辅助手段?
    • Vue.js 的基本概念与用法
    • 简单的前端页面设计
    • 如何部署 Web 应用?

    各个页面的效果大致如下:

    登录页面
    登录页面
    首页
    首页
    图书馆页面
    图书馆

    (二)第二部分

    项目的第二部分是后台管理模块的开发,主要包括以下内容:

    • 后台管理模块的常见功能与布局(内容管理、用户\权限管理、运维监控)
    • 用户身份验证、授权、会话管理与信息加密存储
    • Shiro 框架的使用
    • 实现不同粒度的访问控制(动态菜单、功能控制、数据控制)
    • 结合内容管理,实现文章的编写与展示

    后台基本结构如下:
    在这里插入图片描述
    后台页面效果:

    Dashboard(from PanJiaChen / vue-element-admin)
    dashboard

    图书管理
    图书管理
    用户管理
    在这里插入图片描述
    笔记本页面效果:

    文章列表:
    笔记本
    文章详情:
    文章详情

    (三)第三部分

    第三部分是在前面的基础上,分析项目存在的不足,并对其进行由点及面的优化。

    当简单的优化无法达到我们想要的目的时,就需要从架构层面进行整体的升级改造,那就是下一套教程的事情了。


    二、技术栈

    参考技术架构图,项目使用的主要技术如下:

    1.前端技术栈

    1.Vue.js
    2.ElementUI
    3.axios

    2.后端技术栈

    1.Spring Boot
    2.Apache Shiro
    3.Apache Log4j2
    4.Spring Data JPA
    5.Spring Data Redis

    3.数据库

    1.MySQL
    2.Redis

    在开发过程中还会不断用到一些新的技术,有必要的我会增添上去。

    三、主要参考内容

    下一篇:Vue + Spring Boot 项目实战(二):搭建 Vue.js 项目


    有兴趣听我扯技术之外的故事的同学可以关注我的公众号。不定期更新,权当和大家聊聊天,图个乐子。
    heihei

    展开全文
  • 新手入门现代前端开发的不二选择 课程目标: * 学会从简单到复杂企业级应用的VueJS程序编写方法 * 能在单页和多页应用中自如使用VueJS * 真正理解VueJS的背后原理,并在真实项目中应用它们 ...
  • Vue.js 2.0之全家桶系列视频课程

    万人学习 2018-04-21 16:52:25
    基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,...
  • Vue2.x从入门到实战

    万人学习 2018-01-01 08:26:42
    课程从Vue2.x版本的入门,一直到实战课程共58集。包括内部指令、全局API、选项、实例和内置组件、Vue-cli、Vue-router、vuex。后有一门Vue实战,带你作一个快餐店的收银系统。
  • Vue2.x经典后台管理系统案例讲解

    千人学习 2019-09-29 10:21:31
    包括如何搭建环境,vuejs常用指令,使用ElementUI快速搭建页面,各类表单的创建和验证,vue组件使用,数据传递的各种方式,前端如何模拟数据,以及如何与后端接口联调等等。 为了让大家能构造出一个规范...
  • VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就业...
  • Vue+Typescript+Mockjs+Karma+ElementUi 工作经验过程中总结出来的PC前端规范详解
  • vue项目实战经验汇总

    2020-02-19 14:44:08
    1.vue框架使用注意事项和经验1.1 解决Vue动态路由参数变化,页面数据不更新 1.2 vue组件里定时器销毁问题 1.3 vue实现按需加载组件的两种方式 1.4 组件之间,父子组件之间的通信方案 1.5 vue中 $event 的用法--...
        

    目录

    • 1.vue框架使用注意事项和经验
      • 1.1 解决Vue动态路由参数变化,页面数据不更新
      • 1.2 vue组件里定时器销毁问题
      • 1.3 vue实现按需加载组件的两种方式
      • 1.4 组件之间,父子组件之间的通信方案
      • 1.5 vue中 $event 的用法--获取当前父元素,子元素,兄弟元素
      • 1.6 vue常用工具函数总结
      • 1.7 axios二次封装http请求
    • 2.elementui组件修改经验总结
      • 2.1 element-ui 中步骤条的深度使用
      • 2.2 v-loading框中的提示文字换行
      • 2.3 路由菜单项双击控制台报错
    • 3.Vue项目配置
      • 3.1 Vue-cli3 配置开发、生产和测试环境
      • 3.2开发环境中代理的切换配置

    1.vue框架使用注意事项和经验

    峡谷小说网 www.xiagu.org

    本文主要总结了在开发vue项目中的一些实践经验和踩过的一些坑,后续会接着更新,便于后期复盘,希望也对你有所帮助

    1.1 解决Vue动态路由参数变化,页面数据不更新

    问题描述:

    遇到动态路由如:/page/:id
    从/page/1 切换到 /page/2 发现页面组件没有更新

    解决方式:
    给<router-view :key="key">增加一个不同:key值,这样vue就会识别这是不同的了。

    <router-view :key="key"></router-view>
      ...
      computed:{
            key(){
                return this.$route.path + Math.random();
            }
        }

    1.2 vue组件里定时器销毁问题

    问题描述:
    在a页面写一个定时器,每秒钟打印一次,然后跳转到b页面,此时可以看到,定时器依然在执行。
    推荐的解决方式:
    通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。

    const timer = setInterval(() => {
        // 定时器操作
    }, 1000)
    
    // 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
    this.$once('hook:beforeDestroy', () => {            
        clearInterval(timer);                                    
    })

    1.3 vue实现按需加载组件的两种方式

    1.使用resolve => require(['./ComponentA'], resolve),方法如下:

    const ComponentA = resolve => require(['./ComponentA'], resolve)
    1. 使用 () => import(), 具体代码如下:
    const ComponentA = () => import('./ComponentA')

    1.4 组件之间,父子组件之间的通信方案

    组件之间的通信方案:

    • 通过事件总线(bus),即通过发布订阅的方式
    • vuex
    • 父子组件:
    • 父组件通过prop向自组件传递数据
    • 子组件绑定自定义事件,通过this.$emit(event,params) 来调用自定义事件
    • 使用vue提供的$parent/$children & $refs方法来通信
    • provide/inject
    • 深层次组件间的通信 $attrs, $listeners

    实现细节可参考:https://m.jb51.net/article/167304.htm

    1.5 vue中 $event 的用法--获取当前父元素,子元素,兄弟元素

    <button @click = “fun($event)”>点击</button>
      ...
      
      methods: {
       fun(e) {
        // e.target 是你当前点击的元素
        // e.currentTarget 是你绑定事件的元素
        #获得点击元素的前一个元素
        e.currentTarget.previousElementSibling.innerHTML
        #获得点击元素的第一个子元素
        e.currentTarget.firstElementChild
        # 获得点击元素的下一个元素
        e.currentTarget.nextElementSibling
        # 获得点击元素中id为string的元素
        e.currentTarget.getElementById("string")
        # 获得点击元素的string属性
        e.currentTarget.getAttributeNode('string')
        # 获得点击元素的父级元素
        e.currentTarget.parentElement
        # 获得点击元素的前一个元素的第一个子元素的HTML值
        e.currentTarget.previousElementSibling.firstElementChild.innerHTML
      
        }
            },

    1.6 vue常用工具函数总结

    /*
     日期相关 dateFormater:格式化时间
     timestampToTime
     * */
    function dateFormater(formater, t){
       let date = t ? new Date(t) : new Date(),
          Y = date.getFullYear() + '',
          M = date.getMonth() + 1,
          D = date.getDate(),
          H = date.getHours(),
          m = date.getMinutes(),
          s = date.getSeconds();
       return formater.replace(/YYYY|yyyy/g,Y)
          .replace(/YY|yy/g,Y.substr(2,2))
          .replace(/MM/g,(M<10?'0':'') + M)
          .replace(/DD/g,(D<10?'0':'') + D)
          .replace(/HH|hh/g,(H<10?'0':'') + H)
          .replace(/mm/g,(m<10?'0':'') + m)
          .replace(/ss/g,(s<10?'0':'') + s)
    }
    //  dateFormater('YYYY-MM-DD HH:mm', 1580787420000)//==> "2020-02-04 11:37"
    // dateFormater('YYYYMMDDHHmm', new Date()) //==> 201906261830
    
    /*
    获取Url参数,返回一个对象
     * */
    function GetUrlParam(){
       let url = document.location.toString();
       let arrObj = url.split("?");
       let params = Object.create(null)
       if (arrObj.length > 1){
          arrObj = arrObj[1].split("&");
          arrObj.forEach(item=>{
             item = item.split("=");
             params[item[0]] = item[1]
          })
       }
       return params;
    }
    // ?a=1&b=2&c=3 ==> {a: "1", b: "2", c: "3"}
    
    //toFullScreen:全屏
    function toFullScreen(){
       let elem = document.body;
       elem.webkitRequestFullScreen
       ? elem.webkitRequestFullScreen()
       : elem.mozRequestFullScreen
       ? elem.mozRequestFullScreen()
       : elem.msRequestFullscreen
       ? elem.msRequestFullscreen()
       : elem.requestFullScreen
       ? elem.requestFullScreen()
       : alert("浏览器不支持全屏");
    }
    
    //exitFullscreen:退出全屏
    function exitFullscreen(){
       let elem = parent.document;
       elem.webkitCancelFullScreen
       ? elem.webkitCancelFullScreen()
       : elem.mozCancelFullScreen
       ? elem.mozCancelFullScreen()
       : elem.cancelFullScreen
       ? elem.cancelFullScreen()
       : elem.msExitFullscreen
       ? elem.msExitFullscreen()
       : elem.exitFullscreen
       ? elem.exitFullscreen()
       : alert("切换失败,可尝试Esc退出");
    }

    1.7 axios二次封装http请求

    import axios from 'axios'
    import router from '@/router'
    import {removeSessionStorage} from './storage';
    import Vue from 'vue'
    import { Message } from 'element-ui' // 引用element-ui的加载和消息提示组件
    // 请求超时时间配置
    axios.defaults.timeout = 30000;
    // api地址配置
    axios.defaults.baseURL = "";
    // console.log(process.env.VUE_APP_BASE_API)
    Vue.prototype.$http = axios
    // 在全局请求和响应拦截器中添加请求状态
    let loading = null
    
    // 请求拦截器
    axios.interceptors.request.use(
        config => {
          config.headers = {
            'Content-Type': 'application/json'
          };
          // loading = Loading.service({ text: '拼命加载中' })
          let token = sessionStorage.getItem('-_token_-');
          if (token) {
            config.headers['token'] = token;
          }
          return config
        },
        error => {
          return Promise.reject(error)
        }
    )
    
    // 响应拦截器
    axios.interceptors.response.use(
        response => {
          if (loading) {
            loading.close()
          }
          //console.log(response)
          const code = response.status
          if ((code >= 200 && code < 300) || code === 304) {
            let errorCode = response.data.errCode;
            if(errorCode==='000000'){
              return Promise.resolve(response.data)
            }else {
              if (errorCode === 'SYS0404') {
                    router.push({
                  name: 'error',
                  params: {
                    isTimeout: false,
                    path: router.currentRoute.path,
                    desc: '您请求的资源找不到(错误码:404) ',
                  },
                });
              } else if (errorCode === 'SYS0401') {
                removeSessionStorage('-_token_-');
                router.replace({
                  path: '/login',
                  query: {
                    redirect: router.currentRoute.fullPath
                  }
                });
              }
              // Message.error(response.data.message)
              return Promise.resolve(response.data)
            }
            // return Promise.resolve(response.data)
          } else {
            return Promise.reject(response)
          }
        },
        error => {
          if (loading) {
            loading.close();
          }
          console.log(error);
          if (error.response) {
            switch (error.response.status) {
              case 401:
              case 403:
                // 返回401 清除token信息并跳转到登陆页面
                removeSessionStorage('-_token_-');
                router.replace({
                  path: '/login',
                  query: {
                    redirect: router.currentRoute.fullPath
                  }
                });
                break;
              case 404:
                Message.error('网络请求不存在');
                console.log('错误码:404 路由跳转 currentRoute  %o ', router.currentRoute.path);
                router.push({
                  name: 'error',
                  params: {
                    isTimeout: false,
                    path: router.currentRoute.path,
                    desc: '您请求的资源找不到(错误码:404) ',
                  },
                });
                break;
              case 502:
                router.push({
                  name: 'error',
                  params: {
                    isTimeout: false,
                    path: router.currentRoute.path,
                    desc: '网关错误(错误码:502),请联系系统管理员 ',
                  },
                });
                break;
              default:
                Message.error(error.response.data.message ||'系统出错,请联系系统管理员(错误码:'+error.response.status+')!');
            }
          } else {
            let controlParam = {
              desc: '',
              path: router.currentRoute.path,
              isTimeout: false,
            };
            // 请求超时或者网络有问题
            if (error.message.includes('timeout')) {
              Message.error('请求超时!请检查网络是否正常');
              controlParam.desc = '网络断开,请检查您的网络 ';
              controlParam.isTimeout = true;
            } else {
              Message.error('请求失败,请检查网络是否已连接');
              controlParam.desc = '页面加载失败 ';
            }
            router.push({
              name: 'error',
              params: controlParam,
            });
          }
          return Promise.reject(error);
        }
    );

    2.elementui组件修改经验总结

    2.1 element-ui 中步骤条的深度使用

    2.1.1element-UI的操作步骤steps每一项添加事件,比如click,hover

    <el-steps :space="200" :active="1" finish-status="success">
      <el-step @click.native="on_click(1)" title="已完成"></el-step>
      <el-step @click.native="on_click(2)" title="进行中"></el-step>
      <el-step @click.native="on_click(3)" title="步骤 3"></el-step>
    </el-steps>

    2.1.2 具体业务交互
    https://blog.csdn.net/weixin_40098371/article/details/88027949
    2.1.3 改变文字方向
    https://note.youdao.com/yws/public/resource/9c3b95f76c7c720da259832b7b0e087f/xmlnote/D19A72F2CA8F435C9285D24ADBAD4857/12997
    变为
    img2

    调整css,设置magin和background

    .el-step__main {
        white-space: normal;
        text-align: left;
        margin-top: -31px;
        margin-left: 25px;
    }
    
    }
    i
    .el-step__title {
        font-size: 16px;
        line-height: 38px;
        background: #FFF;
        width: 50px;
        position: relative;
        z-index: 1;
    }

    2.2 v-loading框中的提示文字换行

    https://note.youdao.com/yws/public/resource/9c3b95f76c7c720da259832b7b0e087f/xmlnote/F78532DA69D64227BB91A5D7D1B74C8E/13062

    2.3 路由菜单项双击控制台报错

    //解决菜单双击报错
    const originalPush = VueRouter.prototype.push
    VueRouter.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err)
    }

    3.Vue项目配置

    3.1 Vue-cli3 配置开发、生产和测试环境

    • 创建开发环境变量 .env.development
    • 创建生产环境变量 .env.production
    • 创建测试环境变量 .env.test

    image
    注意环境变量的前缀必须是VUE_APP
    image
    在其他文件中通过process.env.VUE_APP_BASE_API来访问,例如在接口文件代码中

    import axios from 'axios'
    import router from '@/router'
    // 请求超时时间配置
    axios.defaults.timeout = 30000;
    // api地址配置
    axios.defaults.baseURL = "process.env.VUE_APP_BASE_API";

    对应的package.json配置为

    "scripts": {
      "serve": "vue-cli-service serve --mode development",
      "build": "vue-cli-service build --mode production",
      "test": "vue-cli-service build --mode test",
      },

    3.2开发环境中代理的切换配置

    为了应对这样的跨域场景,在代码开发时,devServer要代理到本地后端,测试时,又要去修改代理到测试环境,上线后,调试新问题有可能代理到线上环境

    对vue.config.js的进行配置

    const Timestamp = new Date().getTime();  //当前时间为了防止打包缓存不刷新,所以给每个js文件都加一个时间戳
    const proxyTargetMap = {
        prod: 'https://xxx.xxx.com/',
        dev: 'http://192.168.200.230:6379',
        test: 'http://test.xxx.com',
        local: 'http://localhost:8080/'
    }
    let proxyTarget = proxyTargetMap[process.env.API_TYPE] || proxyTargetMap.local
    module.exports = {
        publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
        outputDir: 'dist',
        assetsDir: 'static',
        lintOnSave: false, // 是否开启eslint保存检测
        productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap
        // 调整内部的 webpack 配置。
        // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md
        chainWebpack: () => { },
        //configureWebpack 这部分打包文件添加时间戳,防止缓存不更新
        configureWebpack: {
            output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
                filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
                chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
            },
        },
    
        devServer : {
            proxy: {
                '/api' : {
                    target: proxyTarget,
                    changeOrigin: true,
                    pathRewrite: {
                        '^/api' : ''
                    }
                }
            }
        }
    };
    

    对应的package.json配置为

    "scripts": {
      "serve": "vue-cli-service serve --mode development",
    +  "serve:dev": "cross-env API_TYPE=dev vue-cli-service serve --mode development",
    +  "serve:test": "cross-env API_TYPE=test vue-cli-service serve --mode development",
      "build": "vue-cli-service build --mode production",
      "test": "vue-cli-service build --mode test",
      },
    展开全文
  • 关于使用elementui开发vue项目小总结(使用cli3创建项目) 1.在使用24栅格布局时,对于宽度溢出问题的解决 <div> <el-row> <el-col :span="12"><div class="grid-content bg-purple"><...

    关于使用elementui开发vue项目小总结(使用cli3创建项目)

    1.在使用24栅格布局时,对于宽度溢出问题的解决

    <div>
    	<el-row>
          <el-col :span="12"><div class="grid-content bg-purple"><line-chart/></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"><line-chart/></div></el-col>
        </el-row>
     <div>
    

    因为内部row有固定的内边距,给父容器div加上一个合适的padding宽度即可,我认为就是加上溢出的宽度即可。

    2.关于打包后部署项目时报错,图片,字体,图标,js,css文件路径报错问题

    对于js,css文件路径报错,需要到src目录下找到config文件夹下的index.js文件把build对象的assetsPublicPath: '/',修改为assetsPublicPath: './',即可

      build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),
    
        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
    
        /**
         * You can set by youself according to actual condition
         * You will need to set this if you plan to deploy your site under a sub path,
         * for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
         * then assetsPublicPath should be set to "/bar/".
         * In most cases please use '/' !!!
         */
        assetsPublicPath: './',   //修改此处
    
    
    

    对于小图标报路径错误需要修改上面config同级下的build文件夹下的util.js文件,现在网上大部分的答案都是旧版本的方法与新版本不符合,对于大佬,当我没说肯定看得懂怎么写,对与新版本作者有在github上提交过修改方法。修改方法如下

        if (options.extract) {
          loaders.push({
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../../'     //此处就是要添加的内容
            }
          })
        } else {
          loaders.push('vue-style-loader')
        }
    

    但凡是修改配置文件,一定要停止运行项目,最好再编译一遍,然后再打包,就不会报错了,或者修改不生效了。

    展开全文
  • vue.js 三种方式安装(vue-cli)

    万次阅读 多人点赞 2018-05-29 07:49:05
    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 ...
  • 什么是VUE?为什么用VUE

    万次阅读 多人点赞 2017-05-10 16:19:59
    Vue.js新手入门指南 最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做...
  • 理解vue实现原理,实现一个简单的Vue框架

    万次阅读 多人点赞 2016-11-07 14:51:03
    剖析Vue实现原理 - 如何实现双向绑定mvvm Vue.js源码(1):Hello World的背后 Vue.js官方工程本文所有代码可以在git上找到。 其实对JS我研究不是太深,用过很多次,但只是实现功能就算了。最近JS实在是太火,从...
  • vue-cli脚手架 https://cli.vuejs.org/zh/guide/installation.html 1. 简介 版本:2.x vue-cli是一个vue脚手架,可以快速构造项目结构 vue-cli本身集成了多种项目模板: simple 很少简单 webpack 包含ESLint代码...
  • vue项目打包步骤

    万次阅读 多人点赞 2018-06-25 01:04:39
    vue项目打包终端运行命令 npm run build打包成功的标志与项目的改变,如下图:点击index.html,通过浏览器运行,出现以下报错,如图:那么应该如下修改呢?具体步骤如下:1、查看package.js文件的scripts命令2、打开...
  • VUE常用插件库总结

    万次阅读 2019-10-11 14:53:57
    一、UI组件及框架 element- 饿了么出品的Vue2的web UI工具套件 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI ... vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- ...
  • Vue-实现对象拷贝

    万次阅读 2020-04-04 12:42:29
    Vue 项目时因为数据双向绑定的原因,但是我这个需求,如果此对象出现数据双向绑定会出现Bug 所以采用此对象克隆方式来 防止对象中的属性数据双向绑定 说明:采用Object.assign()这个方法就讲source 对象中的 属性...
  • Vue一到三年面试题总结

    万次阅读 多人点赞 2019-08-11 01:16:11
    于是我就把大家在出去面试的时候遇到的vue面试题以粉丝们投稿的方式收集了起来做个汇总,希望能帮助到更多的朋友们~ Vue面试题正文: 1.vue全家桶包含哪些? 答案:vue全家桶与react全家桶介绍 2.v-model是什么?...
  • 使用Vue写一个登录页面

    万次阅读 多人点赞 2018-07-31 11:24:20
    上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面。 1.构建项目的目录 2.App.vue &lt;template&gt; &lt;div id="app"&gt; &lt;router-view/&gt; &...
  • vue】使用vue-cli4.0快速搭建一个项目

    万次阅读 多人点赞 2019-10-25 10:38:43
    前言 最近公司的项目终于到了空闲期,而闲不住的我终于把目标放到了项目的迁移上面 因为公司的项目比较早的原因(虽然...所以所有项目开发的时候一直在用的 vue-cli2.0,后来项目多了也没时间就没往 vue-cli3.0 迁...

空空如也

1 2 3 4 5 ... 20
收藏数 765,106
精华内容 306,042
关键字:

vue