# vue3-vite-js

**Repository Path**: gdut2021/vue3-vite-js

## Basic Information

- **Project Name**: vue3-vite-js
- **Description**: vue3、vite、js模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-30
- **Last Updated**: 2024-02-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目说明

vue3、vite、js 模板

## public/baseConfig 变量使用

### vue 页面使用

```javascript
const baseConfig = computed(() => {
  return BASECONFIG; // 或者window.BASECONFIG 
});

// 打印出来的值，是public/baseConfig/index_fcv.js里面的值
// 因为在index.html文件中，进行全局变量挂载了：window.BASECONFIG = BASECONFIG_FCV
// 当开发环境时，.env.development里的VITE_SYSTEM值为1，window则会挂载BASECONFIG_FCV；反之，window则会挂载BASECONFIG_PVE
// 同理，当线上环境时，则看.env.production里的VITE_SYSTEM值，来决定window挂载哪个值
console.log('🚀 ~ baseConfig:', baseConfig.value); // {system: "fcv"}

// 这样配置的好处就是，假设有两套系统，打包时只需要切换.env.production里的VITE_SYSTEM值是0还是1即可，就可以引入不同的全局变量文件，此时用的变量名(system)还是相同的。
```

由于public下的文件不会进行打包压缩，因此我可以在线上部署时，手动修改public/baseConfig下对应的js文件里的变量值，刷新页面后，全局的BASECONFIG变量值也会随着更改。**这样的好处就是**：我有些变量需要外部去控制，然后传给项目里面去使用，我就可以在public文件里进行修改，而无需打开编辑器在项目里修改然后打包再部署这么麻烦。

## js/html文件中使用.env环境变量

注：

1.在public里面的js文件中访问不到

2.可以在src下面的任意js文件(如api/index.js) 或者 根目录下index.html的script标签中进行使用

使用：

```javascript
const system = import.meta.env.VITE_SYSTEM;
```

## js文件中使用process环境变量

注：

1.在public里面的js文件中访问不到

2.需要在`vite.config.js`文件中如下抛出变量，才能使用process进行访问

```javascript
export default defineConfig(({ mode })=>{
  const env = loadEnv(mode, process.cwd(), '');
  return  {
    define:{
      'process.env.MODE': JSON.stringify(env.MODE) // development 或者 production
    }
  }
})
```

使用：

```javascript
console.log('🚀 ~ api/index.js 查看运行环境：',process.env.MODE); // 🚀 ~ api/index.js 查看运行环境： development
```

## js文件中使用自定义环境变量

注：

1.需要安装`cross-env`依赖，并且在package.json添加该命令：`"dev": "cross-env CUSTOM_HANDLEAPI=open vite --mode development "`

2.在vite.config.js中需要自定义一下process参数：`'process.env.CUSTOM_HANDLEAPI': JSON.stringify(env.CUSTOM_HANDLEAPI)`

使用：

```javascript
console.log(
  '🚀 ~ api/index.js 查看启动命令时自定义的字段CUSTOM_HANDLEAPI：' , process.env.CUSTOM_HANDLEAPI ); // 🚀 ~ api/index.js 查看启动命令时自定义的字段CUSTOM_HANDLEAPI： open

// 这样做的好处就是当打包时，如果需要有两个打包命令：第一个打包命令需要正常打包，第二个打包命令需要在js文件中进行特殊处理一下
// 此时就可以在package.json文件中配置两个打包命令，根据打包命令，是否传了该参数CUSTOM_HANDLEAPI，来判断打包时是否需要特殊处理
```

## 打包配置

### 两个打包命令

```json
 "scripts": {
    "build": "cross-env vite build --mode production",
    "buildNew": "cross-env CUSTOM_HANDLEAPI=open vite build --mode production",
  },
```

这两个命令的区别在于：

`build`：正常打包命令

`buildNew`：添加了自定义参数的打包命令 CUSTOM_HANDLEAPI，可以进行特殊打包处理

好处就是：

假设我现在有一种情况：当我自定义了参数时，我需要在src/api/index.js文件中，对api的前缀进行一些处理，这时候就可以判断运行打包命令时，是否有变量CUSTOM_HANDLEAPI，若有则进行特殊打包处理。若无则正常打包。

## 引入全局变量

```javascript
//定义全局变量或方法
App.config.globalProperties.px = xx;

import { getCurrentInstance } from 'vue';
//****请务必使用proxy，不要用ctx，以免发布
const { proxy } = getCurrentInstance();
proxy.px(50);

// 或者
const { px } = getCurrentInstance().proxy;
px(50);
```

## 页面自适应(容器宽高+字体大小)

### 使用

当所有页面的设计稿宽度都一致时，只需要把 postcss.config.js、flexible.js、globalDefinition.js 三个地方的 192 改为设计稿宽度(px)除以 10 即可。例如所有页面设计稿宽度为 1920px，那只需要改为 192 即可。

当部分页面设计稿宽度不一致时，只需要在进入该页面时，在 setup 中，使用如下命令：

```javascript
// 例如部分页面的宽度为1080px
// 浏览器打开的每个页面tab都有一个独立的document，即存在多个页面tab的多个闭包，因此修改该页面的__RATIO不会影响其他页面容器宽高和字体大小
window.__RATIO = 108;
```

## vuex

### 基本使用

```javascript
import { useStore } from 'vuex';
const store = useStore();
// 1.在 computed 函数中访问一个 state ; 访问user模块中的state
count: computed(() => store.state.count);
userInfo: computed(() => store.state.user.userInfo);

// 2.在 computed 函数中访问一个 getter
double: computed(() => store.getters.double);

// 3.访问一个 mutation; 访问user模块中的mutation
increment: () => store.commit('increment');
updateUserInfo: () => store.commit('user/updateUserInfo');

// 4.访问一个 action
asyncIncrement: () => store.dispatch('asyncIncrement');
```

### 持久化 user 模块

```javascript
import createPersistedState from 'vuex-persistedstate';
import { createStore } from 'vuex';
import user from './modules/user'; // 引入user模块

export default createStore({
  ...,
  modules: { user },
  plugins: [
    // veux持久化配置
    createPersistedState({
      key: 'myProject', // localStorage中的key
      paths: ['user'] // 添加需要持久化数据的模块
    })
  ]
})
```

### 添加 vuex 模块

```javascript
const store = {
  namespaced: true,
  state() {
    return {
      userInfo: {
        id: null, // 用户id
        username: null // 用户名
      }
    };
  },
  mutations: {
    updateUserInfo(state, value) {
      state.userInfo = value;
    }
  }
};

export default store;
```

## axios

### 使用

```javascript
import axios from '@p/axios';
import $api from '@/api/index';
axios.get(`${$api.base.posts}`, { id: 1 });

// 或者
const { $postAxios, $api } = getCurrentInstance().proxy;
$postAxios($api1.base.posts, {
  account: 'tom',
  password: '147258',
  text: 'post请求传值，返回所有值及id'
});
```

### 请求参数传递说明

[mock 数据网址](https://jsonplaceholder.typicode.com/)

axios 默认添加了对请求方法'post', 'put', 'patch' 添加了默认请求头'Content-Type': 'application/x-www-form-urlencoded'

如果传参 data 是 json 对象，那么请求头就会更改为'Content-Type': 'application/json;charset=utf-8'

Axios 请求头中的 Content-Type 常见的有 3 种：

1.Content-Type:application/json --- application/json 它声明了请求体中的数据将会以 json 字符串的形式发送到后端，那么可以直接接收 json

2.Content-Type:application/x-www-form-urlencoded --- 声明了请求体中的数据会以键值对（普通表单形式 {key:value} ） eg: ?id=1&arr=1&arr=2&arr=3&a=2

3.Content-Type:multipart/form-data --- 上传文件等

```js
// get请求demo
const params = {
  id: 1,
  arr: [1, 2, 3],
  a: 2
};
// qs将get请求的参数进行平铺后，进行拼接
const suffix = qs.stringify(params, { arrayFormat: 'repeat' }); // id=1&arr=1&arr=2&arr=3&a=2
// params不适合写嵌套对象 如：params = {b:{c:2}}类似的，最好只写一层
const res = await axios.get(`/api/posts?${suffix}`);

// post请求demo
const res = await axios.post('/api/posts', {
  account: 'tom',
  password: '147258',
  text: 'post请求传值，返回所有值及id',
  userInfo: {
    address: {
      city: '上海',
      arr: [1, 2, 3]
    }
  }
});
```