# viteapp_template

**Repository Path**: ElegantDevil/viteapp_template

## Basic Information

- **Project Name**: viteapp_template
- **Description**: - Vue3 / Vue-router@next / Vuex@next / Axios
- 第三方库：Echarts可视化图表库 / Vant移动端组件库 / dayjs日期时间处理的JavaScript库
- Http接口请求封装了Axios：在Axios拦截器注入【loadingQuene】用于管理需要全局loading的接口；loadingQuene为单例模式全局只有一个loading实例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-08-03
- **Last Updated**: 2022-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### Vite2.0 开发 Vue3.x 项目模版

### 程序框架

- Vue3.x / Vue-router@next / Vuex@next / Axios
- 第三方库：Echarts 可视化图表库 / Vant 移动端组件库 / dayjs 一个日期时间处理的 JavaScript 库

### Features

- Http 接口请求封装了 Axios：在 Axios 拦截器注入【loadingQuene】用户管理需要全局 loading 的接口，实现多个需 loading 的接口同时发送，从第一个接口开始请求时 showLoading，到最后一个接口结束后 hideLoading；loadingQuene 为单例模式，全局同时之后有一个 loading 实例。

### Vant 组件按需引入样式问题

```
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import styleImport from "vite-plugin-style-import";

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: "vant",
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style`,
        },
      ],
    }),
  ],
});

```

### postcss-px-to-viewport 移动端适配解决方案

```
// 相关依赖
"devDependencies": {
    "autoprefixer": "^10.3.1",
    "postcss-aspect-ratio-mini": "^1.1.0",
    "postcss-import": "^14.0.2",
    "postcss-px-to-viewport": "^1.1.1",
    "postcss-url": "^10.1.3",
  },

```

```
// postcssrc.js配置
const path = require("path");
module.exports = (file) => {
  const designWidth = file.cwd.includes(path.join("node_modules", "vant"))
    ? 375
    : 750; // 针对vant，viewportWidth就设为375
  const designHeight = file.cwd.includes(path.join("node_modules", "vant"))
    ? 667
    : 1334; // 针对vant，viewportHeightWidth就设为667
  return {
    plugins: {
      "postcss-import": {},
      "postcss-url": {},
      // to edit target browsers: use "browserslist" field in package.json
      autoprefixer: {},
      "postcss-aspect-ratio-mini": {},
      "postcss-px-to-viewport": {
        unitToConvert: "px", // 要转化的单位
        viewportWidth: designWidth,
        viewportHeight: designHeight,
        unitPrecision: 6,
        viewportUnit: "vw",
        fontViewportUnit: "vw",
        propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换；当有些属性的单位我们不希望转换的时候，可以添加在数组后面，并在前面加上!号。如propList: ["*","!letter-spacing"],这表示：所有css属性的属性的单位都进行转化，除了letter-spacing的
        selectorBlackList: [
          ".ignore",
          ".hairlines",
          "van",
          "swiper-pagination-bullet",
        ],
        minPixelValue: 1,
        replace: true,
        mediaQuery: false,
        exclude: /(\/|\\)(node_modules)(\/|\\)/,
        landscape: false, //是否处理横屏状况
      },
    },
  };
};

```

### 本地开发 Proxy 配置

```
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue()
  ]
  server: {
    open: true,
    proxy: {
      "/api": {
        target: "https://testm.ninainfo.cn/",
        changeOrigin: true,
      },
    },
  }
});

```

### 生产环境打包

> 通过修改 vite.config.js 的 base 属性为, 将打包后访问静态资源目录设置为相对当前项目文件夹, 解决上线后静态资源加载问题。

```
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

const subDomain = "myapp";
export default defineConfig({
  base: "./",
  plugins: [
    vue()
  ],
  build: {
    outDir: `../../fitness/public/h5/${subDomain}/`,
  },
});

```

### 完整 vite.config.js 配置

```
import path from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import styleImport from "vite-plugin-style-import";

const subDomain = "myapp";

export default defineConfig({
  base: "./", // 打包后访问静态资源目录设置为相对当前项目文件夹
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: "vant",
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style`,
        },
      ],
    }), // Vant组件按需引入时，样式配置
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  }, // 开发阶段，项目内访问资源alias配置 如 import NavTab from "@/components/NavTab.vue";
  server: {
    open: true,
    proxy: {
      "/api": {
        target: "https://test.mysite.cn/",
        changeOrigin: true,
      },
    },
  }, // 本地开发proxy代理
  build: {
    outDir: `../../fitness/public/h5/${subDomain}/`,
  }, // 上线打包输入路径配置
});

```

### 其他

#### 如需要全局引入某个组件，且在 setup 里方便的访问

```
import { Toast } from 'vant';
const app = createApp(App);
app.use(Toast);

app.config.globalProperties.$toast = Toast;
window.$vm = app.config.globalProperties; //在window上挂载$vm

// 访问
$vm.$toast("请求成功");

```

#### Echarts 动态数据渲染

```
// 使用组件
<LineEcharts
    chartId="salesChart"
    :data="salesData"
    :tooltipValueFormatter="(val) => val + '元'"
/>

// 组件内接收的数据
props: {
    chartId: String, //图表容器唯一domid
    data: {
        type: Object,
        default: () => {
        return {
            xAxis: [],
            series: [],
            isLoading: true,
        };
        },
    },
    tooltipValueFormatter: Function, //对tooltip的value的格式化 如xx元/人
},

// 组件内监听数据变化，且setTimeout延迟渲染，以解决未获取到图表容器的宽高数据问题.
watch(props.data, (val, prevVal) => {
    setTimeout(() => {
        initChart(); // 初始化图表，只做一次
        updateOptionxAxisData(val.xAxis); // 更新x轴数据
        updateOptionSeriesData(val.series); // 更新y轴数据
        renderChart(); // 重新渲染图表

        if (val.isLoading) {
            myChart.showLoading();
        } else {
            setTimeout(() => {
            myChart.hideLoading();
            }, 1000);
        }
    }, 100);
});
```


### 多页面应用模式
参考我的文章 [Vite2.0多页面应用模式探索](https://mp.weixin.qq.com/s/dcMUIgDs6biJb5qkWkubIQ)