vite+Typescript+Vue3+Pinia 搭建企业级前端项目

今天是一年一度的七夕节，我在家躺了一天；总感觉应该做点什么，但是不知道做什么，或者如果我没有那么粘人，我今天也不会去写这一篇文章吧！

开篇

今天这篇文章讲了vite+vue3企业级主要搭建的功能，大家根据跟我步骤一步一步的去搭建一个企业级项目，当然还有一部分功能需要你根据自己的需要自行添加。

1.创建项目

通过vite去创建一个初始项目

npm create vite@latest

2.配置tsconfig

1.vite-env.d.ts文件

//声明.vue文件
declare module "*.vue" {
  import { DefineComponent } from "vue";
  const component: DefineComponent<object, object, any>;
  export default component;
}

2.配置路径别名

1. 安装

npm install @types/node -D

2. 修改vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve:{
    alias: {
      '@': path.resolve('./src'), // 设置别名
    }
  }
})

3. 修改tsconfig.app.json

"baseUrl": ".", //查询的基础路径
"paths": { "@/*": ["src/*"] }, //路径映射,配合别名使用

3.配置ESLint和prettier

针对eslint以及prettier做一些语法上面的验证

1.安装

// eslint 安装
npm install eslint@^8.39.0 -D

// eslint vue插件安装
npm install eslint-plugin-vue@^9.11.0 -D

//eslint 识别ts语法
npm install @typescript-eslint/parser@^6.19.0 -D

//eslint ts默认规则补充
npm install @typescript-eslint/eslint-plugin@^6.19.0 -D

//eslint prettier插件安装
npm install eslint-plugin-prettier@^5.1.3 -D

//用来解决与eslint的冲突
npm install eslint-config-prettier@^9.1.0 -D 

//安装prettier
npm install prettier@^3.2.4 -D

2. 新建.eslintrc.cjs

module.exports = {
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  parser: "vue-eslint-parser",
  extends: [
    "eslint:recommended", //继承 ESLint 内置的推荐规则
    "plugin:vue/vue3-recommended", // 继承 Vue.js 3 的推荐规则
    "plugin:@typescript-eslint/recommended", //继承 TypeScript ESLint 插件的推荐规则
    "plugin:prettier/recommended", //继承 Prettier 的推荐规则
    "eslint-config-prettier", //关闭 ESLint 中与 Prettier 冲突的规则
  ],
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  ignorePatterns: ["dist", "node_modules", ".eslintrc.cjs", "commitlint.config.cjs"],
  plugins: ["vue", "@typescript-eslint", "prettier"],
  rules: {
    "vue/multi-word-component-names": "off", // 禁用vue文件强制多个单词命名
    "@typescript-eslint/no-explicit-any": "off", //允许使用any
    "@typescript-eslint/no-this-alias": [
      "error",
      {
        allowedNames: ["that"], // this可用的局部变量名称
      },
    ],
    "@typescript-eslint/ban-ts-comment": "off", //允许使用@ts-ignore
    "@typescript-eslint/no-non-null-assertion": "off", //允许使用非空断言
    "no-console": [
      //提交时不允许有console.log
      "warn",
      {
        allow: ["warn", "error"],
      },
    ],
    "no-debugger": "warn", //提交时不允许有debugger
  },
};

3. 新建 .prettierrc

{
    "endOfLine": "auto",
    "printWidth": 120,
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "all",
    "bracketSpacing": true
}

4. 新建 .prettierignore

# 忽略格式化文件 (根据项目需要自行添加)
node_modules
dist

5. vscode 保存自动格式化

在.vscode下新建 settings.json

配置该选择以后，我们保持文件时会自动格式化代码

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  }
}

4.配置环境变量

新建.env.development（开发环境配置） .env.production（生产环境配置）

1.使用变量

import.meta.env.VITE_NAME

2.在vite.config.ts中使用环境变量

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

// https://vitejs.dev/config/
export default ({ mode }: any) => {
// 获取配置环境参数
  console.log(loadEnv(mode, process.cwd()));

  return defineConfig({
    plugins: [vue()],
    resolve: {
      alias: {
        '@': path.resolve('./src'), // 设置别名
      },
    },
  });
};

5. 配置路由

1. 安装

npm install vue-router

2. 配置路由自动导入

新建router/modules/index.ts

import { RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [];

const moduleFiles: Record<
  string,
  {
    [key: string]: any;
  }
> = import.meta.glob('./*.ts', { eager: true });

Object.keys(moduleFiles).map((ele: any) => {
  const value = moduleFiles[ele].default || {};
  // 我们判断导出的是不是数组，是则进行拓展解构
  if (Array.isArray(value)) routes.push(...value);
  else routes.push(value);
});

export default routes;

2. 新建路由

新建router/modules/routes.ts

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/test.vue'), //路由懒加载
  },
];

export default routes;

3. 创建实例

新建router/index.ts

import { createRouter, createWebHistory } from 'vue-router';
import routes from './modules';

console.log('routes', routes);

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

4. 路由注册

main.ts

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

const app = createApp(App);
app.use(router);
app.mount('#app');

5. 修改App.vue

<script setup lang="ts"></script>

<template>
  <router-view v-slot="{ Component }">
    <Transition name="fade" mode="out-in">
      <component :is="Component" />
    </Transition>
  </router-view>
</template>

<style scoped></style>

6. Pinia配置

配置全局仓库，跟vuex一样的效果，具体的可以参考Pinia官网

1. 安装

npm install pinia

2. 创建 pinia 实例

新建 store/index.ts（src目录下新建store文件夹，并创建index.ts文件）

import { createPinia } from 'pinia';

const store = createPinia();

export default store;

3. 在 main.js 中引用

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import router from './router/index';
import store from './store';

const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');

4. 创建 store

新建store/modules/test.ts

import { defineStore } from 'pinia';

export const useTestStore = defineStore('test', {
  state: () => {
    return {
      list: [1, 2, 3],
    };
  },
  getters: {
    index: (state) => state.list.map((v) => v + 'name'),
  },
  actions: {
    // 增加list
    addList(num: number) {
      this.list.push(num);
    },
  },
});

5. 使用 store

<template>
  <div>2</div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useTestStore } from '@/store/modules/test'; //路径别名，引入store

const testStore = useTestStore();
const { list, index } = storeToRefs(testStore);
const { addList } = testStore;

console.log(list.value, index.value);
addList(45);
</script>

<style scoped></style>

7. 安装less

npm install less less-loader -D

8. 打包配置

1. 生成.gz文件

1. 安装

npm install vite-plugin-compression -D

2. 配置

修改vite.config.ts

import viteCompression from 'vite-plugin-compression';

plugins: [
    vue(),
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
],

2. js和css文件夹分离

修改vite.config.ts

build: {
    outDir: resolve(__dirname, 'dist'), // 指定输出路径
    chunkSizeWarningLimit: 1500,
    sourcemap: false, // 是否生成 source map
    emptyOutDir: true, //Vite 会在构建时清空该目录
    // 打包时清楚console和debugger
    terserOptions: {
      compress: {
        keep_infinity: true,
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        compact: true, //压缩代码，删除换行符等
        assetFileNames: '[ext]/[name]-[hash].[ext]', //静态文件输出的文件夹名称
        chunkFileNames: 'js/[name]-[hash].js', //chunk包输出的文件夹名称
        entryFileNames: 'js/[name]-[hash].js', //入口文件输出的文件夹名称
      },
    },
}

3. 打包分析

1. 安装

npm install rollup-plugin-visualizer -D

2. 使用

import { visualizer } from 'rollup-plugin-visualizer';

plugins: [
    vue(),
    viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz',
    }),
    visualizer({ open: false }),
 ]

4. 配置端口与代理

server: {
    proxy: {
      '/api': {
        target: '', //设置请求地址
        changeOrigin: true, //是否跨域
        rewrite: (path) => path.replace(/^\/api/, ''), //重写地址
      },
    },
},

配置到这儿基本上主要功能就配置完毕了，至于axios以及UI库就根据你们自己的需要去配置吧！这儿我就不做演示了。借鉴文章