在理解beforeEach无限循环之前，我们先来看一下beforeEach相关的知识点，该篇文章的项目是基于 express+vue+mongodb+session实现注册登录 这篇文章项目基础之上进行讲解的，因为登录完成后，会跳转到列表页面，那么在跳转到列表页面之前，我们会使用 router.js 使用beforeEach来判断下，如果登录成功，并且session在有效期内的话，就跳转到下一个页面去，否则的话，就重定向到登录页面去。app/index/router.js 代码如下：import Vu...
最近在学习vue框架，练习了一些例子之后，想着搭建一个vue项目，了解到官方有提供一个vue-cli工具来搭建项目脚手架，尝试了一下，写下博客来记录一下。一、工具环境1、node.js 6.10.0，目前node.js最新版本是8.7.0，可以到官网下载最新版本安装。链接：http://nodejs.cn/download/2、编辑器，Hbuilder 8.8.43、windows 8.1二、创建项目1、安装node.js，默认安装在"C:\Program Files\nodejs"，随node.js安装的还有包管理工具npm（关...
1、keep-alive在vue项目中路由跳转会使页面重新渲染，在router-view外面加入keep-alive可以阻止页面刷新，但是缺点是基本的生命周期钩子实效，使用actived这个钩子，比如对城市进行选择，并且在另一个界面上进行渲染，要判断当前点击的城市和原来的城市是否一样，一样的话不进行跳转，不一样进行跳转2、路由的懒加载 如果js太大的话，我们通常将他拆开，变小，写成回调函数（）=>import()3、服务端渲染ss后端没有dom 解决两个问题...
1.安装npm install echarts -S2.引入全局引入main.js中// 引入echarts import echarts from 'echarts'Vue.prototype.$echarts = echarts 按需引入全局引入会将所有的echarts图表打包，导致体积过大，最好还是按需引入let echarts = require('echarts/lib/echarts') require('echarts/lib/chart/pie'); require('echarts/lib/component/grid'); require('echarts/lib/component/legend'); require('echarts/lib/component/tooltip')...
根目录下的文件，这些是创建vue项目时生成的配置文件 node_modules=> 里面的文件是项目开发过种中的各种依赖，我们暂且不用去深入了解；public=> 主要放的是一些公用的文件，比如一些icon（即我们在收藏网址，网址前面的图标识别）src=> 这是我们整个项目的核心部分。我们所写的代码会全部放在这个文件夹下。assets=> 存放的是一些静态资源：比如图片，css文件，js文件；components=> 存放组件views=> 存放所有的页面App.vue=> 根组...
这种情况一般也只会出现在前后端分离，跨域名授权的时候吧。耗费了一个前端+一个后台+一个网关，熬夜通宵了两天才整出来一套方法（你们见过凌晨6点的杭州吗，对，我下班的时候天黑了，到家天亮了。。。。），和开发APP第三方各种联系，各种百度、谷歌what、why...先说说和微信的授权认证吧，后台和网关直接的逻辑流程就不说了，就说前端的：前端业务逻辑是在加载页：1.请求网关接口，获取用户授权状态。2.如果授权过就直接跳转首页...
最近工作中遇到一个这样的需求, 后台给出宽度和高度, 然后前端展示成上面的样子 , 颜色随便给的灰色: 超出边缘的不用分 , 无法被选中绿色: 已经被占用的 , 无法被选中白色 : 可以选择的区域 , 点击会变成 红色 再次单击 会取消 最终需求: 在白色区域 选择一个 ‘ 坐标 ‘ 代码如下 vue 项目<template><div><el-button @click="openDialog" type="primary" size="mini">打开dialog</el-button><el-dialog title="外层 Dialog" :vi...
0、理解1、 VueRouter(): 用于创建路由器的构建函数new VueRouter({// 多个配置项})2、路由配置routes: [{ //一般路由path:‘/about‘,compontent:About},{ //自动化跳转路由path: ‘/‘,redirect: ‘/about‘}]3、注册路由器 import router from ‘./router‘ new Vue ({router })4、使用路由组件标签- <router-link>: 用来生成路由链接<router-link to="/xxx">Go to xxx<router-link>- <router-view>: 用来显示当前路由组件界面...
背景：项目需要，我们引入了前端框架就是目前最流行的框架之一vue,同时引入了一套由饿了吗维护的ui库，由于我们是在pc端使用发现它竟然没有提供可随意拖动的窗口，可能用的更多的时移动端吧吧，于是就随手写了一个，比较简单吧，但是做过的就会知道也是有一些小小的技巧，记录下吧留作备用。由于不是很难，就不做过多解释了，直接上代码：前端精品教程：百度网盘下载?12345678910111213141516171819202122232425262728293031323334...
1.每次执行完，尽量npm run dev 一次，有时候又缓存问题2.安装sass 一.使用save会在package.json中自动添加。因为sass-loader依赖于node-sass npm install node-sass --save-dev npm install sass-loader --save-dev 然后修改 style标签 <stylelang="sass">就可以了。 通常使用npm安装会出现以下报错，安装失败。（网路问题） 可以通过淘宝的npm镜像安装node-sass，解决以上问题。 $ npm install -g cnpm --r...
效果图第一步安装插件npm install vue-i18n --save打开package.json 文件查看 vue-i8n第二步在assets文件下新建文件夹language包含 index.js,language-CN.js, language.EN.js 三个文件第三步 - 编写代码index.js 文件如下import Vue from ‘vue‘; import VueI18n from ‘vue-i18n‘; import enLocale from ‘./language-EN‘ import usLocal from ‘./language-CN‘ Vue.use(VueI18n); const messages = {en: {...enLocale},cn: {...
-组件的使用 <!-- 1、父组件中引入组件 import Home from "./components/Home"; 2、注册组件 components:{‘v-home‘:Home,}, 3、使用组件 <v-home></v-home> --> -路由及组件跳转<!--1、安装并保存npm install vue-router --save2、在main.js里引入并使用import VueRouter from ‘vue-router‘Vue.use(VueRouter)3、在main.js里路由配置 1.创建组件 引入组件 import Router from "./components/06...
vue关键知识强化：包括/deep/（深度选择器）、@click.native、属性绑定简化写法（v-bind）、attribute属性的绑定和多个prop的简化写法（$attrs）,v-model的含义，原生事件监听器（$listeners）等1./deep/（深度选择器）问题：vue组件中，在style设置为scoped的时候，里面在写样式对子组件是不生效的 解决：使用/deep/深度选择器可以使vue组件的style设置为scoped时，其相应的样式仍然对子组件生效（忽略scoped，具有穿透性） 示例：...
1.当前项目配置npm install vue-awesome-swiper --save2，在main.js中加入require(‘swiper/dist/css/swiper.css‘);import VueAwesomeSwiper from ‘vue-awesome-swiper‘Vue.use(VueAwesomeSwiper);3.当前页面引入 //弹出框的轮播swiperOptionM: {//以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/ // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化...
搭建vue环境1.去官网下载Nodejs，如果希望稳定的开发环境则下LTShttps://nodejs.org/en/download/ 2.安装好后win+r输入node -v查询是否安装成功，如下出现版本号即为成功 3.高版本的nodejs自带npm查询命令npm -v 4.安装镜像，以淘宝镜像为例子cmd -> npm install -g cnpm --registry=http://registry.npm.taobao.org安装完成后检验是否安装完成，运行cnpm -v查看版本 5.全局安装vue脚手架cmd -> npm install --g vue -cli 6.新...