标签： vue

【最近有点忙干货很多，慢慢来写】

有时候我们单页项目不一定要部署在根目录下，二级目录可能是您想要的，那么看下面步骤

1. 入口文件index.html文件修改

添加 <meta base=”/ weixin/”>

2. config/index.js文件修改

修改 assetsPublicPath: ‘/weixin/’

3.src/router/index.js文件修改

添加 base: ‘/weixin/’

最后 Nginx配置修改

server {
 listen 9900;
 server_name localhost;
 location /lend {
     try_files $uri $uri/ /weixin/index.html;
 }
 }

前言

第三方qq登录我们可以直接利用qq登录的JSdk很方便

文档说明：http://wiki.open.qq.com/wiki/website/JS_SDK%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E

示例代码文档：https://connect.qq.com/intro/login/jssdk-demo

流程

在vue入口index.html中头部引入qq的sdk，在其他页面钩子函数中即可使用qqskd的函数

qq登录流程比较简单，我就稍微说一下

1.在vue页面上点击qq登录跳转到授权页面

2.授权成功后进入回调页面

3.回调页面可以执行一下自己的逻辑，我这边回调页面弄得是后台页面，你也可以是前端的，回调中处理完自己逻辑后可以回跳回来

4.然后在页面中就可以检测到qq是否登录了，看下面代码

created(){
   this.test(this.code)
   this.testqq()
},
methods:{
   testqq(){
      if(QC.Login.check()){  //如果已登录
          //这里做自己逻辑处理
         });
      }

   }
}

第一步:安装

npm install moment --save 

第二步:在main.js中引用

import moment from 'moment/moment'

第三步:在main.js中添加过滤器

Vue.filter('moment', function (value, formatString) {
    formatString = formatString || 'YYYY-MM-DD HH:mm:ss';
    // return moment(value).format(formatString); // value可以是普通日期 20170723
    return moment.unix(value).format(formatString); // 这是时间戳转时间
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

第四步: 在vue页面中使用过滤器

<template>
  <div id="app">
      <div>
        {{ datetime | moment }}
      </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      datetime: '1500799859'
    }
  }
}
</script>

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'EntryConfirmation',
      meta: { title: "到岗候选人名单确认" },
      component: EntryConfirmation
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.meta.title) {//如果设置标题，拦截后设置标题
    document.title = to.meta.title
  }
  next()
})

export default router

今天在做项目时候，用到了 elementUI 的 Message 组件。因为我是按需 import 引入的方法，结果按照原本的文档API代码不生效。

查看文档之后有俩种引入方法：

全局引入

import ElementUI from ‘element-ui’;

Vue.use(ElementUI);

按需引入

import { Button, Select } from ‘element-ui’;

Vue.use(Button)

Vue.use(Select)

简答来说，如果是全局引入的话，就可以直接使用this.$message，但是按需引入的话能不能像全局引入一样用 this.$message 呢？

问题原因及解决：

查看下 element-ui/package/message/index.js 的实现方法，结果发现：

import Message from './src/main.js';
export default Message;

直接返回了。

而其他的组件，一般都是有 install 方法供Vue来操作的。

知道问题所在就好解决了，给 Message 添加 install 方法就行了。

// 和其他组件一样，一并引入
import {Button, Message} from 'element-ui'

// 在调用 Vue.use 前，给 Message 添加 install 方法
Message.install = function (Vue, options) {
  Vue.prototype.$message = Message
}

// 和所有组件一样，一并进行use
Vue.use(Button)
Vue.use(Message)

当然，也可以不用 Vue.use 来实现，比如直接写在 Vue 实例上：

// 和其他组件一样，一并引入
import {Button, Message} from 'element-ui'

Vue.use(Button)

// 将 Message 直接挂在 Vue 实例上
Vue.prototype.$message = Message