Element UI

Element UI安装

npm install element-ui --save

全局引入

//main.js
import ElementUI from 'element-ui';
// 单独引入样式文件
import 'element-ui/lib/theme-chalk/index.css';

// 执行 ElementUI
Vue.use(ElementUI);

按需引入

1.安装 babel-plugin-component 插件

 npm install  babel-plugin-component -D

2.babel.config.js文件修改

修改为

module.exports = {
  presets: ['@vue/app', ['@babel/preset-env', { modules: false }]],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk',
      },
    ],
  ],
};

3.main.js引入

import { Button, Select, Option } from 'element-ui';

// 执行引入的样式组件
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
Vue.component(Option.name, Option);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 * Vue.use(Option)
 */

Vant UI

安装

# Vue 3 项目，安装最新版 Vant
npm i vant

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

官方推荐按需引入插件

1.引入 Vant 组件的 babel 插件 babel-plugin-import

npm i babel-plugin-import -D

2.根目录下新建 babel 配置文件 babel.config.js（babel7）

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true,
      },
      'vant',
    ],
  ],
};

3.main.js 引入 Vant

import { Button } from 'vant';

Vue.use(Button);

4.使用

<template>
  <div class="home">
   <van-button type="primary">默认按钮</van-button>
  </div>
</template>

Vue-router

1.下载插件

//vue2
npm install vue-router@3

2.main.js引入

import VueRouter from 'vue-router'

3.router/index.js配置路由

import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

4.引入路由器

//引入Vue
import Vue from 'vue'
import VueRouter from 'vue-router'

import router from './router'

//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

Vuex

1.Vuex下载

npm install vuex --save

2.配置store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {

}
//准备mutations——用于操作数据（state）
const mutations = { 

}
//准备state——用于存储数据
const state = {

}

//创建并暴露store
export default new Vuex.Store({
	actions, 
	mutations,
	state,
})

3.main.js引入store

//引入store
import store from './store/index'
new Vue({
	el:'#app',
	render: h => h(App),
	store,
})

全局事件总线

1.安装全局事件总线

//main.js
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线
	}, 
})

2.传递数据

this.$bus.$emit('hello',this.name)

3.接收数据

mounted() {
	// console.log('School',this)
	this.$bus.$on('hello',(data)=>{
		console.log(data)
	})
},
beforeDestroy() {
	this.$bus.$off('hello')
},

消息订阅与发布

1.安装pubsubjs

npm i pubsub-js

2.在组件中订阅消息

组件中引入

import pubsub from "pubsub-js"

mounted() {
	//订阅
	this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
		console.log(this)
	})
},
beforeDestroy() {
	// 取消订阅
	pubsub.unsubscribe(this.pubId)
},

3.传递数据的组件中发布消息

组件中引入

import pubsub from "pubsub-js"

methods: {
	sendStudentName(){
		//发布
		pubsub.publish('hello',666)
	}
},