Skip to content

Commit

Permalink
feat: add vite-plugin-vue-devtools plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
@flingyp
flingyp committed Jan 2, 2024
1 parent 6da34f2 commit 725225e
Show file tree
Hide file tree
Showing 4 changed files with 559 additions and 171 deletions.
308 changes: 159 additions & 149 deletions build/plugins.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import IconsResolver from 'unplugin-icons/resolver';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
import { Plugin as viteCDNPlugin } from 'vite-plugin-cdn-import';
import { VitePWA } from 'vite-plugin-pwa';
import VueDevTools from 'vite-plugin-vue-devtools';

import { name, version } from '../package.json';

Expand All @@ -19,161 +20,170 @@ import { name, version } from '../package.json';
* @param mode
* @returns
*/
export const generatePlugins = (command: string, mode: string): PluginOption[] => [
vue(),
// Mock Api
ViteMockServe({
mockPath: 'mock',
localEnabled: command === 'serve',
prodEnabled: command !== 'serve' && mode === 'development',
watchFiles: command === 'serve',
logger: true,
injectCode: `
import { setupProdMockServer } from './mock-prod-server';
setupProdMockServer();
`,
}),
// Auto import api
AutoImport({
imports: ['vue', 'vue-router', 'vue-i18n', 'pinia', '@vueuse/core'],
dts: 'auto-imports.d.ts',
dirs: ['src/utils/**', 'src/store/**', 'src/composables/**'],
vueTemplate: true,
}),
// Auto import component
Components({
extensions: ['vue'],
include: [/\.vue$/, /\.vue\?vue/],
exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
dts: 'components.d.ts',
types: [
{
from: 'vue-router',
names: ['RouterLink', 'RouterView'],
},
],
resolvers: [
IconsResolver({
prefix: 'icon',
}),
NaiveUiResolver(),
],
}),
// Auto use Iconify icon
Icons({
autoInstall: true,
compiler: 'vue3',
scale: 1.2,
defaultStyle: '',
defaultClass: 'unplugin-icon',
jsx: 'react',
}),
// First screen loading
spaLoading('svg', {
path: './public/spa-loading.svg',
cssPath: './public/spa-loading.css',
}),
// Clear console
clearConsole({
inject: {
path: './src/main.ts',
template: [
` console.log('%c${name}%cV${version}',
'padding: 2px 5px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;',
'padding: 2px 5px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;')
`,
"console.log('%cGithub repository: https://github.com/flingyp/vadmire-admin', 'color: #1c6ce3;')",
],
},
}),
viteCDNPlugin({
modules: [
{
name: 'xlsx',
var: 'XLSX',
path: 'https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js',
},
{
name: 'vditor',
var: 'Vditor',
path: 'https://unpkg.com/vditor@3.9.3/dist/index.min.js',
},
{
name: '@wangeditor/editor',
var: 'wangEditor',
path: 'https://unpkg.com/@wangeditor/editor@5.1.23/dist/index.js',
},
],
}),
// 将 node_modules 中的模块打包到自定义 vendor chunk 中，利用浏览器缓存机制，加快页面加载速度
// Vite >= 2.9.0+ automatically splits vendor chunks when using the build command.
// Reference: https://cn.vitejs.dev/guide/build.html#chunking-strategy
// splitVendorChunkPlugin(),
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['favicon.ico', 'logo.svg', '/pwa/180.png'],
devOptions: {
enabled: true,
},
manifest: {
name: 'VAdmire Admin',
short_name: 'VAdmire',
description: 'VAdmire Admin 是一款基于 Vue3 + TypeScript + NaiveUI 等技术栈搭建的后台系统',
theme_color: '#ffffff',
icons: [
{
src: 'pwa/128.png',
sizes: '128x128',
type: 'image/png',
},
{
src: 'pwa/144.png',
sizes: '144x144',
type: 'image/png',
},
{
src: 'pwa/152.png',
sizes: '152x152',
type: 'image/png',
},
{
src: 'pwa/167.png',
sizes: '167x167',
type: 'image/png',
},
{
src: 'pwa/180.png',
sizes: '180x180',
type: 'image/png',
},
export const generatePlugins = (command: string, mode: string): PluginOption[] => {
const pluginList = [
vue(),
// Mock Api
ViteMockServe({
mockPath: 'mock',
localEnabled: command === 'serve',
prodEnabled: command !== 'serve' && mode === 'development',
watchFiles: command === 'serve',
logger: true,
injectCode: `
import { setupProdMockServer } from './mock-prod-server';
setupProdMockServer();
`,
}),
// Auto import api
AutoImport({
imports: ['vue', 'vue-router', 'vue-i18n', 'pinia', '@vueuse/core'],
dts: 'auto-imports.d.ts',
dirs: ['src/utils/**', 'src/store/**', 'src/composables/**'],
vueTemplate: true,
}),
// Auto import component
Components({
extensions: ['vue'],
include: [/\.vue$/, /\.vue\?vue/],
exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
dts: 'components.d.ts',
types: [
{
src: 'pwa/192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: 'pwa/256.png',
sizes: '256x256',
type: 'image/png',
from: 'vue-router',
names: ['RouterLink', 'RouterView'],
},
],
resolvers: [
IconsResolver({
prefix: 'icon',
}),
NaiveUiResolver(),
],
}),
// Auto use Iconify icon
Icons({
autoInstall: true,
compiler: 'vue3',
scale: 1.2,
defaultStyle: '',
defaultClass: 'unplugin-icon',
jsx: 'react',
}),
// First screen loading
spaLoading('svg', {
path: './public/spa-loading.svg',
cssPath: './public/spa-loading.css',
}),
// Clear console
clearConsole({
inject: {
path: './src/main.ts',
template: [
` console.log('%c${name}%cV${version}',
'padding: 2px 5px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;',
'padding: 2px 5px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;')
`,
"console.log('%cGithub repository: https://github.com/flingyp/vadmire-admin', 'color: #1c6ce3;')",
],
},
}),
viteCDNPlugin({
modules: [
{
src: 'pwa/512.png',
sizes: '512x512',
type: 'image/png',
name: 'xlsx',
var: 'XLSX',
path: 'https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js',
},
{
src: 'pwa/512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any',
name: 'vditor',
var: 'Vditor',
path: 'https://unpkg.com/vditor@3.9.3/dist/index.min.js',
},
{
src: 'pwa/512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'maskable',
name: '@wangeditor/editor',
var: 'wangEditor',
path: 'https://unpkg.com/@wangeditor/editor@5.1.23/dist/index.js',
},
],
},
}),
];
}),
// 将 node_modules 中的模块打包到自定义 vendor chunk 中，利用浏览器缓存机制，加快页面加载速度
// Vite >= 2.9.0+ automatically splits vendor chunks when using the build command.
// Reference: https://cn.vitejs.dev/guide/build.html#chunking-strategy
// splitVendorChunkPlugin(),
VitePWA({
registerType: 'autoUpdate',
includeAssets: ['favicon.ico', 'logo.svg', '/pwa/180.png'],
devOptions: {
enabled: true,
},
manifest: {
name: 'VAdmire Admin',
short_name: 'VAdmire',
description: 'VAdmire Admin 是一款基于 Vue3 + TypeScript + NaiveUI 等技术栈搭建的后台系统',
theme_color: '#ffffff',
icons: [
{
src: 'pwa/128.png',
sizes: '128x128',
type: 'image/png',
},
{
src: 'pwa/144.png',
sizes: '144x144',
type: 'image/png',
},
{
src: 'pwa/152.png',
sizes: '152x152',
type: 'image/png',
},
{
src: 'pwa/167.png',
sizes: '167x167',
type: 'image/png',
},
{
src: 'pwa/180.png',
sizes: '180x180',
type: 'image/png',
},
{
src: 'pwa/192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: 'pwa/256.png',
sizes: '256x256',
type: 'image/png',
},
{
src: 'pwa/512.png',
sizes: '512x512',
type: 'image/png',
},
{
src: 'pwa/512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any',
},
{
src: 'pwa/512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'maskable',
},
],
},
}),
];

if (mode === 'development') {
// Enhance your Vue development experience
pluginList.push(VueDevTools());
}

return pluginList;
};
14 changes: 7 additions & 7 deletions components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,17 @@ declare module '@vue/runtime-core' {
'IconAntDesign:githubFilled': typeof import('~icons/ant-design/github-filled')['default']
'IconAntDesign:settingOutlined': typeof import('~icons/ant-design/setting-outlined')['default']
'IconCarbon:ibmWatsonLanguageTranslator': typeof import('~icons/carbon/ibm-watson-language-translator')['default']
'IconFa:weixin': (typeof import('~icons/fa/weixin'))['default']
'IconFa:weixin': typeof import('~icons/fa/weixin')['default']
'IconLineMd:menuFoldLeft': typeof import('~icons/line-md/menu-fold-left')['default']
'IconLineMd:menuFoldRight': typeof import('~icons/line-md/menu-fold-right')['default']
'IconLineMd:sunnyOutlineLoop': typeof import('~icons/line-md/sunny-outline-loop')['default']
'IconLineMd:sunnyOutlineToMoonAltLoopTransition': typeof import('~icons/line-md/sunny-outline-to-moon-alt-loop-transition')['default']
'IconMaterialSymbols:keyboardDoubleArrowLeftRounded': typeof import('~icons/material-symbols/keyboard-double-arrow-left-rounded')['default']
'IconMaterialSymbols:keyboardDoubleArrowRightRounded': typeof import('~icons/material-symbols/keyboard-double-arrow-right-rounded')['default']
'IconMdi:github': (typeof import('~icons/mdi/github'))['default']
'IconMdi:shieldLockOutline': (typeof import('~icons/mdi/shield-lock-outline'))['default']
'IconMdi:signIn': (typeof import('~icons/mdi/sign-in'))['default']
'IconMdi:twitter': (typeof import('~icons/mdi/twitter'))['default']
'IconMdi:github': typeof import('~icons/mdi/github')['default']
'IconMdi:shieldLockOutline': typeof import('~icons/mdi/shield-lock-outline')['default']
'IconMdi:signIn': typeof import('~icons/mdi/sign-in')['default']
'IconMdi:twitter': typeof import('~icons/mdi/twitter')['default']
'IconMdi:windowClose': typeof import('~icons/mdi/window-close')['default']
'IconOpenmoji:1stPlaceMedal': (typeof import('~icons/openmoji/1st-place-medal'))['default']
'IconOpenmoji:2ndPlaceMedal': (typeof import('~icons/openmoji/2nd-place-medal'))['default']
Expand Down Expand Up @@ -60,8 +60,8 @@ declare module '@vue/runtime-core' {
NDrawer: typeof import('naive-ui')['NDrawer']
NDrawerContent: typeof import('naive-ui')['NDrawerContent']
NDropdown: typeof import('naive-ui')['NDropdown']
NForm: (typeof import('naive-ui'))['NForm']
NFormItem: (typeof import('naive-ui'))['NFormItem']
NForm: typeof import('naive-ui')['NForm']
NFormItem: typeof import('naive-ui')['NFormItem']
NInput: typeof import('naive-ui')['NInput']
NInputGroup: (typeof import('naive-ui'))['NInputGroup']
NInputNumber: typeof import('naive-ui')['NInputNumber']
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"devDependencies": {
"@commitlint/cli": "^17.8.0",
"@commitlint/config-conventional": "^17.8.0",
"@flypeng/eslint-config": "^2.0.0-beta.2",
"@flypeng/eslint-config": "^2.0.0-beta.3",
"@flypeng/stylelint-config": "^1.0.1",
"@iconify-json/ant-design": "^1.1.10",
"@iconify-json/carbon": "^1.1.21",
Expand Down Expand Up @@ -97,6 +97,7 @@
"vite-plugin-mock": "^2.9.8",
"vite-plugin-pwa": "^0.16.5",
"vite-plugin-spa-loading": "^1.2.2",
"vite-plugin-vue-devtools": "^7.0.2",
"vue-tsc": "^1.8.19"
},
"overrides": {
Expand Down

0 comments on commit 725225e

Please sign in to comment.