学习vue小记

vscode全部缩放先按下 ctrl 和 K，再按下 ctrl 和 0 ; ( 注意这个是零，不是欧 )

先按下 ctrl 和 K，再按下 ctrl 和 J

首先需要安装node

然后安装cnpm（淘宝镜像-能提升安装组件的时间）（需要先安装node）

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装脚手架

npm install -g @vue/cli

安装依赖

cnpm install

安装蚂蚁金服的组件

npm i --save ant-design-vue

本地运行程序(已经安装了淘宝镜像可以用cnpm 不然还是用npm)

cnpm run serve
或
cnpm run dev

从 GitHub 仓库中直接安装最新的脚手架代码。

git clone --depth=1 https://github.com/sendya/ant-design-pro-vue.git my-project

在控制台中进入文件

CD my-project

构建打包（会在根目录生成 dist 文件夹）

cnpm run build

--------------------------

App.vue 页面入口文件
main.vue 程序入口文件
permission.js 许可
components 组件

vue路由转跳

this.$router.push({ name: ‘index’ , query: {id: id}})

this.$router.push({ path: ‘index’,query: {id: 1,index:0}})

vue重定向（跳转过去后按返回键不会回来）

this.$router.replace({ path: ‘index’,query: {id: 1,index:0}})

转跳会加载mounted

this.$router.fullpath({ path: ‘index’,query: {id: 1,index:0}})

从页面接收参数（获取转跳传来的参数）

id: this.$route.query.id

刷新页面

window.location.reload();

页面转跳

window.location.href=‘URL’

或（但是下种方法在ios里不会刷新）

this.$router.go(0);

vant组件的提示

Toast.success(‘成功文案’);
Toast.fail(“失败文案”)

// 延迟触发
setTimeout(() =>{
this.$router.go(-1)
},1000);

vue选取本地图片（@指向src 在vue.config.js中配置）

require(’@/assets/newimages/smllogo.png’)

vue移动项目中点击手机号码就可以打电话

1.在vue项目的index.html中添加如下代码

<meta name="format-detection" content="telephone=yes" />

2.在需要调起手机拨号功能的页面，写如下函数：

// 调用拨号功能
callPhone (phoneNumber) {
    window.location.href = 'tel://' + phoneNumber
}

vue的input组件双向绑定的值为v-model（在input里绑定了change）

v-bind只绑定组件已有属性

要修改根目录的绝对路径 在router和 vue.config.js里修改

baseUrl: process.env.NODE_ENV === ‘production’ ? ‘/phone/dist/’ : ‘/’,

制作复制黏贴版（vue） Vue中安装插件一定要加上 --save

vue引入组件

npm install vue-clipboard2 --save

在页面中引入

import VueClipboard from “vue-clipboard2”;

在components中创建

然后在按钮上定义方法

<div :data-clipboard-text="info.text" class="tag-read" @click="copy" >{{info.text}}</div>

创建方法

import Clipboard from ‘clipboard’
[Clipboard.name]: Clipboard,

copy(){
  var clipboard = new Clipboard('.tag-read')
    clipboard.on('success', e => {
      console.log('复制成功')
      // 释放内存
      clipboard.destroy()
    })
    clipboard.on('error', e => {
      // 不支持复制
      console.log('该浏览器不支持自动复制')
      // 释放内存
      clipboard.destroy()
    })
},

定义接口（在api/index.js)

export const getMemberInfo = ({id}) => {
	return request({
		url: '/wap/member/get_member_info',
		method: 'POST',
		data:{
			id
		}
	})
}

实现接口(语法糖)

async requestGetMemberInfo(params) {
  try {
    const res = await getMemberInfo(params);
    return res;
  } catch(error) {
    console.log(error)
  }
},

使用接口

let params={
	id : this.id
}
this.requestGetMemberInfo(params)
.then(res => {
  if (res.errcode === 1) {
    
  } else {
    console.log(res.errmsg)
  }
})
.catch(err => {
  console.log(err)
})