zqy233的前端学习笔记

主题

回到顶部
索引

vite

导入vue组件注意点

手动导入的情况下，不能省略vue后缀，会报错

图片路径

绝对路径

html
<img src="src/assets/img"/>

<img src="src/assets/img"/>

相对路径

html
<img src="../../assets/img"/>

<img src="../../assets/img"/>

动态绑定路径

但是上述写法不适用于动态绑定路径

因为vite中没有require

写法一（推荐）

ts
<template><img :src="requireImg('logo.png')" /></template>

<script lang="ts" setup>
const function requireImg(name) {
  return new URL(`/src/assets/imgs/${name}`, import.meta.url).href
}
</script>

<template><img :src="requireImg('logo.png')" /></template>

<script lang="ts" setup>
const function requireImg(name) {
  return new URL(`/src/assets/imgs/${name}`, import.meta.url).href
}
</script>

写法二（不推荐）

使用vite的import.meta.glob或import.meta.globEager，两者的区别是前者懒加载资源，后者直接引入

这种写法缺点很明显：

引入的文件必须指定到具体文件夹路径，传入的变量中只能为文件名，不能包含文件路径

ts
<template><img :src="requireImg('logo.png')" /></template>

<script lang="ts" setup>
const requireImg = (name: string) => {
  const path = `/src/assets/${name}`
  const modules = import.meta.globEager("/src/assets/*") // 这里的路径不能为变量
  return modules[path].default
}
</script>

<template><img :src="requireImg('logo.png')" /></template>

<script lang="ts" setup>
const requireImg = (name: string) => {
  const path = `/src/assets/${name}`
  const modules = import.meta.globEager("/src/assets/*") // 这里的路径不能为变量
  return modules[path].default
}
</script>

css使用路径别名

vue/cli(基于webpack)使用~@assets路径别名引入图片资源, 来从src/assets目录下引入图片

css
background: url("~@assets/imgs/img1.png")

background: url("~@assets/imgs/img1.png")

vite中可以自定义路径别名@assets，从而实现同样的路径别名

js
  resolve: {
    // 路径别名
    alias: {
      "@": resolve(__dirname, "src"),
      "@assets": resolve(__dirname, "src/assets"),
    }
  },

  resolve: {
    // 路径别名
    alias: {
      "@": resolve(__dirname, "src"),
      "@assets": resolve(__dirname, "src/assets"),
    }
  },

unplugin-auto-import

自动导入composition api和生成全局typescript声明

下载

sh
yarn add -D unplugin-auto-import

yarn add -D unplugin-auto-import

vite.config.ts配置

ts
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  ...
  plugins: [
    ...
    AutoImport({
      imports: ['vue', 'vue-router', "vuex"], // 自动导入composition api
      dts: 'src/auto-import.d.ts' // 生成 `auto-import.d.ts` 全局声明
    })
  ]
})

import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  ...
  plugins: [
    ...
    AutoImport({
      imports: ['vue', 'vue-router', "vuex"], // 自动导入composition api
      dts: 'src/auto-import.d.ts' // 生成 `auto-import.d.ts` 全局声明
    })
  ]
})

vue.config.js配置

js
const AutoImport = require("unplugin-auto-import/webpack")

module.exports = {
  ...
  configureWebpack: {
    ...
    plugins: [
      AutoImport({
         imports: ["vue", "vue-router", "vuex"], // 自动导入composition api
         dts: "src/auto-import.d.ts", // 生成 `auto-import.d.ts` 全局声明
      })
  }
}

const AutoImport = require("unplugin-auto-import/webpack")

module.exports = {
  ...
  configureWebpack: {
    ...
    plugins: [
      AutoImport({
         imports: ["vue", "vue-router", "vuex"], // 自动导入composition api
         dts: "src/auto-import.d.ts", // 生成 `auto-import.d.ts` 全局声明
      })
  }
}

自定义导入包

unplugin-auto-import内置了一些主流的包，但实际开发中这远远不够

如果想导入其他的包，可以在imports中使用对象形式, 设置自定义按需导入的包，当然，你需要先安装这个包

vite.config.ts设置

ts
  AutoImport({
         imports: ["vue", "vue-router", { "just-now-time": ["nowTime", "formatTime", "timeCn", "whatDay", "whatDayEn"] }], // 自动导入composition api
         dts: "src/auto-import.d.ts", // 生成 `auto-import.d.ts` 全局声明
      })

  AutoImport({
         imports: ["vue", "vue-router", { "just-now-time": ["nowTime", "formatTime", "timeCn", "whatDay", "whatDayEn"] }], // 自动导入composition api
         dts: "src/auto-import.d.ts", // 生成 `auto-import.d.ts` 全局声明
      })

相当于

ts
import { nowTime,formatTime,timeCn,whatDay,whatDayEn } from "just-now-time"

import { nowTime,formatTime,timeCn,whatDay,whatDayEn } from "just-now-time"

导入本地路径的ts文件

也可以使用自定义导入包的写法，来导入指定路径下的ts文件

src目录下新建test.ts

ts
export function useA() {
  console.log("A")
}

export function useA() {
  console.log("A")
}

vite.config.ts设置

ts
 AutoImport({
      imports: ["vue", "@vueuse/core", { "./test": ["useA"] }],
    })

 AutoImport({
      imports: ["vue", "@vueuse/core", { "./test": ["useA"] }],
    })

相当于

ts
import { useA } from "./test"

import { useA } from "./test"

unplugin-vue-components

自动注册和导入组件

下载

sh
yarn add -D unplugin-vue-components

yarn add -D unplugin-vue-components

vite.config.ts配置

ts
import Components from "unplugin-vue-components/vite"
export default defineConfig({
  plugins: [
    ...
     Components({
      dirs: ["src/components"], // 要导入组件的目录路径
      deep: true, // 搜索子目录
      dts: "src/components/components.d.ts", // 生成 `components.d.ts` 全局声明
    })
  ]
})

import Components from "unplugin-vue-components/vite"
export default defineConfig({
  plugins: [
    ...
     Components({
      dirs: ["src/components"], // 要导入组件的目录路径
      deep: true, // 搜索子目录
      dts: "src/components/components.d.ts", // 生成 `components.d.ts` 全局声明
    })
  ]
})

vue.config.js配置

js
const Components = require("unplugin-vue-components/webpack")

module.exports = {
  ...
  configureWebpack: {
    plugins: [
       ...
      // 自动按需导入element-plus组件
      Components({
        dirs: ["src/components"], // 要导入组件的目录路径
        deep: true, // 搜索子目录
        dts: "src/components/components.d.ts", // 生成 `components.d.ts` 全局声明
      })
    ]
  }
}

const Components = require("unplugin-vue-components/webpack")

module.exports = {
  ...
  configureWebpack: {
    plugins: [
       ...
      // 自动按需导入element-plus组件
      Components({
        dirs: ["src/components"], // 要导入组件的目录路径
        deep: true, // 搜索子目录
        dts: "src/components/components.d.ts", // 生成 `components.d.ts` 全局声明
      })
    ]
  }
}

现在src/components目录下的所有vue组件会自动注册为组件，直接使用即可

按需导入组件库

内置Resolver可以按需导入很多组件库，比如element-plus

sh
yarn add element-plus
yarn add -D sass  
yarn add -D sass-loader@10.2.0

yarn add element-plus
yarn add -D sass  
yarn add -D sass-loader@10.2.0

之后如下配置

vite.config.ts配置

ts
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
export default defineConfig({
  plugins: [
    ...
    Components({
      dirs: ["src/components"], // 要搜索组件的目录的相对路径
      deep: true, // 搜索子目录
      dts: "src/components/components.d.ts", // 生成 `components.d.ts` 全局声明
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass"
        })
      ]
    })
  ]
})

import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
export default defineConfig({
  plugins: [
    ...
    Components({
      dirs: ["src/components"], // 要搜索组件的目录的相对路径
      deep: true, // 搜索子目录
      dts: "src/components/components.d.ts", // 生成 `components.d.ts` 全局声明
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass"
        })
      ]
    })
  ]
})

vue.config.js配置

js
const Components = require("unplugin-vue-components/webpack")
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers")

module.exports = {
  ...
  configureWebpack: {
    plugins: [
       ...
      // 自动按需导入element-plus组件
      Components({
        dirs: ["src/components"], // 要导入组件的目录路径
        deep: true, // 搜索子目录
        dts: "src/components/components.d.ts", // 生成 `components.d.ts` 全局声明
        resolvers: [
          ElementPlusResolver({
            importStyle: "sass"
          })
        ]
      })
    ]
}

const Components = require("unplugin-vue-components/webpack")
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers")

module.exports = {
  ...
  configureWebpack: {
    plugins: [
       ...
      // 自动按需导入element-plus组件
      Components({
        dirs: ["src/components"], // 要导入组件的目录路径
        deep: true, // 搜索子目录
        dts: "src/components/components.d.ts", // 生成 `components.d.ts` 全局声明
        resolvers: [
          ElementPlusResolver({
            importStyle: "sass"
          })
        ]
      })
    ]
}

这样就可以在页面中直接使用element-plus组件了，是的，不需要在main.ts里导入element-plus，然后进行Vue.use，就是这么厉害，直接在页面中用就完事了，并且按需加载组件和样式，非常的强大

全局scss

创建scss文件

新建src/assets/css/global.scss，内容如下：

js
// 这部分用于更改element-plus主题色
$blue: skyblue;
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": $blue
    )
  )
);
:export {
  primaryColor: $blue;
}
// 这部分定义全局的scss混用
@mixin flex {
  display: flex;
  align-items: center;
}

@mixin background {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

// 这部分用于更改element-plus主题色
$blue: skyblue;
@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    "primary": (
      "base": $blue
    )
  )
);
:export {
  primaryColor: $blue;
}
// 这部分定义全局的scss混用
@mixin flex {
  display: flex;
  align-items: center;
}

@mixin background {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

vite.config.ts配置

js
export default defineConfig({
  base: "./", // 根路径
  // 全局加载scss文件
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/assets/css/element-plus.scss" as *;`,
        charset: false
      }
    }
  },
  ...
})

export default defineConfig({
  base: "./", // 根路径
  // 全局加载scss文件
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/assets/css/element-plus.scss" as *;`,
        charset: false
      }
    }
  },
  ...
})

vue.config.js配置

js
module.exports = {
  publicPath: "./", // 根路径
  // 全局加载scss文件
  css: {
    loaderOptions: {
      sass: {
        prependData: `@use "src/assets/css/element-plus.scss" as *;`
      }
    }
  },
  ...
}

module.exports = {
  publicPath: "./", // 根路径
  // 全局加载scss文件
  css: {
    loaderOptions: {
      sass: {
        prependData: `@use "src/assets/css/element-plus.scss" as *;`
      }
    }
  },
  ...
}

vite-plugin-pages

vite插件，可以读取文件夹下的vue文件，自动生成vue-router的路由信息，这样以后每次有新的vue页面增加，都不用去更改vue-router的路由信息代码了，减少了工作量

下载

sh
yarn add -D vite-plugin-pages
yarn add vue-router@next

yarn add -D vite-plugin-pages
yarn add vue-router@next

vite.config.ts配置

ts
import Pages from "vite-plugin-pages"
export default defineConfig({
  plugins: [
    ...
      Pages({
      // 自动读取src/views下的vue文件，生成路由信息，默认路由路径'/‘
      dirs: [{ dir: "src/views", baseRoute: "/" }],
      // 异步方式加载路由组件
      importMode: "async",
      // 遍历路由信息，给默认路由加一个redirect
      extendRoute(route) {
       if (route.path === "/") return { ...route, redirect: "login" }
      }
    })
  ]
})

import Pages from "vite-plugin-pages"
export default defineConfig({
  plugins: [
    ...
      Pages({
      // 自动读取src/views下的vue文件，生成路由信息，默认路由路径'/‘
      dirs: [{ dir: "src/views", baseRoute: "/" }],
      // 异步方式加载路由组件
      importMode: "async",
      // 遍历路由信息，给默认路由加一个redirect
      extendRoute(route) {
       if (route.path === "/") return { ...route, redirect: "login" }
      }
    })
  ]
})

main.ts中使用vue-router

typescript
import { createApp } from "vue"
import App from "./App.vue"

import { createRouter, createWebHashHistory } from "vue-router"
// 这里就是vite-plugin-pages生成的路由信息，正常使用即可
import routes from "virtual:generated-pages"

const router = createRouter({
  history: createWebHashHistory(),
  routes
})
createApp(App).use(router).mount("#app")

import { createApp } from "vue"
import App from "./App.vue"

import { createRouter, createWebHashHistory } from "vue-router"
// 这里就是vite-plugin-pages生成的路由信息，正常使用即可
import routes from "virtual:generated-pages"

const router = createRouter({
  history: createWebHashHistory(),
  routes
})
createApp(App).use(router).mount("#app")

使用typescript支持

在env.d.ts中加入 /// <reference types="vite-plugin-pages/client" />

typescript
/// <reference types="vite/client" />
/// <reference types="vite-plugin-pages/client" />
declare module "*.vue" {
  import type { DefineComponent } from "vue"
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

/// <reference types="vite/client" />
/// <reference types="vite-plugin-pages/client" />
declare module "*.vue" {
  import type { DefineComponent } from "vue"
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

现在可以在src/views下定义vue文件，会自动生成vue-router的路由信息 那么问题来了，遵循的规则是什么呢？很简单，像示例这样即可，我觉得还是很一目了然的，不用太多介绍

  • src/views/index.vue -> /
  • src/views/index/a.vue -> /a // 这里的a.vue就是index.vue的子路由（children）
  • src/views/father.vue -> /father
  • src/views/father/son.vue -> /father/son
  • src/views/father/[id].vue -> /father/:id
  • src/views/[father]/son.vue -> /:father/son

综上

综上的依赖下载

sh
yarn add -D unplugin-auto-import unplugin-vue-components vite-plugin-pages sass  sass-loader@10.2.0
yarn add element-plus vue-router@next

yarn add -D unplugin-auto-import unplugin-vue-components vite-plugin-pages sass  sass-loader@10.2.0
yarn add element-plus vue-router@next

vite.config.ts配置

ts
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { resolve } from "path"
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
import Pages from "vite-plugin-pages"

export default defineConfig({
  base: "./", // 根路径
  // 全局加载的scss文件
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/assets/css/element-plus.scss" as *;`,
        charset: false
      }
    }
  },
  plugins: [
    // 识别vue
    vue(),
    // 自动导入vue3中composition api函数
    AutoImport({
      include: [/\.vue$/, /\.vue\?vue/], // 作用于所有vue文件
      dts: "src/auto-import.d.ts", // 生成全局的vue函数的typescript定义
      imports: ["vue", "vue-router", "vuex"] // vue和vue-router都自动导入
    }),
    // 自动按需导入element-plus组件
    Components({
      dts: "src/element-plus-auto-import.d.ts",
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass"
        })
      ]
    }),
    Pages({
      // 自动读取src/views下的vue文件，生成路由信息，默认路由路径'/‘
      dirs: [{ dir: "src/views", baseRoute: "/" }],
      // 异步方式加载路由组件
      importMode: "async"
      // 遍历路由信息，给默认路由加一个redirect
      // extendRoute(route) {
      //   if (route.path === "/") return { ...route, redirect: "login" }
      // }
    })
  ],
  // 路径别名
  resolve: {
    alias: {
      "@": resolve("src"),
      "~@assets": resolve(__dirname, "src/assets"),
      "@utils": resolve("src/utils")
    }
  },
  server: {
    open: true // 是否自动打开浏览器
  }
})

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { resolve } from "path"
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
import Pages from "vite-plugin-pages"

export default defineConfig({
  base: "./", // 根路径
  // 全局加载的scss文件
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/assets/css/element-plus.scss" as *;`,
        charset: false
      }
    }
  },
  plugins: [
    // 识别vue
    vue(),
    // 自动导入vue3中composition api函数
    AutoImport({
      include: [/\.vue$/, /\.vue\?vue/], // 作用于所有vue文件
      dts: "src/auto-import.d.ts", // 生成全局的vue函数的typescript定义
      imports: ["vue", "vue-router", "vuex"] // vue和vue-router都自动导入
    }),
    // 自动按需导入element-plus组件
    Components({
      dts: "src/element-plus-auto-import.d.ts",
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass"
        })
      ]
    }),
    Pages({
      // 自动读取src/views下的vue文件，生成路由信息，默认路由路径'/‘
      dirs: [{ dir: "src/views", baseRoute: "/" }],
      // 异步方式加载路由组件
      importMode: "async"
      // 遍历路由信息，给默认路由加一个redirect
      // extendRoute(route) {
      //   if (route.path === "/") return { ...route, redirect: "login" }
      // }
    })
  ],
  // 路径别名
  resolve: {
    alias: {
      "@": resolve("src"),
      "~@assets": resolve(__dirname, "src/assets"),
      "@utils": resolve("src/utils")
    }
  },
  server: {
    open: true // 是否自动打开浏览器
  }
})

vue.config.js配置

js
const AutoImport = require("unplugin-auto-import/webpack")
const Components = require("unplugin-vue-components/webpack")
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers")

module.exports = {
  publicPath: "./", // 根路径
  productionSourceMap: false, // 打包后不生成map文件
  // 全局加载的scss文件
  css: {
    loaderOptions: {
      sass: {
        prependData: `@use "src/assets/css/element-plus.scss" as *;`
      }
    }
  },
  configureWebpack: {
    plugins: [
      AutoImport({
        include: [/\.vue$/, /\.vue\?vue/], // 作用于所有vue文件
        dts: "src/auto-import.d.ts", // 生成全局的vue函数的typescript定义
        imports: ["vue", "vue-router", "vuex"] // 自动导入composition api
      }),
      // 自动按需导入element-plus组件
      Components({
        dts: true,
        resolvers: [
          ElementPlusResolver({
            importStyle: "sass"
          })
        ]
      })
    ],
    // 路径别名
    resolve: {
      alias: {
        "@assets": "@/assets",
        "@utils": "@/utils"
      }
    }
  },
  // 端口号
  devServer: {
    port: 8080
  }
}

const AutoImport = require("unplugin-auto-import/webpack")
const Components = require("unplugin-vue-components/webpack")
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers")

module.exports = {
  publicPath: "./", // 根路径
  productionSourceMap: false, // 打包后不生成map文件
  // 全局加载的scss文件
  css: {
    loaderOptions: {
      sass: {
        prependData: `@use "src/assets/css/element-plus.scss" as *;`
      }
    }
  },
  configureWebpack: {
    plugins: [
      AutoImport({
        include: [/\.vue$/, /\.vue\?vue/], // 作用于所有vue文件
        dts: "src/auto-import.d.ts", // 生成全局的vue函数的typescript定义
        imports: ["vue", "vue-router", "vuex"] // 自动导入composition api
      }),
      // 自动按需导入element-plus组件
      Components({
        dts: true,
        resolvers: [
          ElementPlusResolver({
            importStyle: "sass"
          })
        ]
      })
    ],
    // 路径别名
    resolve: {
      alias: {
        "@assets": "@/assets",
        "@utils": "@/utils"
      }
    }
  },
  // 端口号
  devServer: {
    port: 8080
  }
}

vite-plugin-md

sh
yarn add -D vite-plugin-md

yarn add -D vite-plugin-md

自动注册 md 文件为 vue 组件

prism-theme-vars

sh
yarn add prism-theme-vars

yarn add prism-theme-vars

prism 主题变量

新建 style.css,在 main.js 中导入

安装 vue devtools

vue devtools 是一个谷歌插件，用于开发 vue 项目时进行调试

使用极速插件网(一个快速安装下载谷歌浏览器插件的网站)进行下载安装

下载完成后如何安装插件：

  1. 打开谷歌浏览器

  2. 点击右上角三个点

  3. 选择更多工具

  4. 选择拓展程序

  5. 打开开发者模式

  6. 拖拽解压后的插件至浏览器中

安装postcss-pxtorem/autoprefixer

postcss-pxtorem 用于将px转换成rem

autoprefixer 用于添加兼容性的css属性名前缀

sh
npm i -D postcss-pxtorem 
npm i -D autoprefixer

npm i -D postcss-pxtorem 
npm i -D autoprefixer

根目录新建postcss.config.js

js
module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 192, // 换算的基数默认100，192px宽元素换算成1rem
      propList: ["*"], // 需要转换px为rem的属性
      unitPrecision: 5, // 允许REM单位增长到的十进制数字
      exclude: /node_modules/i // 不转换node_modules中内容，主要是组件库的字体
    },
    autoprefixer: {
      overrideBrowserslist: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8", "last 10 versions"],
      grid: true
    }
  }
}

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 192, // 换算的基数默认100，192px宽元素换算成1rem
      propList: ["*"], // 需要转换px为rem的属性
      unitPrecision: 5, // 允许REM单位增长到的十进制数字
      exclude: /node_modules/i // 不转换node_modules中内容，主要是组件库的字体
    },
    autoprefixer: {
      overrideBrowserslist: ["Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8", "last 10 versions"],
      grid: true
    }
  }
}

设置proxy

Type: string | Object

如果前端应用和后端 API 服务器没有运行在同一个主机上需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

js
module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000

如果你想要更多的代理控制行为，也可以使用一个 path: options 对象。完整的选项可以查阅http-proxy-middleware

配置element-plus

使用图标(基于iconify)

Iconify支持100多个图标集，上万种图标可随意使用，https://icon-sets.iconify.design/

sh
npm i -D @iconify-json/ep unplugin-icons

npm i -D @iconify-json/ep unplugin-icons
ts
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { resolve } from "path"
import Icons from "unplugin-icons/vite"
import IconsResolver from "unplugin-icons/resolver"
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
import Pages from "vite-plugin-pages"

export default defineConfig({
  base: "./", // 根路径
  // 全局加载的scss文件
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/assets/css/element-plus.scss" as *;`,
        charset: false
      }
    }
  },
  plugins: [
    // 识别vue
    vue(),
    Pages({
      // 自动读取src/views下的vue文件，生成路由信息，默认路由路径'/‘
      dirs: [{ dir: "src/views", baseRoute: "/" }],
      // 异步方式加载路由组件
      importMode: "async"
      // 遍历路由信息，给默认路由加一个redirect
      // extendRoute(route) {
      //   if (route.path === "/") return { ...route, redirect: "login" }
      // }
    }),
    // 自动导入vue3中composition api函数
    AutoImport({
      include: [/\.vue$/, /\.vue\?vue/], // 作用于所有vue文件
      dts: "src/auto-import.d.ts", // 生成全局的vue函数的typescript定义
      imports: ["vue", "vue-router", "vuex"], // vue和vue-router都自动导入
      resolvers: [
        // 自动导入element-plus函数，如message
        ElementPlusResolver(),
        // 自动导入图标组件
        IconsResolver({
          prefix: "Icon"
        })
      ]
    }),
    // 自动按需导入element-plus组件
    Components({
      dts: "src/element-plus-auto-import.d.ts",
      // 自动注册图标组件
      resolvers: [
        IconsResolver({
          enabledCollections: ["ep"]
        }),
        ElementPlusResolver({
          importStyle: "sass"
        })
      ]
    }),
    // 自动下载
    Icons({
      autoInstall: true
    })
  ],
  // 路径别名
  resolve: {
    alias: {
      "@": resolve("src"),
      "~@assets": resolve(__dirname, "src/assets"),
      "@utils": resolve("src/utils")
    }
  },
  server: {
    open: true // 是否自动打开浏览器
  }
})

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { resolve } from "path"
import Icons from "unplugin-icons/vite"
import IconsResolver from "unplugin-icons/resolver"
import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
import Pages from "vite-plugin-pages"

export default defineConfig({
  base: "./", // 根路径
  // 全局加载的scss文件
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/assets/css/element-plus.scss" as *;`,
        charset: false
      }
    }
  },
  plugins: [
    // 识别vue
    vue(),
    Pages({
      // 自动读取src/views下的vue文件，生成路由信息，默认路由路径'/‘
      dirs: [{ dir: "src/views", baseRoute: "/" }],
      // 异步方式加载路由组件
      importMode: "async"
      // 遍历路由信息，给默认路由加一个redirect
      // extendRoute(route) {
      //   if (route.path === "/") return { ...route, redirect: "login" }
      // }
    }),
    // 自动导入vue3中composition api函数
    AutoImport({
      include: [/\.vue$/, /\.vue\?vue/], // 作用于所有vue文件
      dts: "src/auto-import.d.ts", // 生成全局的vue函数的typescript定义
      imports: ["vue", "vue-router", "vuex"], // vue和vue-router都自动导入
      resolvers: [
        // 自动导入element-plus函数，如message
        ElementPlusResolver(),
        // 自动导入图标组件
        IconsResolver({
          prefix: "Icon"
        })
      ]
    }),
    // 自动按需导入element-plus组件
    Components({
      dts: "src/element-plus-auto-import.d.ts",
      // 自动注册图标组件
      resolvers: [
        IconsResolver({
          enabledCollections: ["ep"]
        }),
        ElementPlusResolver({
          importStyle: "sass"
        })
      ]
    }),
    // 自动下载
    Icons({
      autoInstall: true
    })
  ],
  // 路径别名
  resolve: {
    alias: {
      "@": resolve("src"),
      "~@assets": resolve(__dirname, "src/assets"),
      "@utils": resolve("src/utils")
    }
  },
  server: {
    open: true // 是否自动打开浏览器
  }
})

使用

html
<i-ep-add-location />

<i-ep-add-location />

暗黑主题

main.js中导入

js
import "element-plus/theme-chalk/dark/css-vars.css"

import "element-plus/theme-chalk/dark/css-vars.css"

html使用class="dark"

配置vxe-table

ts
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import Components from "unplugin-vue-components/vite"
import { createStyleImportPlugin, VxeTableResolve } from "vite-plugin-style-import"

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // 配置自动注册vxe-table组件
      resolvers: [
        componentName => {
          if (componentName.startsWith("Vxe")) return { name: componentName.slice(3), from: "vxe-table" }
        }
      ]
    }),
    // 配置自动导入vxe-table组件样式
    createStyleImportPlugin({
      resolves: [VxeTableResolve()]
    })
  ]
})

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import Components from "unplugin-vue-components/vite"
import { createStyleImportPlugin, VxeTableResolve } from "vite-plugin-style-import"

export default defineConfig({
  plugins: [
    vue(),
    Components({
      // 配置自动注册vxe-table组件
      resolvers: [
        componentName => {
          if (componentName.startsWith("Vxe")) return { name: componentName.slice(3), from: "vxe-table" }
        }
      ]
    }),
    // 配置自动导入vxe-table组件样式
    createStyleImportPlugin({
      resolves: [VxeTableResolve()]
    })
  ]
})

综合

sh
npm i -s element-plus vue-router vuex xe-utils vxe-table echarts vue-echarts nprogress axios

npm i -s element-plus vue-router vuex xe-utils vxe-table echarts vue-echarts nprogress axios
sh
npm i -D unplugin-vue-components sass sass-loader postcss-pxtorem

npm i -D unplugin-vue-components sass sass-loader postcss-pxtorem

创建

js
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { resolve } from "path"
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
export default defineConfig({
  base: "./", // 根路径
  // 全局加载scss文件
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/assets/css/element-plus.scss" as *;`,
        charset: false
      }
    }
  },
  plugins: [
    // 识别vue
    vue(),
    // 自动按需导入element-plus组件
    Components({
      dirs: ["src/components"], // 要导入组件的目录路径
      extensions: ["vue"],
      deep: true, // 搜索子目录
      dts: false, // 不使用ts
      include: [/\.vue$/, /\.vue\?vue/], // 只识别vue文件
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass"
        })
      ]
    })
  ],
  resolve: {
    // 路径别名
    alias: {
      "@": resolve(__dirname, "src"),
      "~@assets": resolve(__dirname, "src/assets"),
      "@utils": resolve(__dirname, "src/utils")
    }
  },
  server: {
    // 设置代理
    // proxy: {
    //   "/tzMessageManage": "http://192.168.1.236:10007"
    // },
    port: 9005, // 端口号
    open: true // 是否自动打开浏览器
  }
})

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import { resolve } from "path"
import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
export default defineConfig({
  base: "./", // 根路径
  // 全局加载scss文件
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "src/assets/css/element-plus.scss" as *;`,
        charset: false
      }
    }
  },
  plugins: [
    // 识别vue
    vue(),
    // 自动按需导入element-plus组件
    Components({
      dirs: ["src/components"], // 要导入组件的目录路径
      extensions: ["vue"],
      deep: true, // 搜索子目录
      dts: false, // 不使用ts
      include: [/\.vue$/, /\.vue\?vue/], // 只识别vue文件
      resolvers: [
        ElementPlusResolver({
          importStyle: "sass"
        })
      ]
    })
  ],
  resolve: {
    // 路径别名
    alias: {
      "@": resolve(__dirname, "src"),
      "~@assets": resolve(__dirname, "src/assets"),
      "@utils": resolve(__dirname, "src/utils")
    }
  },
  server: {
    // 设置代理
    // proxy: {
    //   "/tzMessageManage": "http://192.168.1.236:10007"
    // },
    port: 9005, // 端口号
    open: true // 是否自动打开浏览器
  }
})

Released under the MIT License.

Copyright © 2022.4-2024.7