# wowjoy-vue

> An easy way to start a Vue project

Latest version **1.2.2** (published 2022-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install wowjoy-vue
pnpm add wowjoy-vue
yarn add wowjoy-vue
bun add wowjoy-vue
```

Provides the command `wowjoy-vue`.

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2022-04-24 |
| First published | 2021-11-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Node | ^12.13.0 \|\| ^14.0.0 \|\| >= 16.0.0 |
| Dependencies | 3 |
| Unpacked size | 5.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | wujianing |

## Links

- npm: https://www.npmjs.com/package/wowjoy-vue
- npm.io page: https://npm.io/package/wowjoy-vue

## Dependencies (3)

- [ora](https://npm.io/package/ora.md) ^6.1.0
- [execa](https://npm.io/package/execa.md) ^6.1.0
- [cli-spinner](https://npm.io/package/cli-spinner.md) ^0.2.10

## Recent versions

- 1.2.2 (latest) — 2022-04-24
- 1.2.1 — 2022-04-22
- 1.2.0 — 2022-04-22
- 1.1.9 — 2022-04-22
- 1.1.8 — 2022-04-14
- 1.1.7 — 2021-12-23
- 1.1.6 — 2021-12-22
- 1.1.5 — 2021-12-20
- 1.1.4 — 2021-12-15
- 1.1.3 — 2021-12-14
- 1.1.2 — 2021-12-10
- 1.1.1 — 2021-12-09
- 1.1.0 — 2021-11-25
- 1.0.9 — 2021-11-23
- 1.0.8 — 2021-11-23
- … 6 more at https://npm.io/package/wowjoy-vue/versions

## README

# wowjoy-vue

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

## 全局安装

```js
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配置

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

## vite配置

```js
// 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
```

---
_Source: https://npm.io/package/wowjoy-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._