Vue的安装以及相关插件（axios，vuex...）

1. 安装脚手架（vue/cli命令行接口工具）command line interface

1. 安装脚手架（vue/cli命令行接口工具）command line interface
第一步：npm i -g @vue/cli      -- 全局安装vue
第二步：vue create vue_test    -- 创建项目

备注：要想看webpack配置，命令行输入：vue inspect > output.js后可以看output.js文件内容

2. 安装less
npm i less-loader@7     -- webpack5可以使用最新less，4的版本建议使用4-7版本的less-loader



// 以下是可选插件， 可根据实际需求进行安装

3. 可以安装pubsub-js（发布与订阅模式）
npm i pubsub-js

// 使用（兄组件）：
import pubsub from 'pubsub-js';
mounted() {
    // 订阅
    this.subId = pubsub.subscribe('demo', (msgName, ...props) => {
        // msgName是消息的名字， 后面的参数才是我们传过来的
        console.log(props, '接收的参数')

        // 这里的this是VueComponent的实例对象
    });
}
beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
}

// 弟组件
handleClick() {
    pubsub.publish('demo', '张三', 18);
}


// 4. vue动画库animate.css
npm i animate.css
使用：
import 'animate.css';

<template>
    <div>
        <!-- appear 过渡出现 -->
        <transiton-group
            name="animate_animated animate_debounce"
            appear
            enter-active-class="animate_swing"
            enter-leave-class="animate_backOutUp"
        >
            <h1 key="1">你好啊</h1>
            <h1 key="2">欢迎来到我的博客</h1>
        </transiton-group>
    </div>
</template>

2. 安装axios并进行接口请求

// axios安装与使用
npm i axios
import axios from 'axios';

mounted() {
    axios.get('http://www.baidu.com').then(
        response => {
            // 输出后端返回的数据
            console.log(response.data);
        },
        error => {
            console.log(error);
        }
    );
}

3. 安装vuex插件（如何使用可看我的博客：vuex使用）

1. 安装vuex, 如果是vue2那么安装vuex@3, 如果是vue3那么安装vuex@4, 且Vue.use必须先执行后才能执行new Vuex.store, 否则控制台会报错
npm i vuex

2. 在src下创建vuex文件夹，然后创建store.js文件（官方用的是在src下创建store文件夹，然后创建index.js文件，两个都可以），最后在main.js使用

2.1：store.js代码：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); // Vue.use必须先执行后才能执行new Vuex.store, 否则控制台会报错

const actions = {}

const mutations = {}

const state = {}

const store = new Vuex.Store({
    actions,
    mutations,    
    state
});

export default store;

2.2：main.js代码：
import Vuex from 'vuex';
import store from './store';

// Vue.use(Vuex); 不在这里使用，Vue.use必须先执行后才能执行new Vuex.store, 否则控制台会报错

new Vue({
    el:'#app',
    render: h => h(App),
    store,
    beforeCreate() {
        Vue.prototype.$bus = this;
    }
});