相信还是有非常多的小伙伴使用着公司的框架，封装的“很好用”，但是一离开公司就一头雾水瞬间打回原形，那么现在一起来动手搭建一下吧。~（笑鼠）

1.搭建Vite+Vue，我用的是pnpm create vite my-vue-app --template vue，没有安装pnpm的npm install -g pnpm安装一下或选择其他方式

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

1.1.安装package.json对应依赖 pnpm i

1.2.跑起来~兄弟们 pnpm dev

Woooo~ 跑起来了,但是好像有个地方有点奇怪 Network: use --host to expose ?? 这个得通过下面内容解决一下

2.配置vite.config.js

介于我看过许多文章都是一下子给一堆配置，我个人还是喜欢碰到一个问题解决一个，先解决第一个问题

2.1.Network: use --host to expose

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    // 自定义端口号
    port: 1024,
    // 0.0.0.0 对应的 cmd - ipconfig ipv4地址
    host: "0.0.0.0"
  },
  plugins: [vue()]
})

2.2.我们是不是待会得配置vue-router,那么component内的路径是不是需要别名~

3.安装路由依赖vue-router pnpm i vue-router@4 -S

3.1.配置路由

3.1.1.路由主文件index.ts

使用createRouter创建了路由实例，history代表了路由模式hash或者history，我选用了history-createWebHistory,routes配置了其他路由地址和引用地址等信息

例如：main.ts是一个路由文件，实际工作场景肯定会有分类的场景，那就用这个文件做一个例子，封装了一个非常简单的路由创建函数，可以根据自己实际需求配置 routerConfig.ts

过程中会发现路由配置内component希望@/能算作路由src的地址，那么我们就需要进行vite.config.js和tsconfig.json的配置

3.1.2.安装ts依赖pnpm i typescript -S

3.1.3.配置vite.config.js

resolve-alias 设置别名 "@"等于/src的文件地址,比如前面的项目文件@/pages等价于src的文件地址/pages

3.1.4.配置tsconfig.json 使用了ts的必须配置不然路由文件本地ctrl+左键跳转找不到文件地址

4.配置自动引入 以element-plus为例

4.1.首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件，安装指令pnpm i unplugin-vue-components unplugin-auto-import -D

4.2.vite.config.js进行配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { URL, fileURLToPath } from "url";
import AutoImport from "unplugin-auto-import/vite";
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  server: {
    port: 1024,
    host: "0.0.0.0",
  },
  plugins: [
    vue(),
    // 按需自动导入API
    AutoImport({ imports: ["vue"], resolvers: [ElementPlusResolver()] }),
    // 按需自动导入组件
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
});

4.3.现在你可以直接安装一下element-plus依赖pnpm i element-plus -S，直接全局需要的地方使用

5.现在最后在系统内安装一下pinia pnpm i pinia -S

5.1.main.js内引用pinia

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import { router } from "./router";

const pinia = createPinia()

createApp(App).use(router).use(pinia).mount("#app");

5.2.创建并配置基础stores base.ts

import { defineStore } from "pinia";

export const baseStore = defineStore("base", {
  state: () => {
    return {
      system_name: "Vue3+Vite+Ts+MicroApp 从零开始搭建",
    };
  },
  getters: {
    stress: (state) => state.system_name + state.system_name,
  },
  actions: {
    getSystemNameLength() {
      return this.system_name.length;
    },
  },
});

5.3.基础调用

<script lang="ts" setup>
import { baseStore } from '@/stores';

const value = ref("")
const store  = baseStore()
</script>

<template>
    <div>Index</div>
    <div>{{store.system_name}}</div>
    <div>{{store.stress}}</div>
    <div>{{store.getSystemNameLength()}}</div>
    <ElInput v-model="value" clearable/>
</template>

demo地址：yzh940324/my-vue-app-demo (githubfast.com)