# vue3海报

**Repository Path**: jannineweigel/vue3-poster

## Basic Information

- **Project Name**: vue3海报
- **Description**: 使用vue3实现海报功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2021-11-30
- **Last Updated**: 2022-11-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vite 项目

```
$ npm init vite@latest <project-name> -- --template vue

$ cd <project-name>
$ npm install
$ npm run dev
```

# 路由

> npm install vue-router@next

# 安装 elementPlus

> npm install element-plus --save


# 按需引入
vite-plugin-components已重命名为unplugin-vue-components
// 下面的写法是旧的

```
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
// 按需引入
import styleImport from 'vite-plugin-style-import'
import ViteComponents, { ElementPlusResolver } from 'vite-plugin-components'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    //按需导入element-plus组件
    ViteComponents({
      customComponentResolvers: [ElementPlusResolver(
        {
          // 是否导入样式
          importStyle: true
        }
      )],
    }),
    //按需导入element-plus的css样式
    styleImport({
      libs: [
        {
          libraryName: 'element-plus',
          esModule: true,
          resolveStyle: (name) => {
            return `element-plus/lib/theme-chalk/${name}.css`;
          },
          resolveComponent: (name) => {
            return `element-plus/lib/${name}`;
          },
        }
      ],
    }),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})
```