个人建站前端篇（七）vite + vue3企业级项目模板

一、vite命令行创建项目

npm create vite@latest

根据提示选择模板，选择vite + vue3 + ts即可。

二、项目连接远程仓库

git init
git remote add origin https://gitee.com/niech_project/vite-vue3-template.git
git pull origin master
git checkout -b dev

三、项目加入eslint校验和自动格式化

1. eslint 运行代码前就可以发现一些语法错误和潜在bug，保证代码一致性。
2. prettier 是代码格式化工具，用于检查代码中的格式问题。
3. 区别联系：eslint保证代码质量，prettier保证代码风格，eslint有小部分格式化功能，通常和prettier结合使用。

1. 安装eslint和prettier

1. eslint： ESLint的核心代码库
2. prettier：prettier格式化代码的核心库
3. eslint-config-airbnb-base： airbnb的代码规范 (依赖plugin-import)
4. eslint-config-prettier：eslint结合prettier的格式化
5. eslint-plugin-vue：eslint在vue里的代码规范
6. eslint-plugin-import：项目里面支持eslint
7. eslint-plugin-prettier：将prettier结合进入eslint的插件

pnpminstall eslint eslint-plugin-vue eslint-config-prettier prettier eslint-plugin-import eslint-plugin-prettier eslint-config-airbnb-base -D

:::tip
npm i module_name -D
-D 表示安装模块到开发依赖管理devDependencies中，如果你安装的库是用来打包的、解析代码的，比如vite、webpack、babel，就可以用 -d 来安装，项目上线了，这些库就没用了。也比如saas
-S 表示安装模块到生产依赖管理dependencies中，这个是项目运行需要用到的依赖，比如vue、eslint、vuex、axios，就用 -s 来安装。
:::

npm安装模块

【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录；

【npm install -g xxx】利用npm安装全局模块xxx；

【npm install xxx】安装但不写入package.json；

【npm install xxx –save】 安装并写入package.json的“dependencies”中；

【npm install xxx –save-dev】安装并写入package.json的“devDependencies”中。

npm 删除模块

【npm uninstall/remove xxx 】删除xxx模块；
【npm uninstall/remove -g xxx】删除全局模块xxx；

2. 配置eslint和prettier

1. 在package.json文件scripts加入命令

"lint:create":"eslint --init"

执行npm run lint:create,自动创建.eslintrc.cjs文件

:::tip
补充一些依赖安装
@typescript-esTint/parser: ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码;
@typescript-eslint/eslint-plugin: 这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范
eslint-import-resolver-alias 让我们可以import的时候使用 @ 别名
:::

pnpminstall typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-import-resolver-alias @types/eslint @types/node -D

1. 修改vue.config.ts文件

pnpminstall vite-plugin-eslint consola terser -D

import { defineConfig,loadEnv } from 'vite'
import path from "path";
import vue from '@vitejs/plugin-vue'
import eslintPlugin from "vite-plugin-eslint";

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
      eslintPlugin()//代码校检
    ],
    base: "./", // 在生产中服务时的基本公共路径
    publicDir: "public", // 静态资源服务的文件夹, 默认"public"
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"), // 相对路径别名配置，使用 @ 代替 src
      },
      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
    },
    // 打包配置
    build: {
      target: "modules", // 设置最终构建的浏览器兼容目标。modules:支持原生 ES 模块的浏览器
      outDir: "dist", // 指定输出路径
      assetsDir: "assets", // 指定生成静态资源的存放路径
      assetsInlineLimit: "4096", // 小于此阈值的导入或引用资源将内联为base64编码，设置为0可禁用此项。默认4096（4kb）
      cssCodeSplit: true, // 启用/禁用CSS代码拆分，如果禁用，整个项目的所有CSS将被提取到一个CSS文件中,默认true
      sourcemap: false, // 构建后是否生成 source map 文件
      minify: "terser", // 混淆器，terser构建后文件体积更小
      write: true, // 设置为 false 来禁用将构建后的文件写入磁盘
      emptyOutDir: true, // 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
      chunkSizeWarningLimit: 500, // chunk 大小警告的限制
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      }, // 去除 console debugger
    }
  }
})

vite-plugin-eslint: vite的一个插件，让项目可以方便的得到eslint支持，完成eslint配置后，可以快速的将其集成进vite中，便于在代码不符合eslint规范的第一时间看到提示

3. 修改添加常见配置

项目根目录创建以下配置文件

1. .eslintrcignore 忽略校验文件

# .eslintrcignore

*.sh
node_modules
*.md
*.woff
*.ttf
dist
/pubilc
/docs
.husky
/bin
.eslintrc.js
perttier.config.js
/src/mock/*
/src/*
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
pnpm-debug.log*
lerna-debug.log*

.DS_Store
dist-ssr
*.local

/cypress/videos/
/cypress/screenshots/

# Editor directories and files
.vscode
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

components.d.ts

1. .prettierrc.cjs 配置格式化规则

module.exports ={"printWidth":80,// 一行最多100字符"tabWidth":2,// 使用2个空格缩进"useTabs":false,// 不适用缩进符，使用空格"semi":false,// 行尾是否要有分号"singleQuote":true,// 使用单引号"quoteProps":'as-needed',// 对象的key，仅仅在必要时使用引号"jsxSingleQuote":false,// jsx是否使用双引号"trailingComma":'es5',// 尾随逗号"bracketSpacing":true,// 大括号内的首尾需要有空格"arrowParens":'always',// 箭头函数，是有一个参数的时候，也需要小括号"rangeStart":0,// 文件格式化的范围是全部内容"rangeEnd":Infinity,"requirePragma":false,// 不需要写文件开头的 @prettier"insertPragma":false,// 不需要在文件开头插入 @prettier"proseWrap":'always',// 使用默认执行标准"htmlWhitespaceSensitivity":'css',// 根据显示样式决定html是否执行"endOfLine":'lf'// 换行符是有lf}

1. .prettierignore 忽略格式化文件

# prettierignore
/dist/*
.local
.output.js
/node_modules/**
src/.DS_Store

**/*.svg
**/*.sh
/public/*
components.d.ts

在package.json添加格式化命令

1. “lint”: “eslint “src/**/*.{js,ts,vue}” --fix”, 既可以检查又可以修复部分语法问题
2. “prettier-format”: “prettier --config .prettierrc.cjs “src/**/*.{js,ts,vue}” --write”, 利用prettier手动格式化一些样式问题

四、修改tsconfig.json配置别名

"baseUrl":"","paths":{"@/*":["src/*"]}

五、环境配置（开发，预发，生产环境）

开发环境：开发人员开发的环境
测试环境：测试人员测试的环境
预发环境：准备上线的环境，也可叫内测环境
生产环境：正式线上环境，投入生产的环境

这里我们配置两个环境，一个测试环境和生产环境，
开发人员和测试人员使用测试环境，修改package.json文件，添加两个命令
“build:dev”: “vue-tsc --noEmit && vite build --mode development”,
“build:pro”: “vue-tsc --noEmit && vite build --mode production”,

新建两个配置文件
.env.development：开发测试环境

# 页面标题
VITE_APP_TITLE= xxx
# 开发环境配置
VITE_APP_ENV='development'
# 开发环境
VITE_APP_BASE_API='/stage-api'
# 是否启用代理
VITE_HTTP_PROXY=true
# 端口
VITE_PORT=80
#本地环境接口地址
VITE_SERVE='http://192.168.xx.xx:8080'

.env.production：生产环境

# 页面标题
VITE_APP_TITLE= xxx
# 生产环境配置
VITE_APP_ENV='production'
# 开发环境
VITE_APP_BASE_API='/stage-api'
# 是否启用代理
VITE_HTTP_PROXY=false
# 端口
VITE_PORT=80
#本地环境接口地址
VITE_SERVE='http://xx.xx.xx.xx:8080'
# 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS= gzip

六、自动引入插件unplugin-auto-import和unplugin-vue-components的使用

:::tip
vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦，可以通过unplugin-auto-import给我们自动引入
:::

1. 安装依赖

npminstall-D unplugin-vue-components unplugin-auto-import vite-plugin-style-import
npminstall element-plus @element-plus/icons-vue ant-design-vue -S

1. 在vite.config.ts文件中添加配置

import{ defineConfig, loadEnv }from"vite";import path from"path";import vue from"@vitejs/plugin-vue";import eslintPlugin from"vite-plugin-eslint";import AutoImport from"unplugin-auto-import/vite";import Components from"unplugin-vue-components/vite";import{ ElementPlusResolver }from"unplugin-vue-components/resolvers";import{
  createStyleImportPlugin,
  ElementPlusResolve
}from"vite-plugin-style-import";exportdefaultdefineConfig(({ mode })=>{const env =loadEnv(mode, process.cwd());const{VITE_APP_BASE_API,VITE_SERVE,VITE_PORT}= env
  return{
    plugins:[vue(),eslintPlugin(),AutoImport({
        imports:["vue","vue-router"],
        dts:"src/auto-import.d.ts",// 路径下自动生成文件夹存放全局指令
        eslintrc:{
          enabled:true,// 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗},
        resolvers:[ElementPlusResolver()]}),Components({
        dts:"./src/components.d.ts",// 创建ts文件
        extensions:["vue"],// 指定文件的后缀
        dirs:["src/components/"],// 指定路径，自动导入自定义组件
        resolvers:[ElementPlusResolver()],// 指定自动引入的组件库，也就是从插件中导出的那个}),// 配置自动导入element startcreateStyleImportPlugin({
        resolves:[ElementPlusResolve()],
        libs:[{
            libraryName:"element-plus",
            esModule:true,resolveStyle:(name:string)=>`element-plus/theme-chalk/${name}.css`,},],})],
    base:"./",// 在生产中服务时的基本公共路径
    publicDir:"public",// 静态资源服务的文件夹, 默认"public"
    resolve:{
      alias:{"@": path.resolve(__dirname,"./src"),// 相对路径别名配置，使用 @ 代替 src},
      extensions:[".mjs",".js",".ts",".jsx",".tsx",".json",".vue"],},// 本地运行配置
    server:{
      host:'0.0.0.0',
      port:VITE_PORT||80,
      https:false,
      open:true,
      proxy:{[VITE_APP_BASE_API]:{
          target:VITE_SERVE,
          changeOrigin:true,rewrite: path => path.replace(RegExp(`^${VITE_APP_BASE_API}`),'')}},
      disableHostCheck:true},// 打包配置
    build:{
      target:"modules",// 设置最终构建的浏览器兼容目标。modules:支持原生 ES 模块的浏览器
      outDir:"dist",// 指定输出路径
      assetsDir:"assets",// 指定生成静态资源的存放路径
      assetsInlineLimit:"4096",// 小于此阈值的导入或引用资源将内联为base64编码，设置为0可禁用此项。默认4096（4kb）
      cssCodeSplit:true,// 启用/禁用CSS代码拆分，如果禁用，整个项目的所有CSS将被提取到一个CSS文件中,默认true
      sourcemap:false,// 构建后是否生成 source map 文件
      minify:"terser",// 混淆器，terser构建后文件体积更小
      write:true,// 设置为 false 来禁用将构建后的文件写入磁盘
      emptyOutDir:true,// 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
      chunkSizeWarningLimit:500,// chunk 大小警告的限制
      terserOptions:{
        compress:{
          drop_console:true,
          drop_debugger:true,},},// 去除 console debugger},};});

1. 在src目录下自动生成auto-import.d.ts文件，用于存放全局指令
2. 和eslintrc不兼容时，加上

eslintrc:{
  enabled:true,// 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗}

自动生成.eslintrc-auto-import.json文件
5. 在.eslintrc.json文件中添加如下配置：

module.exports ={// 环境 浏览器，最新ES语法，node环境"env":{"browser":true,"commonjs":true,"es2021":true},/**
     * 扩展的eslint规范语法，可以被继承的规则，字符串数组，每个配置继承它之前的配置
     * 分别是eslint-config-vue 提供的
     * eslint-config-airbnb-base 提供的
     * eslint-config-prettier 提供的
     * eslint-config- 前缀可以简写
     */"extends":["eslint:recommended","plugin:@typescript-eslint/recommended","plugin:vue/vue3-essential","airbnb-base","prettier","./.eslintrc-auto-import.json"],// eslint 会对代码进行校验，parser是将代码转换为ESTree(AST),ESlint会对ESTree校验"parser":"vue-eslint-parser",// 解析器的配置项"parserOptions":{// eslint的版本号，或者年份都可以"ecmaVersion":"latest","parser":"@typescript-eslint/parser","sourceType":"module",// 额外的语言类型"ecmaFeatures":{"jsx":true,"tsx":true}},// 全局自定义宏，这样在源文件中使用全局变量不会报错或警告"globals":{"defineProps":"readonly","defineEmits":"readonly","defineExpose":"readonly","withDefaults":"readonly"},/**
     * 插件
     * eslint-plugin- 前缀可以简写
     * vue官方提供了一个eslint插件eslint-plugin-vue，它提供了parser和rules。
     * parser为vue-eslint-parser，放在前面的parser字段里，rules放在extends字段里
     */"plugins":["@typescript-eslint","vue"],"settings":{// 设置项目内的别名"import/resolver":{"alias":{"map":[["@","./src"]]}},"import/extensions":[".js",".jsx",".tsx",".ts",".mjs",".cjs"]},/**
     * rules: 自定义规则，覆盖extends继承的规则，对规则进行灵活配置
     *
     * "off" 或 0    ==>  关闭规则
     * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
     * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
     */"rules":{// eslint（https://eslint.bootcss.com/docs/rules/）"no-var":"error",// 要求使用 let 或 const 而不是 var"no-multiple-empty-lines":["warn",{"max":2}],// 不允许多个空行"no-console":"off","no-debugger":"error","no-unexpected-multiline":"error",// 禁止空余的多行"no-useless-escape":"off",// 禁止不必要的转义字符"import/no-unresolved":"off","import/extensions":"off","import/no-absolute-path":"off","import/no-extraneous-dependencies":"off","import/prefer-default-export":"off",// typeScript (https://typescript-eslint.io/rules)"@typescript-eslint/no-unused-vars":"error",// 禁止定义未使用的变量"@typescript-eslint/prefer-ts-expect-error":"error",// 禁止使用 @ts-ignore"@typescript-eslint/no-explicit-any":"off",// 禁止使用 any 类型"@typescript-eslint/no-non-null-assertion":"off","@typescript-eslint/no-namespace":"off",// 禁止使用自定义 TypeScript 模块和命名空间。"@typescript-eslint/semi":"off",// eslint-plugin-vue (https://eslint.vuejs.org/rules/)"vue/multi-word-component-names":"off",// 要求组件名称始终为 “-” 链接的单词"vue/script-setup-uses-vars":"error",// 防止<script setup>使用的变量<template>被标记为未使用"vue/no-mutating-props":"off",// 不允许组件 prop的改变"vue/attribute-hyphenation":"off",// 对模板中的自定义组件强制执行属性命名样式// self"no-param-reassign":"off",// 不允许参数重新赋值"no-useless-concat":"off","no-plusplus":"off",// 不允许一元操作符++、--}}

1. tsconfig.json文件中添加如下配置：

include加入"src/auto-imports.d.ts"

1. 安装 element-plus

npminstall element-plus -S

在.eslintrc-auto-import.json文件中添加需要引入的组件：
“ElMessage”: true

1. 安装saas

npminstall sass -D

七、添加路由

1. pnpm install vue-router 安装路由依赖；
2. 在src目录下新建router文件夹index.ts文件和routes.ts文件；

index.ts内容如下

// 通过vue-router插件实现模板路由配置import{ createRouter, createWebHistory }from"vue-router";import{ constantRoutes }from"./routes.ts";// 创建路由器const router =createRouter({// 路由模式hash
  history:createWebHistory(),
  routes: constantRoutes,// 滚动行为scrollBehavior(){return{
      left:0,
      top:0,};},});exportdefault router;

routes.ts内容如下

import Layout from'@/layout'/**
 * Note: 路由配置项
 *
 * hidden: true                     // 当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
 * alwaysShow: true                 // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
 *                                  // 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
 *                                  // 若你想不管路由下面的 children 声明的个数都显示你的根路由
 *                                  // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
 * redirect: noRedirect             // 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
 * name:'router-name'               // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
 * query: '{"id": 1, "name": "ry"}' // 访问路由的默认传递参数
 * roles: ['admin', 'common']       // 访问路由的角色权限
 * permissions: ['a:a:a', 'b:b:b']  // 访问路由的菜单权限
 * meta : {
    noCache: true                   // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
    title: 'title'                  // 设置该路由在侧边栏和面包屑中展示的名字
    icon: 'svg-name'                // 设置该路由的图标，对应路径src/assets/icons/svg
    breadcrumb: false               // 如果设置为false，则不会在breadcrumb面包屑中显示
    activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
  }
 */exportconst constantRoutes =[{
    path:'/redirect',
    component: Layout,
    hidden:true,
    children:[{
        path:'/redirect/:path(.*)',component:()=>import('@/views/redirect/index.vue')}]},{
    path:'',
    component: Layout,
    redirect:'/index',
    children:[{
        path:'/index',component:()=>import('@/views/home/index.vue'),
        name:'Index',
        meta:{ title:'系统首页', icon:'home', affix:true}}]},{
    path:'/login',component:()=>import('@/views/login/index.vue'),
    hidden:true}// {//   path: "/404",//   component: () => import("@/views/404/index.vue"),//   name: "404",//   meta: {//     title: "404",//   },// },];// 动态路由，基于用户权限动态去加载exportconst dynamicRoutes =[// {//   path: '/system/user-auth',//   component: Layout,//   hidden: true,//   permissions: ['system:user:edit'],//   children: [//     {//       path: 'role/:userId(\\d+)',//       component: () => import('@/views/system/user/authRole'),//       name: 'AuthRole',//       meta: { title: '分配角色', activeMenu: '/system/user' }//     }//   ]// },// {//   path: '/system/role-auth',//   component: Layout,//   hidden: true,//   permissions: ['system:role:edit'],//   children: [//     {//       path: 'user/:roleId(\\d+)',//       component: () => import('@/views/system/role/authUser'),//       name: 'AuthUser',//       meta: { title: '分配用户', activeMenu: '/system/role' }//     }//   ]// },// {//   path: '/system/dict-data',//   component: Layout,//   hidden: true,//   permissions: ['system:dict:list'],//   children: [//     {//       path: 'index/:dictId(\\d+)',//       component: () => import('@/views/system/dict/data'),//       name: 'Data',//       meta: { title: '字典数据', activeMenu: '/system/dict' }//     }//   ]// }]

1. 在main.ts文件中引入router

import{ createApp }from"vue";import"./style.scss";import ElementPlus from'element-plus'import Antd from'ant-design-vue';import"ant-design-vue/dist/reset.css";import App from"./App.vue";// 引入路由import router from"./router";import store from"./store";import'./permission';// 权限处理import"virtual:svg-icons-register";import SvgIcon from'@/components/SvgIcon'import elementIcons from'@/components/SvgIcon/svgicon'const app =createApp(App);
app.use(router);
app.use(store);
app.use(ElementPlus);
app.use(Antd);
app.use(elementIcons)
app.component('svg-icon', SvgIcon)
app.mount("#app");

补充layout

1. src下新建layout文件夹，分别新建index.vue和components文件夹

index.vue内容如下：

<template>
  <div class="app-wrapper">
    <side-bar class="sideBar-container" />
    <div class="main-container">
      <div class="fixed-header">
        <nav-bar class="navBar-container" />
      </div>
      <app-main />
    </div>
  </div>
</template>

<script setup lang="ts">
import { AppMain, NavBar, SideBar } from './components'
</script>

<style lang='scss' scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100vh;
  width: 100%;

  .sideBar-container {
    width: $base-sidebar-width;
    background-color: $base-menu-background;
    height: calc(100% - #{$base-navbar-height});
    position: fixed;
    top: $base-navbar-height;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
  }

  .main-container {
    height: 100%;
    width: calc(100% - #{$base-sidebar-width});
    position: relative;
    left: $base-sidebar-width;
    .fixed-header {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 9;
      width: 100%;
      height: $base-navbar-height;
      transition: width 0.28s;
      background-color: #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, .05);

      .navBar-container {
        height: 100%;
        // max-width: 1200px;
        position: relative;
        margin: auto;
        will-change: transform;
        // padding: 0 24px;
      }
    }
  }
}
</style>

1. 在components文件夹下新建AppMain.vue文件，内容如下：

<template>
  <section class="app-main">
    <div class="app-main-container">
      <router-view v-slot="{ Component, route }">
        <transition name="fade-transform" mode="out-in">
          <keep-alive :include="['index','crm']">
            <component :is="Component" :key="route.path"/>
          </keep-alive>
        </transition>
      </router-view>
    </div>
  </section>
</template>

<script setup lang="ts">
</script>

<style lang='scss' scoped>
@import "@/assets/styles/variables.module.scss";
.app-main {
  height: calc(100vh - #{$base-navbar-height});
  background-color: #fff;
  width: 100%;
  position: relative;
  overflow: auto; 
  top:$base-navbar-height;
  .app-main-container {
    height: 100%;
    padding: 20px;
  }
}
</style>
<style lang='scss'>
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 3px;
}
</style>

1. 在components文件夹下新建index.ts文件，内容如下：

export{defaultas AppMain }from'./AppMain'export{defaultas NavBar }from'./NavBar'export{defaultas SideBar }from'./SideBar'

1. 在components文件夹下新建SideBar/NavBar/InnerLink文件夹，内容如下：

SideBar新建index/SidebarItem/Link.vue文件

index.vue内容如下：

<template>
  <div :style="{ backgroundColor: variables.menuLightBackground }">
    
    <el-scrollbar wrap-class="scrollbar-wrapper" style="padding: 20px;">
      <el-menu
        :default-active="activeMenu"
        :background-color="variables.menuLightBackground"
        :text-color="variables.menuLightColor"
        :unique-opened="true"
        mode="vertical"
      >
        <sidebar-item
          v-for="(route, index) in sidebarRouters"
          :key="route.path + index"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
import variables from '@/assets/styles/variables.module.scss'
import SidebarItem from './SidebarItem'
import usePermissionStore from '@/store/modules/permission'

const route = useRoute();
const permissionStore = usePermissionStore()

const sidebarRouters =  computed(() => permissionStore.sidebarRouters);
console.log('sidebarRouters',sidebarRouters)
const activeMenu = computed(() => {
  const { meta, path } = route;
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
})

</script>
<style>
.sidebar-container .el-scrollbar__wrap{
  height: calc(100vh - 155px);
  overflow-y: auto;
}
#app .sidebar-container .el-menu--vertical .nest-menu .el-sub-menu > .el-sub-menu__title:hover,
#app .sidebar-container .el-menu--vertical .el-menu-item:hover,
#app .sidebar-container .nest-menu .el-sub-menu > .el-sub-menu__title:hover, 
#app .sidebar-container .el-sub-menu .el-menu-item:hover,
#app .sidebar-container .el-menu--vertical .nest-menu .el-sub-menu > .el-sub-menu__title .is-active,
#app .sidebar-container .el-menu--vertical .el-menu-item.is-active,
#app .sidebar-container .nest-menu .el-sub-menu > .el-sub-menu__title .is-active, 
#app .sidebar-container .el-sub-menu .el-menu-item .is-active{
  background-color: rgb(79 110 247 / 5%) !important;
}
.el-menu{
  --el-menu-item-height:2.75rem;
  --el-menu-sub-item-height:2.75rem;
  border-right: none!important;
}

</style>

SidebarItem.vue内容如下：

<template>
  <div v-if="!item.hidden">
    <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }" @click="handleClick(item.path)">
          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"/>
          <template #title><span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span></template>
        </el-menu-item>
      </app-link>
    </template>

    <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" teleported>
      <template v-if="item.meta" #title>
        <svg-icon :icon-class="item.meta && item.meta.icon" />
        <span class="menu-title" :title="hasTitle(item.meta.title)">{{ item.meta.title }}</span>
      </template>

      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :is-nest="true"
        :item="child"
        :base-path="resolvePath(child.path)"
        class="nest-menu"
      />
    </el-sub-menu>
  </div>
</template>

<script setup>
import { isExternal } from '@/utils/validate'
import AppLink from './Link'
import { getNormalPath } from '@/utils/mis'

const props = defineProps({
  // route object
  item: {
    type: Object,
    required: true
  },
  isNest: {
    type: Boolean,
    default: false
  },
  basePath: {
    type: String,
    default: ''
  }
})

const onlyOneChild = ref({});

function hasOneShowingChild(children,parent) {
  if (!children) {
    children = [];
  }
  const showingChildren = children.filter(item => {
    if (item.hidden) {
      return false
    } 
    // Temp set(will be used if only has one showing child)
    onlyOneChild.value = item
    return true
    
  })
  // When there is only one child router, the child router is displayed by default
  if (showingChildren.length === 1) {
    return true
  }

  // Show parent if there are no child router to display
  if (showingChildren.length === 0) {
    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
    return true
  }

  return false
};
function handleClick(routePath){
  localStorage.setItem('routePath', routePath)
}
function resolvePath(routePath, routeQuery) {
  if (isExternal(routePath)) {
    return routePath
  }
  if (isExternal(props.basePath)) {
    return props.basePath
  }
  if (routeQuery) {
    const query = JSON.parse(routeQuery);
    return { path: getNormalPath(`${props.basePath  }/${  routePath}`), query }
  }
  return getNormalPath(`${props.basePath  }/${  routePath}`)
}

function hasTitle(title){
  if (title.length > 5) {
    return title;
  } 
    return "";
  
}
</script>

Link.vue内容如下：

<template>
  <component :is="type" v-bind="linkProps()">
    <slot />
  </component>
</template>

<script setup>
import { isExternal } from '@/utils/validate'

const props = defineProps({
  to: {
    type: [String, Object],
    required: true
  }
})

const isExt = computed(() => isExternal(props.to))

const type = computed(() => {
  if (isExt.value) {
    return 'a'
  }
  return 'router-link'
})

function linkProps() {
  if (isExt.value) {
    return {
      href: props.to,
      target: '_blank',
      rel: 'noopener'
    }
  }
  return {
    to: props.to
  }
}
</script>

NavBar新建index.vue,内容如下

<template>
  <div class="navbar">
    navbar
    <span @click="handleLoginOut()">退出</span>
  </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user'

const userStore = useUserStore()
const handleLoginOut = () => {
  userStore.logOut().then(() => {
    window.location.href = '/index';
  })  
}

</script>

<style lang='scss' scoped>
.navbar {
  background: #4F6EF7;
}
</style>

InnerLink/index.vue内容如下：

<template>
  <div :style="'height:' + height">
    <iframe
      :id="iframeId"
      style="width: 100%; height: 100%"
      :src="src"
      frameborder="no"
    ></iframe>
  </div>
</template>

<script setup>
const props = defineProps(['src', 'iframeId'])
const { src, iframeId } = toRefs(props);

const height = ref(`${document.documentElement.clientHeight - 94.5  }px`);
</script>

八、添加类型说明文件

typescript 只能理解 .ts 文件，无法理解 .vue文件
因此需要给.vue文件加上类型说明文件
解决方法：在项目根目录或 src 文件夹下创建一个后缀为 .d.ts 的文件，并vite-env.d.ts写入以下内容：

declaremodule'*.vue'{importtype{ DefineComponent }from'vue'// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-typesconst component: DefineComponent<{},{},any>exportdefault component
}

九、添加api,封装请求（axios）

1. 安装依赖pnpm install axios --save
2. 新建api文件夹，utils文件夹，及创建request.ts文件

十、pinia状态管理器

1. 安装依赖：pnpm install pinia --save
2. 在src目录下新建文件夹store,在store文件下新建文件index.ts和modules文件夹
3. 在index.ts文件中引入pinia，创建pinia实例，挂载到根组件上
4. 在main.ts文件中引入store，并挂载到根组件上

十一、pinia状态持久化处理

pnpminstall  pinia-plugin-persistedstate --save
persist: true// 开启持久化存储

十二、滚动条美化处理

::-webkit-scrollbar{width: 6px;height: 6px;}::-webkit-scrollbar-track{background-color: #f1f1f1;}::-webkit-scrollbar-thumb{background-color: #c0c0c0;border-radius: 3px;}

十三、vue3告别.value,ref要求我们访问变量时需要加上.value

let count =ref(1)constaddCount=()=>{
  count.value +=1}

尤大也提交了一份新的ref语法糖提案。

ref: count =1constaddCount=()=>{
  count +=1}

官方后来出的一种方案，在ref前加上$，该功能默认关闭，需要手动开启, vite.config.ts内容配置如下：

import{ defineConfig }from'vite'import vue from'@vitejs/plugin-vue'exportdefaultdefineConfig({
  plugins:[vue({
      refTransform:true// 开启ref转换})]})

开启之后的写法

let count =$ref(1)constaddCount=()=>{
  count++}

十四、svg-icon的应用

pnpminstall vite-plugin-svg-icons -S

在vite.config.ts中配置：

import{ createSvgIconsPlugin }from"vite-plugin-svg-icons";createSvgIconsPlugin({
  iconDirs:[path.resolve(process.cwd(),'src/assets/icons/svg')],
  symbolId:'icon-[dir]-[name]',})

assets文件夹新建icons文件夹，新建svg文件夹，新建svg文件夹下新建svg文件，文件名随意
在components文件夹下新建SvgIcon文件夹，新建index.vue内容如下：

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" :fill="color" />
  </svg>
</template>

<script>
export default defineComponent({
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
  },
  setup(props) {
    return {
      iconName: computed(() => `#icon-${props.iconClass}`),
      svgClass: computed(() => {
        if (props.className) {
          return `svg-icon ${props.className}`
        }
        return 'svg-icon'
      })
    }
  }
})
</script>

<style scope lang="scss">
.sub-el-icon,
.nav-icon {
  display: inline-block;
  font-size: 15px;
  margin-right: 12px;
  position: relative;
}

.svg-icon {
  width: 1em!important;
  height: 1em!important;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
</style>

新建svgicon.ts文件

import*as components from'@element-plus/icons-vue'exportdefault{install:(app)=>{for(const key in components){const componentConfig = components[key];
            app.component(componentConfig.name, componentConfig);}},};

应用到vue文件

<svg-icon :icon-class="item.meta && item.meta.icon" />

渲染结果是home.svg

<svgclass="svg-icon"aria-hidden="true"><usexlink:href="#icon-home"fill=""></use></svg>

在main.ts引入svg-icon

import"virtual:svg-icons-register";import SvgIcon from'@/components/SvgIcon'import elementIcons from'@/components/SvgIcon/svgicon'
app.use(elementIcons)
app.component('svg-icon', SvgIcon)

最终vite.config.ts内容如下：

/* eslint-disable import/no-extraneous-dependencies */import{ defineConfig, loadEnv }from"vite";import path from"path";import vue from"@vitejs/plugin-vue";import eslintPlugin from"vite-plugin-eslint";import AutoImport from"unplugin-auto-import/vite";import Components from"unplugin-vue-components/vite";import{ ElementPlusResolver }from"unplugin-vue-components/resolvers";import{
  createStyleImportPlugin,
  ElementPlusResolve
}from"vite-plugin-style-import";import{ createSvgIconsPlugin }from"vite-plugin-svg-icons";import VueSetupExtend from'vite-plugin-vue-setup-extend'exportdefaultdefineConfig(({ mode })=>{const env =loadEnv(mode, process.cwd());const{VITE_APP_BASE_API,VITE_SERVE,VITE_PORT}= env
  return{
    plugins:[vue({
        refTransform:true// 开启ref转换,不用.value,直接$ref}),eslintPlugin(),AutoImport({
        imports:["vue","vue-router"],
        dts:"src/auto-import.d.ts",// 路径下自动生成文件夹存放全局指令
        eslintrc:{
          enabled:true,// 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗},
        resolvers:[ElementPlusResolver()]}),Components({
        dts:"./src/components.d.ts",// 创建ts文件
        extensions:["vue"],// 指定文件的后缀
        dirs:["src/components/"],// 指定路径，自动导入自定义组件
        resolvers:[ElementPlusResolver()],// 指定自动引入的组件库，也就是从插件中导出的那个}),// 配置自动导入element startcreateStyleImportPlugin({
        resolves:[ElementPlusResolve()],
        libs:[{
            libraryName:"element-plus",
            esModule:true,resolveStyle:(name:string)=>`element-plus/theme-chalk/${name}.css`,},],}),createSvgIconsPlugin({
        iconDirs:[path.resolve(process.cwd(),'src/assets/icons/svg')],
        symbolId:'icon-[dir]-[name]',}),VueSetupExtend()],
    base:"./",// 在生产中服务时的基本公共路径
    publicDir:"public",// 静态资源服务的文件夹, 默认"public"
    resolve:{
      alias:{"@": path.resolve(__dirname,"./src"),// 相对路径别名配置，使用 @ 代替 src},
      extensions:[".mjs",".js",".ts",".jsx",".tsx",".json",".vue"],},// 本地运行配置
    server:{
      host:'0.0.0.0',
      port:VITE_PORT||80,
      https:false,
      open:true,
      proxy:{[VITE_APP_BASE_API]:{
          target:VITE_SERVE,
          changeOrigin:true,rewrite: path => path.replace(RegExp(`^${VITE_APP_BASE_API}`),'')}},
      disableHostCheck:true},// 打包配置
    build:{
      target:"modules",// 设置最终构建的浏览器兼容目标。modules:支持原生 ES 模块的浏览器
      outDir:"dist",// 指定输出路径
      assetsDir:"assets",// 指定生成静态资源的存放路径
      assetsInlineLimit:"4096",// 小于此阈值的导入或引用资源将内联为base64编码，设置为0可禁用此项。默认4096（4kb）
      cssCodeSplit:true,// 启用/禁用CSS代码拆分，如果禁用，整个项目的所有CSS将被提取到一个CSS文件中,默认true
      sourcemap:false,// 构建后是否生成 source map 文件
      minify:"terser",// 混淆器，terser构建后文件体积更小
      write:true,// 设置为 false 来禁用将构建后的文件写入磁盘
      emptyOutDir:true,// 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
      chunkSizeWarningLimit:500,// chunk 大小警告的限制
      terserOptions:{
        compress:{
          drop_console:true,
          drop_debugger:true,},},// 去除 console debugger},};});