使用Mint-ui加vue2.0的小实战遇到的坑坑洼洼

我就是我 2022-11-21 04:10 121阅读 0赞

# 首先想项目中导入Mint-ui #

npm i mint-ui -S

![在这里插入图片描述][2020103011185391.png_pic_center]  
在脚手架中的main.js文件中导入

import MintUI from 'mint-ui'
    		Vue.use(MintUI);
    		import 'mint-ui/lib/style.css'

然后直接在APP.vue文件中进行组件使用

<mt-header title="信息管理系统"></mt-header>

# vue的router的两种使用 #

1.  使用钩子函数(编程式导航，更好地使用 r o u t e 和 route和 route和router)

//路由根据历史纪录返回
     his.$router.go(-1);

<router-view/>
    <div @click="change('Home')">

change(val){ 
          this.$router.push({ 
            name:val
          });
        }

在router的index.js中配置路由记得记得name属性一定一定要相同，引入组件相对路径

export default new Router({ 
      routes: [{ 
        path: '/',
        name: 'Home',
        component: Home
      }
    			]

1.  直接使用router-link  
    `<router-link :to="/new">`  
    记得在要和router中的path一样也可以写成name

# 全局过滤器和moment的使用 #

具体使用可以去官网看[直通车][Link 1]

1.  安装
    
        npm install moment --save
2.  在main.js引入，moment和filter一起使用  
    **moment.js处理日期过滤 `moment(日期对象).format(’yyyy-mm-dd'); // xxxx-xx-xx`**

import Moment from 'moment'
    Vue.filter('convertTime' , function(data,formatStr){ 
      return Moment(data).format(formatStr);
    })

1.  直接在组件的template中使用

<p>发表时间:{
       {Date.now()| convertTime('YYYY年MM月DD日')}}</p>

# 自己封装vue插件 #

1.  vue插件必须具备Install函数

function Installer () { 
        // 自身初始化行为
    }

Installer.install = function (Vue) { 
        // 接收Vue的构造函数，给原型挂载属性或注册全局组件或过滤器
        // console.log(Vue);
        
        // 1: 注册全局组件
        Vue.component('test',{ 
            template:`<h1>哈哈</h1>`
        });
        // 2: 挂载属性
        // Vue.protype.$log = function() { 
        // console.log('hahaahhahaah')
        // }
        // this.$log = 'abxadksadas' 子类对象可以修改父类的属性
    
        let log = function () { 
            console.log('我们自己插件的log函数')
        }
    
        // 给原型定义属性的获取和设置，设置:见鬼去吧，获取就给你
        Object.defineProperty(Vue.prototype,'$log',{ 
            // 设置 $log属性时的行为 || 不给，不能设置
            set:function (newV) { 
                console.log('你做梦');
                // log = newV;
    
            },     
            get:function () { 
                // 获取方式
                return log;
            }
        })
    
    
    
    }

1.  在main文件引入

// 引入 自己的插件安装器
    	import Installer from '@/plugins/installer';
    	Vue.use(Installer);

1.  使用  
    ![在这里插入图片描述][20201031141959990.png_pic_center]

[2020103011185391.png_pic_center]: /images/20221120/7c0b24c6d12d46d998d1d8cbe5ae973e.png
[Link 1]: http://momentjs.cn/
[20201031141959990.png_pic_center]: /images/20221120/903abc0d2641404e828bfb40d08d9e1c.png