使用 Vue3.3+TypeScript+Vite+Pinia+Element Plus 搭建后台管理

1.搭建Vite项目

npm init vite@latest myapp
cd myapp
npm install
npm run dev

2.安装vueRouter

npm install vue-router@next --save

  配置挂载vuerouter

   在src目录下创建router文件夹，在文件夹下创建index.ts  （随便写了两个静态页面）

import { createRouter, Router, createWebHistory, RouteRecordRaw } from 'vue-router';
const history = createWebHistory()
const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: '/index',
        component: () => import('../pages/Layout.vue'),
        meta: {
            title: '首页'
        },
        children: [
            {
                path: '/',
                name: 'home',
                component: () => import("@/views/index1.vue"),
                meta: { title: "首页" }

            },
            {
                path: '/in2',
                name: 'home2',
                component: () => import("@/views/index2.vue"),
                meta: { title: "ceshi" }

            },
        ]
    },
];
const router: Router = createRouter({
    history: createWebHistory('/'),
    routes,
})
export default router

然后在main.ts挂载

将App.vue中内容替换 

<router-view />

 src下创建pages文件夹创建 Layout.vue

<template>
  <div class="common-layout">
    <el-container>
      <el-aside :width="commonStore.isCollapse?'60px':'260px'">
        <Menu></Menu>
      </el-aside>
      <el-main class="right">
        <Header></Header>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>

</template>

<script setup lang="ts">
import Header from "@/components/Header/Header.vue";
import Menu from "@/components/Menu/Menu.vue";
import { common } from "@/store";
const commonStore = common();
</script>

<style scoped lang="scss">
.common-layout {
  width: 100%;
  height: 100vh;
  .right {
    padding: 0;
    background: #24313a;
    color: #fff;
  }
}
.el-aside {
  // 侧边栏折叠动画速度
  transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -moz-transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -o-transition: width 0.25s;
}
</style>

3.安装Sass

npm install --save-dev sass
就这么一句安装就可以使用了，用vuecli的时候，还要安装sass-loader、node-sass等，但是vite只需要安装sass就可以了

 4.安装Pinia

npm install pinia@next
npm install pinia-plugin-persistedstate（数据持久化）

配置挂载pinia

在src目录下创建store文件夹并创建index.ts

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

export function setupStore(app: any) {
  app.use(createPinia().use(piniaPluginPersistedstate))
}

export * from './modules'

 然后store文件夹下创建modules文件夹再创建index.ts

export * from './common'

然后modules下创建common文件夹再创建index.ts

import { defineStore } from 'pinia'
export const common = defineStore('common', {
    state() {
        return {
            isCollapse: false,
        }
    },
    getters: {

    },
    actions: {
        editCollapse() {
            this.isCollapse = !this.isCollapse
        },
    },
    persist: true,
})

挂载：找到main.ts

使用案例

//引入
import { common } from "@/store";
const commonStore = common();

//使用
commonStore.isCollapse
commonStore.editCollapse()

整体目录

 

 5.安装 Element Plus

npm install element-plus --save

挂载找到main.ts

 

题外：

配置vite @引入文件

1.在vite.config.ts写入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },

})

 修改tsconfig.json在compilerOptions中添加

"baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },

2.总目录创建 .env.development 和 .env.production  一个生产环境一个开发环境

使用案例

# 页面标题
VITE_TITLE =小桥流水人家管理系统（开发版）

 页面使用

const state: any = reactive({
  title: import.meta.env.VITE_TITLE,
});