一、Vue3 + Element-plus 搭建后台管理系统之项目搭建并运行

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

一、Vue3 + Element-plus 搭建后台管理系统之项目搭建并运行

1.1 使用@vue/cli创建项目

1.安装依赖

    // 推荐使用yarn命令
    // 全局安装yarn
    npm install -g yarn
    
    // 全局安装
    npm install -g @vue/cli
    # OR
    yarn global add @vue/cli

    // 查看版本
    vue --version 

2.创建项目

• vue-admin-ms是项目名称。

    vue create vue-admin-ms

• 选择Vue3版本的默认安装，然后回车。

• 自动拉取相关文件，并安装依赖。

• 根据提示进入vue-admin-ms文件夹内，使用yarn serve命令启动项目。

• 项目启动成功，打开浏览器输入网址：http://localhost:8080/

1.2 此项目目录解析

├── public                   # 静态资源
├── server                   # 服务端代码
├── src                      # 源代码
    ├── api                  # 请求
    ├── assets               # 资源
    ├── components           # 组件
    ├── directives           # 指令
    ├── icons                # svg图标
    ├── router               # 路由
    ├── store                # 全局状态vuex
        └── index.js         # vuex 入口文件
    ├── utils                # 公用方法
    ├── views                # 页面
    ├── App.vue              # 页面入口
    ├── main.js              # 文件入口、加载组件等
    └── permission.js        # 权限管理
├── .env.development         # 开发环境变量配置
├── .env.production          # 生产环境变量配置
├── .gitignore               # git相关配置
├── babel.config.js          # babel编译器配置
├── jsconfig.json            # js配置文件
├── package.json             # npm 相关配置
├── README.md                # 说明文件
└── vue.config.js            # vue-cli 配置

1.3 使用element-plus的UI库

1.安装

npm install element-plus
# OR
yarn add element-plus

2.全局引入

# main.js

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus) // 引入UI库 element-plus
app.mount('#app')

1.4使用vuex

1.安装

npm install vuex
# OR 
yarn add vuex

2.使用

# store/index.js

import { createStore } from 'vuex'

export default createStore({
    state:{}, // 状态
    getters:{}, // 计算属性
    mutations:{}, // 更改vuex状态的唯一方法
    actions:{}, // 提交mutations，不直接变更状态
    modules：{} // 模块
})

3.引入

# main.js

import store from '@/store'

const app = createApp(App)
app.use(store) // 引入vuex
app.mount('#app')

1.5 使用vue-router

1.安装

npm install vue-router@4
# OR
yarn add vue-router@4

2.使用

# router/index.js

import { createRouter } from 'vue-router'
export default createRouter({
  routes: [
    {
        path: "/",
        redirect: '/xxx',
        component: () => import("@/views/xxx"),
        children: [
          {
            path: "/xxx",
            name: 'xxx',
            meta: {
              title: "xx",
              icon: "xxx"
            },
            component: () => import("@/views/xxx/xxxx"),
          }
        ]
    },
    ...
  ]
})

3.引入

# main.js

import router from '@/router'

const app = createApp(App)
app.use(router) // 引入vue-router
app.mount('#app')

1.6 创建页面

# views/Home.vue

<template>
  <div class="cont">
     <h2 class="massgae">{{ msg }}</h2>
  </div>
</template>

<script>
export default {
  name: "HomePage",
  data(){
     return {
        msg:'这里是首页！！！',   
     }
  }
};
</script>

<style scoped>
.cont {
  width:100%;
  height:100%;
}
.cont .massgae {
  color:#333;
  font-size:14px;
}
</style>

1.7 路由切换

1.创建页面Bar.vue和Sctter.vue

    # views/echarts/Bar.vue

    <template>
      <div class="cont">
         <h2 class="massgae">BarPage</h2>
      </div>
    </template>

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

    # views/echarts/Sctter.vue
    
    <template>
      <div class="cont">
         <h2 class="massgae">SctterPage</h2>
      </div>
    </template>

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

2.添加路由配置

# router/index.js

import { createRouter, createWebHistory } from 'vue-router'
const routes = [{
    path: "/echarts",
    name: 'echarts',
    redirect: '/echarts/bar',
    component: () => import("@/views/Home"),
    meta: {
      title: "ECharts 图表",
      icon: "echarts"
    },
    children: [
      {
        path: "/echarts/bar",
        name: 'bar',
        meta: {
          title: "饼图",
          icon: "bar"
        },
        component: () => import("@/views/echarts/Bar"),
      },
      {
        path: "/echarts/sctter",
        name: 'sctter',
        meta: {
          title: "散点图",
          icon: "sctter"
        },
        component: () => import("@/views/echarts/Sctter"),
      }
    ]
  }]
  
export default createRouter({
  routes: routes
})

3.使用

    # App.vue

    <template>
      <div class="main">
        <!-- 显示与 url 对应的组件：对应第一层级 -->
        <router-view></router-view>
      </div>
    </template>

# Home.vue

<template>
    <div class="main">
        <router-link :to="/echarts/bar">BarPage</router-link>
        <router-link :to="/echarts/sctter">SctterPage</router-link>
    </div>
    <div class="body">
        <!-- 显示与 url 对应的组件：对应第二层级 -->
        <router-view></router-view>
    </div>
</template>