❤ Vue3项目搭建系统篇（二）
1、安装和配置 Element Plus（完整导入）
yarn add element-plus --save
main.ts中引入：
// 引入组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(createPinia()).use(ElementPlus)
app.mount('#app')
测试使用效果：
<el-button type="primary">Primary</el-button>
你的main.ts完整应该如下
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
// 挂载router
import router from "./router/index" // 引入router
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(createPinia()).use(ElementPlus).use(router).mount('#app') //挂载
2、安装使用axios
安装
yarn add axios
3、进度条NProgress配置：
使用nprogress实现全局loading进度条
yarn add nprogress
- 自定义NProgress进度条
import NProgress from "nprogress";
import "nprogress/nprogress.css";
NProgress.configure({
// 动画方式
easing: "ease",
// 递增进度条的速度
speed: 500,
// 是否显示加载ico
showSpinner: false,
// 自动递增间隔
trickleSpeed: 200,
// 初始化时的最小百分比
minimum: 0.3
});
export default NProgress;
- 引入和使用
import NProgress from "../progress";
NProgress.start() //使用
NProgress.done() //停止
