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

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

开篇

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

1.创建项目

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

typescript 复制代码
npm create vite@latest

2.配置tsconfig

1.vite-env.d.ts文件

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

2.配置路径别名

  1. 安装
typescript 复制代码
npm install @types/node -D
  1. 修改vite.config.ts
typescript 复制代码
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'), // 设置别名
    }
  }
})
  1. 修改tsconfig.app.json
typescript 复制代码
"baseUrl": ".", //查询的基础路径
"paths": { "@/*": ["src/*"] }, //路径映射,配合别名使用

3.配置ESLint和prettier

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

1.安装

typescript 复制代码
// 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

typescript 复制代码
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

typescript 复制代码
{
    "endOfLine": "auto",
    "printWidth": 120,
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "all",
    "bracketSpacing": true
}

4. 新建 .prettierignore

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

5. vscode 保存自动格式化

在.vscode下新建 settings.json

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

typescript 复制代码
{
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  }
}

4.配置环境变量

新建.env.development(开发环境配置) .env.production(生产环境配置)

1.使用变量

typescript 复制代码
import.meta.env.VITE_NAME

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

typescript 复制代码
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. 安装

typescript 复制代码
npm install vue-router

2. 配置路由自动导入

新建router/modules/index.ts

typescript 复制代码
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

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

export default routes;

3. 创建实例

新建router/index.ts

typescript 复制代码
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

typescript 复制代码
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

typescript 复制代码
<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. 安装

typescript 复制代码
npm install pinia

2. 创建 pinia 实例

新建 store/index.ts(src目录下新建store文件夹,并创建index.ts文件)

typescript 复制代码
import { createPinia } from 'pinia';

const store = createPinia();

export default store;

3. 在 main.js 中引用

typescript 复制代码
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

typescript 复制代码
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

typescript 复制代码
<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

typescript 复制代码
npm install less less-loader -D

8. 打包配置

1. 生成.gz文件

  1. 安装
typescript 复制代码
npm install vite-plugin-compression -D
  1. 配置

修改vite.config.ts

typescript 复制代码
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

typescript 复制代码
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. 安装
typescript 复制代码
npm install rollup-plugin-visualizer -D
  1. 使用
typescript 复制代码
import { visualizer } from 'rollup-plugin-visualizer';

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

4. 配置端口与代理

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

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

相关推荐
mosen8682 分钟前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js