《vue3从零搭建一个后台》(四)、项目的样式 及 Vue-router 和vuex的配置

配置环境的最后一环。

配置UI

这里选用了Element Plus，忽略掉项目样式的设计时间。用现成的。
Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。官方文档=>Elment Plus
使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm install element-plus --save   //npm 配置 淘宝源，下载效果更佳，百度教程
// -s  安装。项目必须包。

下载完成

进入入口文件main.js 引入它

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 路由
import store from './store' // vuex
// element 组件这里全部引入，也可定制按需引入，如只要button、table等用到的组件
import ElementPlus from 'element-plus'
// 所有组件相关的样式
import 'element-plus/lib/theme-chalk/index.css'
// 挂载
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

配置vue-router

这三个文件是启动时暂时的页面相关文件,也可以不删。留着。

删除项目创建自带的三个Vue文件

App.vue去掉注释部分