个人学习vue的一些小技巧

安装vue

https://cn.vuejs.org/v2/guide/ vue官方说明网站
先安装git 安装node.js

创建一个新的Vue工程
cmd找到安装文件夹地址
npm install --global vue-cli 全局安装
vue -V 显示版本号
vue init webpack 【my-project】 （项目文件夹名）

npm run dev 启动项目

GIT的用法

git clone 拉取数据
git pull 更新数据
git add * 添加
git commit -m ‘xxx’ 单引号内为备注内容
git push 提交

添加插件

npm i --save ant-design-vue 安装ant-design-vue组件 （一款ui）https://vue.ant.design/docs/vue/introduce-cn/

这个文件为全局设置

全局引入ant-design-vue
import Antd from ‘ant-design-vue’
import ‘ant-design-vue/dist/antd.css’

Vue.use(Antd)

路径

vue的路径跳转与平常的html不同

需要在router文件夹里的index设置路径

比如

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',   //这里是浏览器上显示的后缀
      name: '登录页',  
      component: () =>
        import('@/components/login'),     //这里是对应当前文件的实际文件位置
    },
    ]
    })

跳转链接

<router-link to="/exit/chaxun 
          style="color:white; text-decoration: none;">表格查询</router-link>//相当于A链接 to后面跟的地址需要在index.js里面注册

{
            path: "/exit/chaxun",    //这里只是浏览器后缀 可自定义
            component: () =>
                import("@/home/zque")    //这里是对应当前文件的实际文件位置 引用方式和A标签差不多 @相当于../
          },

过滤器替换页面上不想显示的文本

某些时候我们不想显示全部数据 比如银行卡号只显示后4位
用这种方法 就可以只显示后4位了

{{cardNo | cardNofilter}}

//方法写在script里面
export default {
data() {
    return {
      cardNo:123456789123465789,
    };
  },
filters: {
cardNofilter(value) {
if (value) {
var reg = /.*(.{4})$/;
return value.replace(reg, "***************$1");}}},
}