vue项目中遇到的那些事。
前言
有好几天没更新文章了。这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成。
做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术。
技术栈:vue2 + vuex + vue-router + webpack + ES6/7 + element-ui + vue-baidu-map + i18n + vue-awesome-swiper
做项目时总是有一些思考和踩过的坑,对以后有一定的帮助,今天就来写写做vue项目遇到的那些事。
假如你正准备做项目或正在做项目一定看看,说不定对你有所帮助。
正文
照例放上一些项目中用到的权威的官网
vue 官方api:https://cn.vuejs.org/
vue资源精选:http://vue.awesometiny.com/
vue GitHub地址:https://github.com/vuejs/vue
element-ui 官方中文api:http://element-cn.eleme.io/#/zh-CN/component/dropdown
vue-awesome-swiper GitHub地址: https://surmon-china.github.io/vue-awesome-swiper/
1.阅读vue的风格指南再开始你的项目(最重要)
2.vue项目中data可以视为一个函数
<script>
export default {
data () {
// 可以在这里写很多的前置数据操作
return {}
}
}
</script>
例如:
<script>
export default {
data () {
// 可以在这里写很多的前置数据操作
return {
showLanguageList: showLanguageList
}
}
}
</script>
3.路由带参
路由带参:点击查看官网说明
我们可以在路由切换时绑定参数
在App.vue文件中监听路由绑定参数
watch: {
$route (to, from) {
// 在路由上绑定语言和公司编号
this.$router.replace({
path: this.$router.path,
query: {
languageCode: '中文',
companyCode: '阿里巴巴'
}
})
}
}
函数query传参可以和路由绑定id一起使用
路由绑定ID:
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
效果:
4.解决整个项目的数据刷新问题
需求:在项目中经常会用到点击某个按钮或者更新某个参数时,整个项目的后台数据都从新请求一遍或者刷新整个页面。
类似F5刷新
this.$router.go(0);
location.reload()
//这两种方式都相当于f5刷新,页面会有卡顿,白屏的情况,用户体验极差
通过v-if的显示,消失,刷新数据
适用于整个项目的数据刷新,当然也可以用于刷新部分页面
页面刷新相对流畅,比较推荐的一种方法
在App.vue中:
<template>
<div id="app">
<router-view v-if="isRouterAlive" />
</div>
</template> <script>
export default {
name: 'App',
provide () {
return {
reload: this.reload
}
},
data () {
return {
isRouterAlive: true
}
},
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(function () {
this.isRouterAlive = true
})
}
}
}
</script>
<style>
</style>
在子组件中,当我们需要刷新数据时:
<template>
<div @click="onSubmit_name"></div>
</template> <script>
export default {
data () {
return {}
},
inject: ['reload'], //引入方法
methods: {
}
</script>
<style>
</style>
利用路由的replace方法
这种方式是进入一个空白页,在空白页里面跳转回原来的页面,这种方式页面刷新相对流畅
// 需要刷新数据的页面,
refresh () {
this.$router.replace({
path: '/refresh',
query: {
t: Date.now() //携带必要的路由参数
}
})
} // refresh.vue页面中里有路由钩子,直接返回前一个页面
<script>
export default {
beforeRouteEnter(to, from, next) {
next(vm => {
vm.$router.replace(from.path)
})
}
}
</script>
5.element-ui导航栏与路由
激活导航跳转对应路由
在element-ui的导航中,官方让我们能和vue的router无缝对接,实现绑定路由,同样可以根据路由实现对应导航栏高亮。
router 是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转 boolean — false
请看图中标红的位置,添加router以后,每次激活导航时以 index 作为 path 进行路由跳转
<el-menu router :default-active="activeIndex" class="el-menu-vertical-demo hidden-sm-and-up" mode="vertical" :collapse="isCollapse" style="height:62px;float:right;width:100%;border:0;z-index:100"
background-color="#222" text-color="#fff" active-text-color="#e42828">
<el-submenu index="">
<template slot="title">
<i class="el-icon-menu"></i>
<span slot="title">{{$t('home.home')}}</span>
</template>
<el-menu-item-group>
<el-menu-item index="/Pages">{{$t('home.home')}}</el-menu-item>
<el-menu-item index="/PagesAbout">{{$t('home.about')}}</el-menu-item>
<el-menu-item index="/PagesProductList">{{$t('home.product')}}</el-menu-item>
<el-menu-item index="/PagesService">{{$t('home.service')}}</el-menu-item>
<el-menu-item index="/PagesNewsList">{{$t('home.news')}}</el-menu-item>
<el-menu-item index="/PagesRecruitmentList">{{$t('home.recruitment')}}</el-menu-item>
<el-menu-item index="/PagesContact">{{$t('home.contact')}}</el-menu-item>
<el-menu-item index="/PagesDownload">{{$t('home.download')}}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
根据对应路由实现对应导航高亮
请看如下代码,重点关注红色部分
<el-menu router :default-active="activeIndex" class="el-menu-demo hidden-xs-only" mode="horizontal" style="height:62px;float:right;width:100%;border:0;z-index:100"
background-color="#222" text-color="#fff" active-text-color="#e42828">
<el-menu-item index="/Pages">{{$t('home.home')}}</el-menu-item>
<el-menu-item index="/PagesAbout">{{$t('home.about')}}</el-menu-item>
<el-menu-item index="/PagesProductList">{{$t('home.product')}}</el-menu-item>
<el-menu-item index="/PagesService">{{$t('home.service')}}</el-menu-item>
<el-menu-item index="/PagesNewsList">{{$t('home.news')}}</el-menu-item>
<el-menu-item index="/PagesRecruitmentList">{{$t('home.recruitment')}}</el-menu-item>
<el-menu-item index="/PagesContact">{{$t('home.contact')}}</el-menu-item>
<el-menu-item index="/PagesDownload">{{$t('home.download')}}</el-menu-item>
</el-menu>
我们可以利用vue的特性,动态的改变default-active的值来改变导航栏的高亮,当然我们也可以通过截取的方式,
只要路由中有一部分路由和index相同则激活。
default-active 当前激活菜单的 index string
代码如下:
URL:http://localhost:8080/#/PagesNewsList/4dd8136dec5c48bcb223e9ef1fa5714f?languageCode=zh-CN&companyCode=0000 let pathss = this.$route.path.split('/')
data () {
return {
}
}
6.如何实现单页面的title设置?
网上也有很多方法,但我这里强烈推荐一个插件,方便又实用。
下载安装插件依赖
npm install vue-wechat-title --save
在main.js中引入插件
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
路由定义(只截取一部分)
// ...
const routes = [
{
name: 'Home',
path: '/home',
meta: {
title: '首页'
},
component: require('../views/Home.vue')
},
{
name: 'Order',
path: '/order',
meta: {
title: '订单'
},
component: require('../views/Order.vue')
},
{
name: 'UCenter',
path: '/ucenter',
meta: {
title: '用户中心'
},
component: require('../views/UCenter.vue')
}
]
// ...
- App.vue 建议全局只使用一次该指令 标题可用vuex或者router中定义 不要多处使用!!
<!-- 任意元素中加 v-wechat-title 指令 建议将标题放在 route 对应meta对象的定义中 -->
<div v-wechat-title="$route.meta.title"></div>
<!--or-->
<router-view v-if="isRouterAlive" v-wechat-title='$route.meta.title' />
7.路由加载方式
路由都有两种加载方式。
一种是懒加载
只在你点击或者访问的时候加载。建议用于不经常访问的路由。
路由配置如下:
{
path: '/Home',
name: 'Home',
component: () => import('./views/Home.vue'),
meta: {
title: '首页'
}
}
一种是普通加载
在项目启动时就渲染好静态页面,建议用于经常访问的路由,增加效率以及提升体验。
import PagesHome from './pages/home/Home.vue'
{
path: '/Pages',
name: '/Pages',
component: PagesHome,
meta: {
title: '首页'
}
}
8.默认路由以及404页面
直接在router.js页面中填入下面代码
export default new Router({
routes: [
{
path: '/', // 项目启动页
redirect:'/Home' // 重定向到下方声明的路由
},
{
path: '*', // 404 页面
component: () => import('./notFind') // 或者使用component也可以的
},
]
})
9.数据持久化
做vue项目时,为了防止f5以后数据重置,我们想到了数据持久化
巧用vue-cookie插件
传送门:https://www.npmjs.com/package/vue-cookie
npm方式安装
npm install vue-cookie --save
在main.js/app.js中引用
// Require dependencies
var Vue = require('vue');
var VueCookie = require('vue-cookie');
// Tell Vue to use the plugin
Vue.use(VueCookie);
示例:
// From some method in one of your Vue components
this.$cookie.set('test', 'Hello world!', 1);
// This will set a cookie with the name 'test' and the value 'Hello world!' that expires in one day // To get the value of a cookie use
this.$cookie.get('test'); // To delete a cookie use
this.$cookie.delete('test');
高级示例:
// Setting the cookie Domain
this.$cookie.set('test', 'Random value', {expires: 1, domain: 'localhost'}); // As this cookie is set with a domain then if you wish to delete it you have to provide the domain when calling delete
this.$cookie.delete('test', {domain: 'localhost'}); // Customizing expires
var date = new Date;
date.setDate(date.getDate() + 21); this.$cookie.set('dateObject', 'A date object', { expires: date });
this.$cookie.set('dateString', 'A parsable date string', { expires: date.toGMTString() });
this.$cookie.set('integer', 'Seven days later', { expires: 7 });
this.$cookie.set('stringSuffixY', 'One year later', { expires: '1Y' });
this.$cookie.set('stringSuffixM', 'One month later', { expires: '1M' });
this.$cookie.set('stringSuffixD', 'One day later', { expires: '1D' });
this.$cookie.set('stringSuffixh', 'One hour later', { expires: '1h' });
this.$cookie.set('stringSuffixm', 'Ten minutes later', { expires: '10m' });
this.$cookie.set('stringSuffixs', 'Thirty seconds later', { expires: '30s' });
(我们也可以在vuex的store中使用)
巧用vuex-persistedstate插件
前提:已经安装并使用vuex。
安装vuex-persistedstate
npm install vuex-persistedstate
在vuex的store文件的index.js中引用
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import state from './state'
import mutations from './mutations' Vue.use(Vuex) export default new Vuex.Store({
state,
mutations,
plugins: [createPersistedState()]
})
10.vue项目封装时间格式
(一)函数封装(将该函数封装成一个文件,或者加入自己项目的函数库)
export function formatDate (date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$, (date.getFullYear() + '').substr( - RegExp.$.length))
}
let o = {
'M+': date.getMonth() + ,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + ''
fmt = fmt.replace(RegExp.$, (RegExp.$.length === ) ? str : padLeftZero(str))
}
}
return fmt
}; function padLeftZero (str) {
return ('' + str).substr(str.length)
}
(二)文件引入(注意:由于是函数,故名字要和函数的名字一致)
import { formatDate } from '../../unit/index.js'
(三)添加到过滤器中
filters: {
formatDate (time) {
var date = new Date(time)
return formatDate(date, 'yyyy-MM-dd')
}
},
(四)使用场景一: 在HTML中使用
<div class="news-img-text-div">{{job.create_datetime| formatDate}}</div>
(五)使用场景二: 在提交时候使用
let nowDate = formatDate(new Date(), 'yyyy-MM-dd hh:mm')
11.vue官网的推荐资源中,基本能找到我们想要的资源
1. 推荐一个地图插件:vue-baidu-map(百度地图)vue-google-maps(谷歌地图)
文档:https://dafrok.github.io/vue-baidu-map/
安装
npm i --save vue-baidu-map
在main.js中引入
// 引入百度地图插件
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'Zgbme5XaLreej7Oribs9yk317sOFG3OP'
})
使用示例:
<baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
<bm-marker :position="{lng: this.$store.state.companyObject.longitude, lat: this.$store.state.companyObject.latitude}" :dragging="false"animation="BMAP_ANIMATION_BOUNCE">
<bm-label :content="this.$store.state.companyObject.transname" :labelStyle="{color: 'red', fontSize : '14px'}" :offset="{width: -35, height: 25}" />
</bm-marker>
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
</baidu-map>
export default {
name: 'Contact',
components: {
ContactUs
},
data () {
return {
center: {
lng: '26.515515',
lat:'103.54548841'
},
zoom: 15
}
},
methods: {
handler ({ BMap, map }) {
this.center.lng ='26.515515'
this.center.lat = '103.54548841' this.zoom = 15 } } }
2. 推荐一个vue轮播插件:vue-awesome-swiper
安装
npm install vue-awesome-swiper --save
引用:
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper' // require styles
import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)
示例:(每个都是vue项目的示例,在右上角都有对应代码的链接)
https://surmon-china.github.io/vue-awesome-swiper/
3.推荐一个vue国际化插件:vue-i18n
文档:http://kazupon.github.io/vue-i18n/
使用方法请参考文档,非常详尽。element-ui已经兼容 vue-i18n@5.x
结尾
vue现在已经相当成熟,能做的事情还有很多,大家在使用过程中如果有什么问题,欢迎交流,一起学习,一起进步。
年前就写好了。想着过年大家都没心思看,就拖到现在。
代码是敲不玩的,这辈子都不可能敲完了,只能不断学习。哈哈
欢迎大家关注公众号,不定时干货,只做有价值的输出
作者:Dawnzhang
出处:https://www.cnblogs.com/clwydjgs/p/10291136.html
版权:本文版权归作者
转载:欢迎转载,但未经作者同意,必须保留此段声明;必须在文章中给出原文连接;
往期文章:
Visual Studio Code(VS code)你们都在用吗?或许你们需要看一下这篇博文
vue项目中遇到的那些事。的更多相关文章
- 如何在Vue项目中,通过点击DOM自动定位VScode中的代码行?
作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...
- vue 项目中实用的小技巧
# 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 在vue项目中, mock数据
1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- 去除vue项目中的#及其ie9兼容性
一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
- scss/less语法以及在vue项目中的使用(转载)
1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...
- Vue项目中GraphQL入门学习与应用
1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...
随机推荐
- 《JAVA程序设计》_第八周学习总结
一.学习内容 1.泛型类声明--15.1知识 可以使用"class 名称"声明一个类,为了和普通的类有所区别,这样声明的类称作泛型类,如: class People<E> ...
- 二。Hibernate 查询 HQL、SQL方式
hibernate的查询1.HQL方式:所有查询都是根据java对象名来完成,对象名替换表名2.SQL方式:保留原来的sql查询风格3.可以通过设置第一条和最大条数来实现各种数据库的分页查询4.通过B ...
- 【原创】平时的你VS面试的你
引言 大家在面试的时候,特别是最后一面HR面,是不是经常都说自己咳咳咳.博主特意总结了一下平时的你和面试的你区别在哪,整理成文,大家看看就好~ 正文 面对HR 问题:你是如何和你同事相处的? 平时的你 ...
- .NET和PHP程序员如何通过技术快速变现
刚开始写博客不足之处望大家多多指点,少一些质疑多一些帮助,我们就能成为朋友. 上一篇:<.NET程序员我是如何通过一个产品在2年内买车买房>有很多同为程序员的小伙伴们给我留言,从整体的留言 ...
- C语言之输出空心棱形图案
#include<stdio.h> #include<stdlib.h> void main() { int n,j,i; /*i为行数,j为每行中的项数*/ printf(& ...
- ansible roles
roles 特点 目录结构清晰 重复调用相同的任务 目录结构相同 web - tasks - install.yml - copfile.yml - start.yml - main.yml - t ...
- vue路由传对象刷新会报错,数据丢失,用json字符串解决
变成json字符串,且加密 this.$router.push({name: response.body.PowerList[0].opPowerurl ,query :{ all: encodeUR ...
- 通过keepalived实现多主集群方案
一. 环境说明:1.服务器列表:proxy01: eth0: 192.168.56.11 eth2: 192.168.156.11 proxy02: eth0: 192.168.56.12 eth2: ...
- Java的selenium代码随笔(6)
//获取元素列表public List<WebElement> ListElements(WebElement webElement, By parentBy, By childrenBy ...
- Linux centos 推拉、共享、监控的设置的分享
新建四台虚拟机 打开第一台连接shell更改主机名.网卡 backup 1.主机名网卡配置 [root@jytcentos7.6 ~]# hostnamectl set-hostname backup ...