vue學習日記：iview組件庫的使用

首先安裝iview:

npm install iview --save

在main.js中引入iview:

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'; import App from './App'; import router from './router'; import iView from 'iview'; import 'iview/dist/styles/iview.css'; Vue.use(iView); Vue.config.productionTip = false; /* eslint-disable no-new */
new Vue({ el: '#app', router, components: { App }, template: '<App/>' })

在login.vue中使用iview:

<template>
    <div>
        <input type="text" class="username" v-model="params.username">
        <input type="password" class="password" v-model="params.password">
        <button @click="login(params)">login</button>
        <Button @click="open(true)">Open notice(only title)</Button>
    </div>
</template>

<script> import loginService from '@/service/login.service' export default { name: "login", data () { return { params: { username:"", password:"", }, } }, methods: { login: function (params) { loginService.login(params).then(res => { if(res){ console.log(res); } }); }, open (nodesc) { console.log(this); this.$Notice.open({ title: 'Notification title', desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. ' }); } } }; </script>

<style scoped>

</style>

點擊open按鈕，便可看到效果。