目录结构，代码格式eslint+pretty，以及git hooks 使用
前言
基础篇我们主要介绍下：目录结构，代码格式eslint+pretty，以及git hooks 如何使用等
目录结构
├── .husky // git hook相关 ├── dist // 打包后的问题 ├── mock // 项目mock 模拟数据 ├── src // 源代码 │ ├── api // 所有请求 │ ├── assets // 主题 字体等静态资源 │ ├── components // 全局公用组件 │ ├── directive // 全局指令 │ ├── hooks // hook相关 │ ├── filtres // 全局 filter │ ├── icons // 项目所有 svg icons │ ├── router // 路由 │ ├── store // 全局 store管理 │ ├── styles // 全局样式 │ ├── utils // 全局公用方法 │ ├── views // view │ ├── App.vue // 入口页面 │ ├── main.js // 入口 加载组件 初始化等 │ ├── mockProdServer.js // 生产环境 │ └── permission.js // 权限管理 │ └── settings.js // 全局静态页面配置（是否显示侧边栏等） ├── .editorconfig // 编辑器属性配置 ├── .env.build // 打包时生成环境配置（可通过--mode进行指定） ├── .env.build-serve // 打包时开发环境配置（可通过--mode进行指定） ├── .env.serve-dev // 开发时开发环境配置（可通过--mode进行指定） ├── .env.serve-prod // 开发时生成环境配置（可通过--mode进行指定） └── .eslintignore // eslint 忽略项 └── .eslintrc.js // eslint 配置 └── .gitignore // git 忽略项 └── .prettierrc // pretty 配置 └── index.html // 打包时主入口文件 └── jsconfig.json // 使用js语言开发时的配置，配置后编辑器可以识别"@"等 └── package.json // package.json └── vite.config.js // vite 配置 复制代码
这里来简单讲一下src
api：请求接口封装
如果接口接口重复使用2次以上建议封装到api上。但是不建议所有接口都封装，这样 无形中增加代码的复杂度。代码越复杂，bug和开发难度越高，也不利于后期维护
assets：资源目录
一些静态文件如图片，json数据文件等
components：通用组件目录
首先我们先了解封装组件作用：
1.封装：封装 视图、数据和变化逻辑 2.复用：通过props传递属性 复制代码
我们看了上面封装组件的作用，封装业务逻辑和复用。如果你没有上面两个就不要乱封装组件了，组件封装过多也会增加开发难度，所以建议，如果页面中有两次以上相同的业务逻辑或者多次使用时，才把它进行封装。
此目录主要用作全局通用组件的封装(如：Tinymce)。如果是某个业务场景用到的多次组件，建议就地封装如：layout中的components
总之不要啥组件都往这个目录进行封装，最后组件太多，不好查找，不好维护
hooks
vue3中的新特性hook，用于封装业务逻辑，和一般的utils相比，多了状态管理（ref,reactive）和生命周期的使用,可以说比以前的api，多了个灵魂
icons
svg图片目录使用的是vite-plugin-svg-icons插件把多个svg图片封装起来
默认读取的是common和nav-bar目录里的图片，可以在vite.config.js的viteSvgIcons进行配置
vite.config.js
viteSvgIcons({ // config svg dir that can config multi iconDirs: [path.resolve(process.cwd(), 'src/icons/common'), path.resolve(process.cwd(), 'src/icons/nav-bar')], // appoint svg icon using mode symbolId: 'icon-[dir]-[name]' }), 复制代码默认配置了common和nav-bar里的svg图标进行打包使用，如果需要可以自行进行修改和扩增
官方配置文档：vite-plugin-mock
如何使用
icon-class为svg的文件名
<template> <div> <div>svg-icon 使用示例</div> <svg-icon icon-class="dashboard" /> </div> </template> 复制代码
如果需要新增一个svg，去网上下载下来(如iconfont上的图标)，需要时.svg结尾的图片，放在相应目录下就行
mixins
混合文件，经常使用到的state或者method可以进行混合
commonMixin.js
用户获取基本的信息，如环境变量，时间日期点（今天，近三天），延迟执行方法sleepMixin等
import { getCurrentInstance} from 'vue' const { proxy } = getCurrentInstance() proxy.todayTimeMixin -->获取今天的日期 proxy.sleepMixin(3000).then() --> 延时3S后执行then 复制代码elementMixin.js
element-plus相关。message提示，confirm确认，相关检验封装formRulesMixin等
proxy.message("elementMixin") -->提示信息 //formRulesMixin直接用formRulesMixin.isNotNull就可校验，支持的较多，大家可以查看formRulesMixin里包含的属性 <template> <el-form :model="subForm" :rules="formRulesMixin"> <el-form-item label="品牌名称" prop="name" :rules="formRulesMixin.isNotNull"> <el-input v-model="subForm.name" placeholder="品牌名称" /> </el-form-item> </el-form> <template> <script setup> let subForm = reactive({ name: '' }) </script> 复制代码routerMixin.js
router相关。路由的push,repalce,back等路由跳转方法，和相关的参数传递封装，
//routerDemoF.vue proxy.routerPushMixin('routerDemoS', { name: 'routerDemoS' }) //RouterDemoS.vue onMounted(() => { //get page pass url data console.log(proxy.queryParamsMixin) // }) 复制代码所有命名在全局混合里的方法和属性，为了和一般的方法进行区分，命名都加了mixin
router
一次配置就可以生成你想要的路由和页面，这里主要介绍下路由的配置和使用
完整里的路由配置参数(这边以项目中的keep-alive路由配置为例)
{ /* path,component,redirect为vue-router本身，这里不做介绍 */ path: '/writing-demo', component: Layout, redirect: '/writing-demo/keep-alive', /* meta：下面介绍 alwaysShow-> default:false; true:当有一个子元素时显示父级；false:当有一个子元素时,不显示父级 hidden-> default:false; true:侧边栏中隐藏当前标签，包括其children； */ meta: { title: 'Writing Demo', icon: 'eye-open' }, alwaysShow: true, hidden:false children: [ { path: 'keep-alive', component: () => import('@/views/example/keep-alive'), /* name-> 路由跳转时的name;keep-alive缓存时的name,建议必写 */ name: 'KeepAlive', //cachePage: cachePage when page enter, default false //leaveRmCachePage: remove cachePage when page leave, default false /* meta属性介绍: title：sideBar显示的名称 cachePage->default:false;true->页面初始加载会进行缓存; leaveRmCachePage->default:false;true->页面离开后会移除本页面缓存 activeMenu：要选中那个侧边栏item,如列表页跳转到详情页(设置为hidden)，如果想要还选中高亮列表页可以设置activeMenu:"列表页的链接" */ meta: { title: 'Keep-Alive', cachePage: true, leaveRmCachePage: false } }, { path: 'router-demo-f', name: 'routerDemoF', hidden: true, component: () => import('@/views/example/keep-alive/RouterDemoF.vue'), meta: { title: 'RouterDemo-F', activeMenu: '/writing-demo/keep-alive' } } ] }, 复制代码store
加入了自动导入modules写法，只要在module文件夹中新增一个文件，就能自动导入到index.js
我们看下核心代码 index.js
import { createStore } from 'vuex' import getters from './getters' /* import.meta.globEager:vite2官方提供读取文件的api **/ const modulesFiles = import.meta.globEager('./modules/*.js') let modules = {} for (const path in modulesFiles) { /* 通过path.replace处理得到文件名：如app **/ const moduleName = path.replace(/(.*\/)*([^.]+).*/gi, '$2') /* modulesFiles[path].default: 获取到读取文件的内容 **/ modules[moduleName] = modulesFiles[path].default } console.log('modules', modules) /* * modules {app: {…}, permission: {…}, tagsView: {…}, user: {…}} app: {namespaced: true, state: {…}, mutations: {…}, actions: {…}} permission: {namespaced: true, state: {…}, mutations: {…}, actions: {…}} tagsView: {namespaced: true, state: {…}, mutations: {…}, actions: {…}} user: {namespaced: true, state: {…}, mutations: {…}, actions: {…}} __proto__: Object * */ export default createStore({ modules, getters }) 复制代码看了下上面的写法是不是感觉，很香！！
styles
提供了一些常用的css布局，如flex布局，margin，padding等，可以提高我们的开发效率
index.scss：主导入文件 reset-style.scss：重置样式 transition.scss：动画相关，像侧边栏的关闭和开启动画
elemenet-style-overflow.scss：设置和重置element-plus的样式，如：
elemenet-style-overflow.scss .elODialogModalBodyH60vh { .el-dialog__body { min-height: 60vh; max-height: 70vh; } } 在dialog中使用(重置el-dialog__body的高度) <div> <el-dialog> <div>DBC文件名</div> </el-dialog> </div> 复制代码为了避免全局样式污染，建议重置时加多一层，如：elODialogModalBodyH60vh，在外层加上div父级，在加上class (elODialogModalBodyH60vh)进行重置，这样最大程度上避免了全局污染,又起到修改element原生样式的效果
variables.scss：全局变量文件
此文件在vite.config.js文件中配置到了全局，无需应用直接可以使用里面的变量
vite.config.js css: { preprocessorOptions: { //define global scss variable scss: { additionalData: `@import "@/styles/variables.scss";` } } }, 复制代码scss-suger.scss：布局flex，margin，padding 一些常用的样式封装。使用好了，页面的style都不用写
介绍下如何使用，体验下什么叫真香！！！
//flex .rowSC row:主轴方向设定为row-> flex-direction: row; S: 设置的是主轴方向的布局方式，S表示justify-content: flex-start; C: 设置的是交叉轴方向的布局方式,C表示align-items: center; .rowSS,rowSE,columnSS，.columnSC 类似 //margin mb-1: margin-bottom:10px; mbPx-1:margin-bottom:1px; mt-1,mr-1,ml-1 类似 复制代码
using demo
<div> <!--平行布局--> <div> <div>1</div> <div>2</div> </div> <!--居中布局--> <div class="rowCC mt-2"> <div>3</div> <div>4</div> </div> <!--居中布局--> <div class="columnCC mt-2"> <div>3</div> <div>4</div> </div> </div> 复制代码
variables-to-js.scss : 将css导出到js使用文件（后续会说）
utils
通用工具类
auth.js ：操作token的api。移除了以前的js-cookie（electron中js-cookie会出现问题），采用了localStorage
axiosReq.js：axios请求封装
bus.js：用于vue3中无关组件中的信息传递，类似vue2中的new bus();
getPageTitle.js: 拼装title的api;
validate.js: 通用的一些校验
.env.build，.env.serve-dev，.env.serve-prod，package.json
//.env.serve-dev #定义的变量必须以VITE_APP_开头 VITE_APP_ENV = 'serve' VITE_APP_BASE_URL = 'http://8.135.1.141/micro-service-api' VITE_APP_BASE_WS_URL = '' //package.json "scripts": { // 通过 --mode 指定您的配置文件，运行后通过VITE_APP_xx获取你设置的变量 "dev": "vite --mode serve-dev --host", "build": "vite build --mode build", "build:serve": "vite build --mode build-serve", "serve": "vite preview --mode build", "preview": "yarn run build && vite preview ", "lint": "eslint --ext .js,.jsx,.vue,.ts,.tsx src --fix", "prepare": "husky install" }, 复制代码eslint pretty hook 介绍
eslint：代码质量校验
// .eslintrc.js extends: [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended', //配置了pretty适配eslint的插件，使用pretty格式化是会符合eslint的校验规则 '@vue/prettier', '@vue/prettier/@typescript-eslint' ] 复制代码
prettier： 代码格式化
{ //使用tab缩进，默认false "useTabs": false, // tab缩进大小,默认为2 "tabWidth": 2, // 换行长度，默认80 "printWidth": 120, // 字符串使用单引号 "singleQuote": true, // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号） "trailingComma": "none", // 对象中打印空格 默认true // true: { foo: bar } // false: {foo: bar} "bracketSpacing": true, // 每行末尾自动添加分号;false->不添加 "semi": false, //解决格式化插件Prettier，格式化操作后，结束标签＞跑到下一行的问题 "htmlWhitespaceSensitivity": "ignore" } 复制代码vscode或webstrom请设置保存时自动格式化代码，且使用prettier方式格式话 (不会请自行百度)
设置后你会发现有不一样的开发体验
git hook：git生命钩子函数,提交前会执行，pre-commit里面的shell脚本
//pre-commit #推送之前运行eslint检查 yarn run lint || echo exit;
作者：kuanghua
链接：https://juejin.cn/post/7036301333304967181
伪原创工具 SEO网站优化 https://www.237it.com/