vue单文件组件构建vue项目的若干技巧或建议

接触vue一年了,由于早前都是碎片化的学习与练习,缺乏深入的理解与总结,所以感觉收效甚微。最近利用闲暇时间撸了一个基于vue全家桶的天气应用webapp并做一些项目总结,以巩固自己所学,加深对vue的理解。

前端框架的选择

在web移动端应用快速崛起的今天,webapp,hybird app挤压传统原生app的趋势越发明显,产品的快速更新迭代、跨平台适配,催生了越来越多五花八门的前端框架。为了应对各式各样的产品需求,适应快速高效的开发工作,我们也必须跟上步伐,所以掌握一门甚至多门前端框架显得尤为重要。

vue作为一款渐进式的MVVM前端框架,在构建高复用性组件方面具有非常大的优势。其.vue单文件结构与数据驱动视图的思想,为开发复杂的单页应用程序提供有力支持。

webapp尺寸解决方案

但凡涉及移动端,都不得不考虑适配的问题。然而webapp本就是为解决跨平台跨终端而诞生,所以我们不可能为同一个应用去开发多个适配版本。相信很多人以前在做自适应网页的时候,没少用过像bootstrap这样带有网格系统的框架,或是利用css的媒体查询。然而这样做未免太过麻烦。今天要介绍的是webapp尺寸的rem解决方案。

(function(doc, win) {
    let docm = doc.documentElement,
        //orientationchange为移动终端横屏事件
        resizeEvent = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
        handleResize = function() {
            let clientWidth = docm.clientWidth;
            //假设以iphone6(375x667)为设计稿,则此时为 1rem = 10px;
            docm.style.fontSize = clientWidth / 37.5 + ‘px‘;
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvent, handleResize, false);
    doc.addEventListener(‘DOMContentLoaded‘, handleResize, false);
})(document, window);

关于rem的介绍,网上的资料很多,可以自行摆渡或哭够~~

keepAlive组件结合导航守卫应对特殊情景

官方文档中对keepAlive的使用说明很详细,这里这主要想讲一下本人在使用的过程中遇到的一些问题及解决办法。

我们都知道,在vue-router路由配置中,配置了某个route的meta属性的keepAlive键值为true,然后在路由视图将元属性keepAlive为true的路由包含在keep-alive标签内,则该路由在第一次访问后很被缓存,直到会话结束才删除。

//router配置部分
export default [{
  path: ‘/‘,
  component: App,
  children: [{
    path: ‘‘,
    redirect: ‘/home‘
  }, {
    path: ‘/home‘,
    component: home,
    meta: {
      keepAlive: true
    }
  }]
}]
//app.vue部分
<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

但有时候我们想要的是应用在前进的时候缓存,后退的时候不缓存,或者是从某个路由跳转访问时不缓存,这个时候路由导航守卫就起到了作用。

如上图,在manage.vue文件中,我们要求点击添加的城市后跳转回首页,并滚动到新增的城市页。按照keepAlive的属性,此时会返回到 ‘/home‘ 的缓存页面,即会回到首页的深圳页,很明显这不符合业务要求。接下来,我们在search.vue组件内,添加一个组件内的导航守卫:

beforeRouteLeave(to, from, next){
    if(to.path == "/home"){
        to.meta.keepAlive = false;
    }
    next()
}

这样一来,在‘/search‘页面点击新增的城市跳转到‘/home‘页之前,导航守卫动态的将路由‘/home‘的keepAlive属性关闭,以此达到更新‘/home‘页DOM的目的。接着我们在home.vue组件中将keepAlive属性设为true即可。

beforeRouteLeave(to,from,next){
    if(!this.$route.meta.keepAlive){
        this.RECORD_POSITION_Y(this.dist);
        this.$route.meta.keepAlive = true;
    }
    next();
}

keepAlive缓存的路由组件,除了能利用上述所说的导航守卫来实现更新组件,也可以利用keep-alive 组件特别的两个生命周期钩子:activated与deactivated。想了解这两货的工作机制的,可以到这里看看。

未完待续 ...

原文地址:https://www.cnblogs.com/Mr-CCQT/p/9541266.html

时间: 2024-09-30 10:34:30

vue单文件组件构建vue项目的若干技巧或建议的相关文章

3. Vue单文件组件

传统组件的问题和解决方案 1.问题 全局定义 的组件必须保证组件的名称不重复 字符串模板缺乏语法高亮, 在HTML有多行的时候,需要用到丑陋的 不支持 CSS意味着当HTML和JavaScript组件化时,CSS 明显被遗漏 没有构建步骤限制, 只能使用HTML和ES5 JavaScript,而不能使用预处理器(如: Babel) 2.解决方案 针对传统组件的问题,Vue 提供了一个解决方案一使用 Vue单文件组件. Vue单文件组件的基本用法 单文件组件的组成结构 template 组件的模板

webpack入坑之旅(五)加载vue单文件组件

这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不是开始的开始 webpack入坑之旅(二)loader入门 webpack入坑之旅(三)webpack.config入门 webpack入坑之旅(四)扬帆起航 webpack入坑之旅(五)加载vue单文件组件 webpack入坑之旅(六)配合vue-router实现SPA 需要什么? 在经过前面的四

在sublime 编辑器中,安装插件 Vue Syntax Hightlight,高亮识别Vue.js 的单文件组件(*.vue)

转自:http://www.cnblogs.com/cosnyang/p/6290950.html 默认情况下,Vue.js 的单文件组件(*.vue)在 sublime 编辑器中是不被识别的.若要想高亮显示,需要安装插件 Vue Syntax Hightlight.安装步骤如下: 第一,在 sublime 中打开 PackageControl 如下图,快捷键 Ctrl+Shift+P. 第二,打开 Install Package 窗口.下图中第一个,回车. 打开过程中,右下角出现状态栏.如下图

基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 "Print to vue": { "prefix": "vue", "body": [ "<template>", "  <div></div>", &q

vue单文件组件的构建

在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件组件来解决这些问题. 我们建议你参考 webpack-simple ,只要遵循指示,你就能很快的运行一个用到 .vue 组件 . 这是vue-cli的项目模板. npm install -g vue-cli vue init webpack-simple my-project cd my-proje

Vue单文件组件基础模板

背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点,童鞋们可以在评论里帮我补充:因为有这么多优点,所以决定有必要将vue组件的常用配置项提炼出来,形成一个组件模板,方便日后项目开发复用 <template> <div> <h1>{{title}}</h1> <ChildComponents></

vue 单文件组件中样式加载

在写单文件组件时,一般都是把标签.脚本.样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去. 采用import加载样式 在局部作用域(scoped)采用@import加载进来的样式文件,想法是美好的.以为这样加载进来的样式文件也只对当前组件有效:可现实是残酷的,这样加载进来的样式无法限制其作用域. <style scoped> @import "样式文件"; </style> 解决方案 采用 src属性加载样式. <style src=&q

华视身份证读卡器获取uid号vue单文件组件版本

<template> <div id="app" ref="app"> <object ref="CertCtl" classid="clsid:F48AE9BC-809E-423c-81E8-FE27F1C1A981" id="CertCtl" name="CVR_IDCard" width="0" height="0&quo

vue单文件组件实例2:简单单文件组件

? Introduce.vue: <template> <div class="intro"> 单位介绍 </div> </template> <script> </script> <style scoped> .intro{ font-size:20px; color:#000; margin:20px auto; } </style> Employment.vue: <templa