站在Vue3上-构建管理系统vue-vite-admin-ts(一)

简介: 站在Vue3上-构建管理系统vue-vite-admin-ts(一)

新建项目



既然出发点奔着vite,当然我们得先安装vite


Vite 需要 Node.js 版本 >= 12.0.0


# 安装vite
npm init vite@latest 
# npm 6.x
npm init vite@latest my-vue-app --template vue # 拉取模板 -- 官网提供更多模板选择
# npm 7+, 需要额外的双横线:
npm init vite@latest my-vue-app -- --template vue # 拉取模板 -- 官网提供更多模板选择


官方文档-如何安装vite


项目安装完成后,在package.json中会出现三条我们所常见配置命令


{
    "scripts": {
        "dev": "vite",
        // 启动开发服务器,别名:`vite dev`,`vite serve`
        "build": "vite build",
        // 为生产环境构建产物
        "preview": "vite preview"
        // 本地预览生产构建产物
    }
}


启动服务


# 安装依赖
npm install 
# 启动服务
npm run dev


上述不出意外的出现端口3000的端口,即访问 http://localhost:3000/


项目地址


GitHub


项目预览


在线预览


image.png

构建布局



src/main.js


import {createApp} from 'vue'
import App from './App.vue'
import router from '@/packages/router'
import setupInit from '@/packages/base/index'
import mitt from "mitt";
const app = createApp(App)
app.provide("$mitt", mitt());
setupInit(app)
router.isReady().then(() => {
    app.mount('#app')
})


  • mitt 是全局通信就是取代Vue2的EventBus,是一个体积极小的第三方消息发布/订阅式JavaScript库 官方文档是与框架无关的,所以这个React、Vue都可以用


最终布局文件请看packages/layout/index.vue


<template>
    <a-layout style="height: 100%">
        <Slider/>
        <a-layout :style="{marginLeft}" class="layout" :class="layoutClassName">
            <HeaderTop/>
            <HeaderProcess/>
            <LayoutContainer/>
        </a-layout>
    </a-layout>
</template>
<script lang="ts">
import {defineComponent, computed} from 'vue';
import Slider from './slider.vue'
import HeaderTop from './headerTop.vue'
import HeaderProcess from './headerProcess.vue'
import LayoutContainer from './layoutContainer.vue'
import {themeHook} from '@/packages/hook'
import {useStore} from "vuex";
export default defineComponent({
    components: {
        Slider,
        HeaderTop,
        HeaderProcess,
        LayoutContainer
    },
    setup() {
        const {layoutClassName} = themeHook()
        const store = useStore();
        const marginLeft = computed(() => store.state.app.themeConfig.menuMaxWidth + 'px')
        return {
            layoutClassName,
            marginLeft
        }
    }
});
</script>


路由介绍



Vue Router4 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括:


  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码


具体文件请看packages/router/index.ts


import {createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw, RouterOptions} from 'vue-router'
import {routerMode} from '@/packages/config';
import {App} from 'vue';
import {setupRouterGuard} from '@/packages/router/guard'
import {setupBeforeStore} from "@/packages/router/beforeStore";
import {setAddRoute} from '@/packages/router/addRoute'
// 定义路由
const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        name: "admin",
        component: () => import('@/packages/layout/index.vue'),
        children: [
            {path: '', redirect: 'home'},
            {
                path: '/home', name: 'home', meta: {title: '首页'},
                component: () => import('@/packages/views/home/index.vue')
            },
        ]
    },
    {
        path: "/login", name: 'login', meta: {title: '登录'},
        component: () => import('@/packages/views/login/index.vue'),
    },
    {
        path: "/test", name: 'test', meta: {title: '测试页面'},
        component: () => import('@/packages/views/test/index.vue'),
    },
    {
        path: '/404',
        component: () => import('@/packages/views/error/404.vue'),
    },
    {
        path: '/:catchAll(.*)*', // 不识别的path自动匹配404
        redirect: '/404',
    },
]
// 实列化router
const router = createRouter({
    history: routerMode === 'history' ? createWebHistory() : createWebHashHistory(),
    routes
})
router.beforeEach((to: any, from: any, next: any) => {
    setupBeforeStore()
    setupRouterGuard(to, from, next)
});
const setupRouter = (app: App) => {
    setAddRoute(app, router)
    app.use(router)
}
export default router;
export {
    setupRouter
}


Vuex



Vuex4 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化


具体文件请看packages/store/index.ts


import type {App} from 'vue';
import {createStore} from 'vuex'
import user from './user'
import app from './app'
import {setAddStore} from "@/packages/store/addStore";
const store: any = createStore({
    modules: {
        user,
        app
    }
})
const setupStore = (app: App) => {
    setAddStore(app, store)
    app.use(store)
}
export {
    setupStore
}
export default store;


axios



Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,


  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF


此处代码还应有响应拦截,请求拦截,没有粘贴出来,具体请看packages/http/request.ts,自动重连,错误返回,封装了常见的请求使用方式


const post = (url: string, params, config) => {
    return http.post(rewriteUrl(url), params, config)
}
const get = (url: string, params, config) => {
    return http.get(rewriteUrl(url), {params: params, ...config})
}
const all = (request: Array<any>) => {
    return axios.all(request)
}
const upload = (url: string, params) => {
    let config = {
        headers: {
            "Content-Type": "multipart/form-data",
        },
    };
    return http.post(rewriteUrl(url), params, config);
};
const download = (url: string, params, config) => {
    return axios({
        method: "post",
        url: rewriteUrl(url), //后端下载接口地址
        responseType: "blob", // 设置接受的流格式
        data: {
            ...params,
        },
        params: {
            ...params
        }
    }).then((res: any) => {
        handleExport(res.data, config.fileName);
    })
};
export {
    post,
    get,
    all,
    upload,
    download,
}



相关文章
|
6天前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
5天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
27 1
|
2天前
|
JavaScript API 开发者
关于vue3中v-model做了哪些升级 ?
【10月更文挑战第1天】
102 59
|
14天前
|
JavaScript
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
1天前
|
存储
Vue3组件通讯六种方式
【10月更文挑战第3天】
7 3
|
1天前
|
缓存 JavaScript
|
1天前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
23 2
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
1天前
|
JavaScript API
|
4天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
14 1