# vue-cli3-test

**Repository Path**: han_gx/vue-cli3-test

## Basic Information

- **Project Name**: vue-cli3-test
- **Description**: 基于vite+ vue-cil@4.5的后台管理模板系统
系统集成 axios, element-plus, naiveui, fontawesome 等组件
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-08
- **Last Updated**: 2021-08-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webapp

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

###  git 
 
```shell
git status                          ## 红色文件，需要
git add -A                          ## -A, 添加所有绿色文件
git commit -m '今天修改xxx文件'      ## 提交到本地库中
git pull                            ## 从 gitee 库中拉去最新的文件
git status                          ## 显示红色的文件为冲突文件： 自己更改过的文件和别人更改过的文件 的冲突， 需要自己查看修改
git push                            ## 将所有冲突文件更改完成后， 提交到 gitee库
```


## 集成 vite

 ### 需要注意事项
 1. node version  > 12
 2. 启动时使用 `npm run serve`
 3. 引用组件的时候需要添加 `.vue` 后缀
 4. 在 main.js 使用 env 环境变量
    ```javascript
    // const process = require('process')   //使用 webpcak引用方式
    const env = import.meta.env
    console.log(env)
    ```
 5. 引用图片不能使用 `require`, 因为`vite`使用的是浏览器自带的`module`,`require`是浏览器自带的语法
   图片统一放在 public 下的 `images` 文件夹下面, 引用 `src="images/image1111.png"`, 为了方便以后管理这些图片, 可以引用`FormImage`组件

### 状态管理方案
   1. :wavy_dash: vue 提供的 store 模式
   2. :wavy_dash: vue 提供的 vuex 模式, 只支持 vue
   3. :heavy_check_mark: 根据对象的引用传递, 采用 vue 提供的 [ref](https://v3.cn.vuejs.org/api/refs-api.html#ref), 实现多状态管理 

## 打包之后待解决的问题

   1. 饿了么图标路劲不对