安装各种依赖&使用方法【汇总】

Vue的各种依赖安装

elememt依赖

• npm install element-plus --save --legacy-peer-deps
• main.js引入

import { createApp } from 'vue'
import App from './App.vue'
//引入插件
import ElementPlus from 'element-plus';
//引入css文件
import 'element-plus/theme-chalk/index.css'

createApp(App).use(ElementPlus).mount('#app')

axios依赖

• npm install axios -S --legacy-peer-deps
• npm install vue-axios -S --legacy-peer-deps
• main.js引入

//引入axios
import axios from 'axios';
//引入vue-axios
import VueAxios from 'vue-axios';
createApp(App).use(ElementPlus).use(VueAxios, axios).mount('#app')

• 使用

<script>
const axios = require('axios');
export default {
    setup(){
		const register = () =>{
		   axios.post("http://localhost:3000/user/register", {
		        username: username.value,
		        password: password.value,
		        checkpassword: checkpassword.value,
		    })
		    .then(function (response) {
		        console.log(response);
		    })
		    .catch(function (error) {
		        console.log(error);
		    });
	    }
}
</script>

router路由依赖

• npm install vue-router@4 --legacy-peer-deps
• 创建router.index.js

import { createRouter,createWebHistory } from 'vue-router';
import LoginView from '@/views/user/LoginView.vue' 
import RegisterView from '@/views/user/RegisterView.vue' 
import DetailView from '@/views/detail/DetailView.vue'
const routes = [
    {
        path:'/',
        name:"login",
        component:LoginView,
    },
    {
        path:'/register',
        name:"register",
        component:RegisterView,
    },    
    {
        path:'/detail',
        name:"detail",
        component:DetailView,
    },

]

const router = createRouter({
    history: createWebHistory(),
    routes
  })

export default router  

icon依赖

• npm install @element-plus/icons-vue --legacy-peer-deps
• main.js引入

//各种icon
import * as Icons from '@element-plus/icons-vue' 
const app = createApp(App)
// 通过遍历的方式注册所有 svg组件，会牺牲一点点性能
for (let i in Icons) {
    app.component(i, Icons[i])
} 

使用方法

<el-icon :size="30" color=red><CaretRight /></el-icon>

使用全局变量store的依赖

• 安装vuex:npm install vuex --save --legacy-peer-deps
• main.js引入

//引入全局变量store
import store from './store'
app.use(store).mount('#app')

使用方法

import { useStore } from 'vuex'

const store = useStore();
store.commit("updateToken",jwt_token)
store.dispatch("getinfo",{//调用action
                success(){
                    router.push({name:"admin"})
                }
            })

如何使用ElMessage提示框

import { ElMessage } from 'element-plus'

ElMessage({
    showClose: true,
    message: '',
    type: 'success',
})