wowjoy-vue

一款轻量快速创建 vite+typecript+vue3 的项目工具

全局安装

npm install -g pnpm //自动安装依赖包是pnpm. 全局安装一下
pnpm i wowjoy-vue -g

创建基本模板项目

wowjoy-vue  [projectName]

功能

1.选择 typescript/Es6

2.选择组件库

说明：默认介入 tailwind scss eslint 校验等规范

如果需要修改 tailwind 的配置，在 vite.config.js 中加入

tailwind配置

tailwindcss({
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {}
    },
    variants: {
        extend: {}
    },
    plugins: []
})

wowjoy-vui配置

//AppProvider包裹全局router-view,内置全局弹窗、对话框等组件的基本使用,后续只需要正常使用官网组件库即可正常运行使用
<AppProvider>
//.....
  <router-view />
</AppProvider>

vite配置

// import legacy from '@vitejs/plugin-legacy'
import vue from '@vitejs/plugin-vue'
import autoprefixer from 'autoprefixer'
import cssnano from 'cssnano'
import { resolve } from 'path'
import postcssImport from 'postcss-import'
import tailwindcss from 'tailwindcss'
import { defineConfig, loadEnv } from 'vite'
import html from 'vite-plugin-html'
import { viteMockServe } from 'vite-plugin-mock'
import viteSvgIcons from 'vite-plugin-svg-icons'

const pathResolve = (dir) => resolve(__dirname, '.', dir)

const config = ({ command, mode }) => {
  const env = loadEnv(mode, process.cwd())
  const isEnvProduction = mode === 'production'
  const plugins = [
    vue(),
    /**
     *  注入环境变量到html模板中
     *  如在  .env文件中有环境变量  VITE_APP_TITLE=admin
     *  则在 html模板中  可以这样获取  <%- VITE_APP_TITLE %>
     *  文档：  https://github.com/anncwb/vite-plugin-html
     */
    html({
      inject: {
        injectData: { ...env }
      },
      minify: true
    }),
    /**
     *  把src/icons 下的所有svg 自动加载到body下，供组件使用
     *  类似于webpack中的svg-sprite-loader
     *  文档：https://github.com/anncwb/vite-plugin-svg-icons
     */
    viteSvgIcons({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[name]'
    })
  ]
  if (isEnvProduction) {
    // plugins.push(
    //   // 兼容插件
    //   legacy({
    //     targets: ['defaults', 'not IE 11']
    //   }),
    // )
  } else {
    plugins.push(
      // mock  文档：https://github.com/anncwb/vite-plugin-mock
      viteMockServe({
        mockPath: 'mock',
        localEnabled: command === 'serve',
        logger: true
      })
    )
  }

  return defineConfig({
    // 基础路径，配合vue-router的createWebHashHistory使用
    base: './',
    pluginsdong
    server: {
      host: '0.0.0.0',
      port: 8888,
      open: true,
      cors: true,
      proxy: {
        '/api': {
          target: 'https://xxx.rubikstack.com/', //请求代理地址在这修改即可
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      },
    },
    // alias 现在会被传递给 @rollup/plugin-alias 并不再需要开始/结尾处的斜线了。
    // 此行为目前是一个直接替换，所以 1.0 风格的目录别名需要删除其结尾处的斜线：
    resolve: {
      alias: [
        { find: '@', replacement: pathResolve('src') },
      ]
    },
    css: {
      postcss: {
        plugins: [
          postcssImport,
          autoprefixer,
          tailwindcss({
            purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
            darkMode: false, // or 'media' or 'class'
            theme: {
              extend: {}
            },
            variants: {
              extend: {}
            },
            plugins: []
          }),
          cssnano({
            preset: [
              'default',
              {
                normalizeWhitespace: false,
                colormin: false
              }
            ]
          })
        ]
      }
    },
    build: {
      target: 'es2015',
      outDir: 'dist',
      assetsDir: 'assets',
      assetsInlineLimit: 2048,
      cssCodeSplit: true,
      // Terser 相对较慢，但大多数情况下构建后的文件体积更小。ESbuild 最小化混淆更快但构建后的文件相对更大。
      minify: !isEnvProduction ? 'esbuild' : 'terser',
      terserOptions: {
        compress: {
          // 生产环境去除console
          drop_console: isEnvProduction
        }
      }
    }
  })
}
export default config