关于前端:🎅-🎅-🎅-站在Vue3上-丨2021年终总结

出发点的实质是想学习下vue3、vite、typescript、以及在创立企业治理后盾菜单权限管制、路由管制、组件设计、网络异步组件、hook意义、构建编译、设计模式的汇合，对本人应用学习新技术的认知和见解，也是对本人在以往的知识点的把握做出一个总结

新建我的项目

既然出发点奔着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

我的项目预览

🎉🎉🎉🎉🎉在线预览

构建布局

在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,
}

目录介绍

egg

提供根底服务，次要菜单编辑这块，动静加载路由，残缺的增删改查，具体代码请看egg/app/controller/home.js

cd /vue-vite-admin-ts/egg
npm install // 装置egg.js所须要的依赖
npm run dev // 开发模式 
npm run serve // 服务模式

获取我的项目后，关上egg/config/config.default.js 请在username填写本人的数据名

config.sequelize = {
    dialect: 'mysql',
    host: '127.0.0.1',
    port: 3306,
    username: 'xxxx', // 数据库用户名
    password: '**123456**', // 数据库明码
    database: 'egg',
    define: { // model的全局配置
        timestamps: true, // 增加create,update,delete工夫戳
        paranoid: false, // 增加软删除
        freezeTableName: true, // 避免批改表名为复数
        underscored: false // 避免驼峰式字段被默认转为下划线
    }
}

mock目录

家喻户晓Mock.js因为两个重要的个性风靡前端:

数据类型丰盛 :反对生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、色彩等。
拦挡Ajax申请 :不须要批改既有代码，就能够拦挡 Ajax 申请，返回模仿的响应数据。平安又便捷

Mock.mock("/api/yxs/notice", 'post', () => {
    const data = Mock.mock({
        "array|5": [
            {
                id: "@id", // 随机id
                text: "@cword(10)", // 随机文本
                createTime: "@datetime(MM-dd HH:mm:ss)",
            }
        ]
    })
    // 指定规定对立数据格式
    const result: resData = {
        code: 1,
        message: '申请胜利',
        data: data.array,
    }
    return result;
})

应用mock，只需在main.js文件中引入即可

src

搁置源码目录

├── src                                 // 源码目录
    |────packages                           // 利用主资源
    |──assets                               // 图片等资源
    |──base                                 // 根底配置
    |──common                               // 解决公共函数
    |──components                           // 全局组件
    |──config                               // 配置入口
    |──extend                               // 扩大目录
    |──hook                                 // 搁置钩子函数
    |──http                                 // 网络申请
    |──layout                               // 布局
    |──plugin                               // 插件
    |──router                               // 路由
    |──service                              // 申请接口
    |──store                                // 数据存储
    |──style                                // 款式入口
    |──theme                                // 主题
    |──utils                                // 公共工具办法
    |──views                                // 页面组件
    |──install.ts                           // 利用入口文件
    |──App.vue                              // 入口组件
    |──main.ts                              // 默认利用文件(lib.html)

typings目录

搁置在typescript环境中开发，全局变量，防止编辑器提醒报错

export {};
declare global {
    declare interface Window {
        __app__: any,
        $: any,
        less: any
    }
}

文件介绍

.editorconfig

editorconfig是用于跨不同的编辑器和IDE为多个开发人员保护统一的编码格调的配置文件。 editorconfig我的项目由定义编码款式的文件格式和一组文本编辑器插件组成，编辑器插件通过读取文件并以已定义的款式格式化指定文件。
editorconfig文件具备敌对的浏览性，且能与版本控制系统配合良好的特点

root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

.eslintignore

eslin查看代码过滤文件

/examples
/html
/lib/*
/public

/test
/mock
/egg/*
/dist
/typings
*.sh
node_modules

iconfont.*
*.md
*.scss
*.woff
*.ttf
vite.config.ts

.eslintrc.js

在 JavaScript 20 多年的倒退历程中，也呈现过许许多多的 lint 工具，上面就来介绍下支流的三款 lint 工具，

JSLint
JSHint
ESLint

ESLint 号称下一代的 JS Linter 工具，它的灵感来源于 PHP Linter，将源代码解析成 AST，而后检测 AST 来判断代码是否合乎规定。ESLint 应用 esprima 将源代码解析吃成
AST，而后你就能够应用任意规定来检测 AST 是否合乎预期，这也是 ESLint 高可扩展性的起因

module.exports = {
    rules: {
        // 缩进 4 空格
        "indent": [2, 4],

        // 禁止空格和 tab 的混合缩进
        'no-mixed-spaces-and-tabs': 1,

        // 禁用 debugger
        'no-debugger': 1,

        // 禁止不必要的布尔转换
        'no-extra-boolean-cast': 1,

        // 强制所有管制语句应用统一的括号格调
        'curly': 1,

        // 禁止应用多个空格c
        'no-multi-spaces': 1,

        // 要求在函数标识符和其调用之间有空格
        'func-call-spacing': 1,

        // 敞开 强制在函数括号内应用统一的换行
        'function-paren-newline': 0,

        // 强制隐式返回的箭头函数体的地位
        'implicit-arrow-linebreak': 1,

        // 强制在对象字面量的属性中键和值之间应用统一的间距
        'key-spacing': 1,

        // 强制在关键字前后应用统一的空格
        'keyword-spacing': 1,

        // 要求调用无参构造函数时有圆括号
        'new-parens': 1,

        // 禁止呈现多行空行
        'no-multiple-empty-lines': 1,

        // 不查看前面是否有分号
        'semi': 0,

        // 要求操作符四周有空格
        'space-infix-ops': 1,

        //数组中不容许呈现空地位
        'no-sparse-arrays': 2,

        // 不容许有申明后未应用的变量或者参数
        'no-unused-vars': 'off',

        'vue/script-setup-uses-vars': 'off',  // 如果应用 script-setup 可開啟

        'vue/component-definition-name-casing': 'off' // 驼峰命名
    },
}

.huskyrc

Husky 能够避免谬误的 git commit ， git push 和更多 woof！

次要用于查看代码是否通过在提交，避免团队呈现不标准的代码

// package.json
{
  "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*.{vue, ts}": [
            "eslint --quiet",
            "git add"
        ]
    },
}

git commit -m '测试提交'

.npmrc

.npmrc，能够了解成npm running cnfiguration, 即npm运行时配置文件

在我的项目的根目录下新建 .npmrc 文件，在外面以 key=value 的格局进行配置。比方要把npm的源配置为淘宝源，设置代理

registry = https://registry.npmjs.org/

当然你能够手动设置

config set registry https://registry.npm.taobao.org

.prettierrc

vsCode 应用 prettier 扩大，联合 .prettierrc 配置文件格式化代码

module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 应用 4 个空格缩进
    tabWidth: 4,
    // 不应用缩进符，而应用空格
    useTabs: false,
    // 行尾不须要有分号
    semi: false,
    // 应用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不应用单引号，而应用双引号
    jsxSingleQuote: false,
    // 尾随逗号
    trailingComma: 'all',
    // 大括号内的首尾须要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号须要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也须要括号
    arrowParens: 'always',
    // 每个文件格式化的范畴是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不须要写文件结尾的 @prettier
    requirePragma: false,
    // 不须要主动在文件结尾插入 @prettier
    insertPragma: false,
    // 应用默认的折行规范
    proseWrap: 'preserve',
    // 依据显示款式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符应用 lf
    endOfLine: 'lf',
}

Prettier 用来格式化代码，放弃代码中分号,单双引号等等格局对立。

ESLint 次要用来校验 JavaScript 代码语法错误，也能起到标准代码格局的作用。

在日常开发中，咱们既要应用 Prettier, 也要应用 ESLint。用 ESLint 查看代码中可能存在的语法错误，用 Prettier 调整代码格局

[t]sconfig.json

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ],
            "__ROOT__/*": [
                "*"
            ]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

配置编辑器按住ctrl+鼠标滑到门路处，会主动提醒到文件目录外面去

vite.config.js

具体配置请看官网文档https://cn.vitejs.dev/config/

export default defineConfig(({command, mode}) => {
    if (command === 'serve') {
        return {
            // dev 独有配置
        }
    } else {
        // command === 'build'
        return {
            // build 独有配置
        }
    }
})

实现的性能

✅ 应用Vue 3

✅ 应用Vuex 4.x

✅ 应用Vue-router 4.x

✅ 基于Vite 2.6

✅ 基于Ant Design Vue

✅ 整体框架响应式布局

✅ 我的项目切换

✅ 用户登录拦挡，用户退出

✅ 面包屑导航 + 多种布局成果

✅ 基于后盾权限,按钮权限设计

✅ 菜单导航 + 多种布局

✅ 内置iconfont字体图标，主动生成组件

✅ 基于axios封装post，get，all，upload，download

✅ http谬误重连

✅ 组件权限指令封装

✅ tsx构建全局组件

✅ http网络组件(vue3新个性)

✅ 菜单治理，蕴含增、删、改、查，菜单是缓存、是否固定、是否暗藏(但展现)、是否暗藏期待具体性能,查看文档

✅ 蕴含富文本编辑器，文件打印，图表预览，动画组件，状态详情组件等等

✅ 反对多页面利用

✅ 反对iframe内嵌

✅ 页面刷新

✅ 页面全屏

✅ 右键菜单封装

✅ 滚动条优化

✅ 骨架屏组件预览

✅ 基于封装loadsh深层遍历、查找、无规律查找

✅ 基于mitt全局通信

✅ 基于vxe-table解决万量级表格渲染

✅ Mock数据

✅ Egg.js后端服务，具体操作看文档

✅ sequelize模型增删改查

✅ Eslint代码查看

✅ 开发编辑器全局配置

✅ 打包压缩解决Gzip

关于前端:🎅-🎅-🎅-站在Vue3上-丨2021年终总结

新建我的项目

我的项目地址

我的项目预览

构建布局

路由介绍

Vuex

axios

目录介绍

egg

mock目录

src

typings目录

文件介绍

.editorconfig

.eslintignore

.eslintrc.js

.huskyrc

.npmrc

.prettierrc

[t]sconfig.json

vite.config.js

实现的性能

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:🎅-🎅-🎅-站在Vue3上-丨2021年终总结

新建我的项目

我的项目地址

我的项目预览

构建布局

路由介绍

Vuex

axios

目录介绍

egg

mock目录

src

typings目录

文件介绍

.editorconfig

.eslintignore

.eslintrc.js

.huskyrc

.npmrc

.prettierrc

[t]sconfig.json

vite.config.js

实现的性能

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复