vue3 快速搭建项目

创建项目

此步骤省略，跟 vue2 的创建步骤一样，只是版本需选择 vue3 即可

安装依赖

yarn add element-plus axios moment js-cookie

导入依赖

在 main.js 中

.
.
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

createApp(App).use(store).use(router).use(ElementPlus).mount("#app");

使用组件

在 src/views/HomeView.vue 中

<template>
  <div class="home">
    <el-button type="primary">Primary</el-button>
  </div>
</template>

<script>
export default {
     
  name: "HomeView",
};
</script>

CSS 文件

新建 src/styles/common.scss 文件

a {
  color: #1f99b0;
  text-decoration: none;
}

.clear:after {
  display: block;
  content: "clear";
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.thumb {
  max-height: 65px;
  max-width: 120px;
}

.gray {
  background: #e6e8ec;
}

新建 src/styles/element-ui.scss 文件

.el-menu-item.is-active {
  color: #1f99b0 !important;
}

.el-switch.is-checked .el-switch__core {
  border-color: #1f99b0 !important;
  background-color: #1f99b0 !important;
}

.el-button--primary {
  color: #fff !important;
  background-color: #1f99b0 !important;
  border-color: #1f99b0 !important;
}

.el-menu-item:focus, .el-menu-item:hover {
  background-color: #e1f0f0 !important;
}

.el-submenu__title:hover {
  background-color: #e1f0f0 !important;
}

.el-tag {
  background-color: #e1f0f0;
  border-color: #e1f0f0;
  color: #1f99b0;
}

.el-button.el-button--default:focus, .el-button.el-button--default:hover {
  color: #1f99b0;
  border-color: #dcdef6;
  background-color: #e1f0f0;
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: #1f99b0;
  background: #1f99b0;
}

.el-radio__input.is-checked + .el-radio__label {
  color: #1f99b0;
}


.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #1f99b0;
  border-color: #1f99b0;
}

.el-button--text{
  color: #1f99b0;
}

.el-button--text:focus, .el-button--text:hover {
  color: #1f99b0;
  text-decoration: underline;
}

.el-input.is-active .el-input__inner, .el-input__inner:focus {
  border-color: #1f99b0;
  outline: 0;
}

.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
  color: #1f99b0;
}

.el-radio__inner:hover {
  border-color: #1f99b0;
}

.el-aside {
  width: 200px;
}

新建 src/styles/layouts.scss 文件

html, body {
  height: 100%;
  margin: 0;
}

#app {
  height: 100%;
}

.el-container, .el-aside, .el-aside .el-col, .el-menu {
  height: 100%;
}

.el-header, .el-footer {
  background-color: #e1f0f0;
  color: #333;
  height: 60px;
  line-height: 60px;
}

.el-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;

  .logo {
    height: 40px;
    margin-top: 10px;
    float: left;
  }

  h1 {
    margin: 0 0 0 20px;
    font-size: 18px;
    font-weight: normal;
    float: left;
    line-height: 60px;;
  }
}

.el-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 2;
  text-align: center;
}

.el-aside {
  position: fixed;
  top: 60px;
  width: 100%;
  z-index: 2;
  background-color: #e1f0f0;
  color: #333;
  line-height: 200px;
}

.el-main {
  color: #333;
  overflow: visible;
  margin: 60px 0 0 200px;
  padding-bottom: 80px;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 20px;

  span {
    margin-left: 10px;
  }
}

新建 src/styles/index.scss 文件

@import './common.scss';
@import './element-ui.scss';
@import './layouts.scss';

布局模板

新建 src/views/layouts/components/NavBar.vue 组件

<template>
  <el-header>