# vvep

**Repository Path**: samzhang2020/vvep

## Basic Information

- **Project Name**: vvep
- **Description**: vite2.7 + vue3.2 + elementPlus1.3 + vuex4.0.2 + vue-router4.0.12
整合配置的基础框架，直接开展业务代码编写
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: vvep-base
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-30
- **Last Updated**: 2022-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vite2, vue3, vuex4, vue-router4, elementPlus

## README

### vite2.7 + vue3.2 + elementplus 基础框架介绍
集成vite2.7、vue3.2、vuex4、vue-router4、elementplus按需自动引入基础框架，下载后可直接开展业务代码编写

### 运行基础框架
    ```shell
    git clone https://gitee.com/samzhang2020/vvep.git
    //安装依赖 yarn
    //运行框架 yarn dev
    ```

#### 使用的前端框架：
* Vue 3          https://v3.cn.vuejs.org/guide/introduction.html
* ElementPlus    https://element-plus.gitee.io/zh-CN/component/button.html
* Vite 2         https://vitejs.cn/guide/
* Axio           https://www.axios-http.cn/docs/intro
* vuex 4         https://next.vuex.vuejs.org/zh/index.html
* vue-router 4   https://next.router.vuejs.org/zh/installation.html

#### 整合基础框架创建过程:
1. vite2的安装：
    - yarn create vite
2. 引入ElementPlus
    - 完整引入
    - 按需导入（自动导入、手动导入）
    1. 这里我们使用自动导入方式，首先需要安装 element-plus，再安装 unplugin-vue-components
    ```shell
    yarn add element-plus
    //https://github.com/antfu/unplugin-vue-components
    yarn add unplugin-vue-components -D
    ```
    2. 修改vite.config.js
    ```javascript
    import Components from 'unplugin-vue-components/vite'
    import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
    export default defineConfig({
    plugins: [
        vue(),
        Components({
        resolvers: [ElementPlusResolver()],
        })
    ]
    })
    ```
    3. 测试ElementPlus按需自动导入是否生效
3. vuex安装
   ```shell
   yarn add vuex@next --save
   ```
4. vue-router安装
    ```shell
    yarn add vue-router@next --save
    ```