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',
})