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

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

目录介绍



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


相关文章
|
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
|
3天前
|
JavaScript API 开发者
关于vue3中v-model做了哪些升级 ?
【10月更文挑战第1天】
106 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天】
46 2
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
1天前
|
JavaScript API
|
4天前
|
JSON JavaScript 前端开发
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
vue尚品汇商城项目-day00【项目介绍:此项目是基于vue2的前台电商项目和后台管理系统】
15 1