vue3+element-plus+pinia 后台基础搭建1. 安装模板 vue-ts 模板 2. 运行项目 3. 目

1. 安装模板

vue-ts 模板

yarn create vite vue3-admin --template vue-ts

2. 运行项目

yarn # 安装依赖
yarn dev --host # 运行

3. 目录整理

4. 安装插件

4.1 路由

4.1.1 安装

npm install vue-router@4

4.1.2 使用路由

创建页面 views/login/index.vue,views/index/index.vue
配置路由

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
import IndexRoutes from "./module/index"

const routes: Array<RouteRecordRaw> = [
    {
        path: "/login",
        name: "登录",
        component: () => import("@/views/login/idnex")
    },
    ...IndexRoutes
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

引用路由，修改 src/main.ts

import { createApp } from "vue"
import App from "./App.vue"
import router from "./router/index"

createApp(App).use(router).mount("#app")

修改 src/App.vue

<template>
    <router-view />
</template>

重新运行项目
报错处理1 找不到 'path' 模块或其相对应得类型声明

npm i @types/node

报错处理2

修改 src/router/index.ts，给导入的组件加上后缀 .vue

component: () => import("@/views/login/index.vue")

检查路由，发现是引入组件的路径出错，修改

component: ()=> import("@/views/login/index.vue)

路由使用成功！

4.2 组件库 `element-plus`

4.2.1 安装

npm i element-plus

4.2.2 使用

配置按需导入官方文档
页面 views/login/index.vue 中使用

<template>
    <div>
        <el-button type="primary">登录</el-button>
    </div>
</template>

查看效果

element-plus 按需导入及测试成功！

4.3 数据存储 `pinia`

4.3.1 安装

npm i pinia

4.3.2 使用

在 src/main.ts 配置

import { createApp } from 'vue'
import App from "./App.vue"
import router from "./router/index"
import { createPinia } from "pinia"

createApp(App)
    .use(router)
    .use(createPinia())
    .mount("#app")

创建 store

// src/stores/module/login.ts
import { storeNode } from "../index.d"

const loginStore: storeNode =  {
    name: "login",
    store: {
        // 形如组件的 data
        state: ()=> ({
            name: "露水晰",
        }),
        getters: ()=> {

        },
        // 同步&异步
        actions: {
            setName(params:object) {
                console.log("设置名称", params, this)
            }
        },

    }
}

export default loginStore

这里处理了下...，使用函数形式创建 store，因为每一个 store 格式都一样，这里做了统一处理

// stores/index.js
import { defineStore } from "pinia"
import storesModule from "./module/index"

const defaultSuffix = "Store"

let storesObj = {}

storesModule.forEach(item => {
    if(item) {
        const temp = item.name+defaultSuffix
        storesObj[temp] =  defineStore(temp, item.store)
    }
})

export default storesObj

引用 store，views/login/index.vue

<template>
    <div>
        <el-button type="primary">登录</el-button>
    </div>
</template>

<script lang="ts">
import store from "@/stores/index"

export default {
    setup() {
        console.log("store", store.loginStore())
        console.log("store.name", store.loginStore().$state.name)
    }
}
</script>

到这里，说明 pinia 安装且试用成功！

5. HTTP工具 axios

5.1 安装

npm i axios

5.2 简单封装

// src/sutils/request
import Axios from "axios"
import { getSSOConfig } from "./apiConfig"

const baseURL = getSSOConfig.frontedPrefix
const timeout = 600000 // 请求超时3s

const request = Axios.create({
    baseURL,
    timeout
})

// 前置拦截器（发起请求之前的拦截）
request.interceptors.request.use(
    (response) => {
        return response
    },
    (error) => {
        return Promise.reject(error)
    }
)

// 后置拦截器（获取到响应时的拦截）
request.interceptors.response.use(
    (response) => {
        return response
    },
    (error) => {
        // 对异常报错的处理
        console.log("error", error)
        return Promise.reject(error)
    }
)

export default request

6. 集成 CSS 与编辑器 `sass/less`

6.1 安装

npm i sass -D
or
npm i less -D

6.2 使用

// views/login/index.vue
<template>
    <div class="page">
        <div class="page-title">露水晰</div>
        <el-button type="primary">登录</el-button>
    </div>
</template>

<style lang="scss" scoped>
.page {
    &-title {
        color: green;
        text-align: center;
    }
}
</style>

7. 布局

结合项目特点进行布局页面开发

总结

至此一个 vue3+element-plus+pinia 后台就搭建成功了，可以进行后续的开发了~

vue3+element-plus+pinia 后台基础搭建