Vue+Vite+TS项目结构详解

作者: 上善若水zyz601 | 来源:发表于2023-08-23 11:41 被阅读0次

100 C#控制台项目基本认识
城市选择（小程序 - 热门城市 - wepy）
vue项目结构详解
vue项目搭建
Android Studio项目结构详解
vue项目目录结构详解
Angular项目目录结构详解
快应用入门学习记录-01
2018-12-21
小码哥Android培训-Gradle 入门到精通（一）

企业微信截图_16928408254070.png

1, .husky文件

image.png

由于代码校验工具需要每次手动使用命令执行，才会格式化项目代码，这样很容易让人忘记执行就把代码提交了。
husky的作用就是在代码提交之前触发git hook(git在客户端的钩子)，然后执行pnpm run format来自动的格式化我们的代码。

eslint文件

image.png

eslint 它的目标是提供一个插件化的JavaScript代码检测工具。虽然项目里使用了TypeScript，但TypeScript也是JavaScript的超集，所以也是可以使用eslint 进行检查的。eslintrc.js里面的配置很多就不细细解读了

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
        jest: true,
    },
    /* 指定如何解析语法 */
    parser: 'vue-eslint-parser',
    /** 优先级低于 parse 的语法解析配置 */
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        parser: '@typescript-eslint/parser',
        jsxPragma: 'React',
        ecmaFeatures: {
            jsx: true,
        },
    },
    /* 继承已有的规则 */
    extends: [
        'eslint:recommended',
        'plugin:vue/vue3-essential',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended',
    ],
    plugins: ['vue', '@typescript-eslint'],
    /*
     * "off" 或 0    ==>  关闭规则
     * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
     * "error" 或 2  ==>  规则作为一个错误（代码不能执行，界面报错）
     */
    rules: {
        // eslint（https://eslint.bootcss.com/docs/rules/）
        'no-var': 'error', // 要求使用 let 或 const 而不是 var
        'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-unexpected-multiline': 'error', // 禁止空余的多行
        'no-useless-escape': 'off', // 禁止不必要的转义字符

        // typeScript (https://typescript-eslint.io/rules)
        '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
        '@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
        '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
        '@typescript-eslint/no-non-null-assertion': 'off',
        '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
        '@typescript-eslint/semi': 'off',

        // eslint-plugin-vue (https://eslint.vuejs.org/rules/)
        'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
        'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
        'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
        'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
    },
};

.eslintignore 文件是一个忽略文件，主要是为了忽略对于哪些文件不需要进行代码校验。比如node_modules文件、打包后的dist文件等；

# Eslint 会忽略的文件

.DS_Store
node_modules
dist
dist-ssr
*.local
.npmrc

3.prettier.config.js、prettierignore文件

image.png

有了eslint，为什么还要有prettier? eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次;
而prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着干，另外，prettier支持
包含js在内的多种语言。
总结起来，eslint和prettier这俩兄弟一个保证js代码质量，一个保证代码美观。
prettier.config.js内主要配置如下：

/** 配置项文档：https://prettier.io/docs/en/configuration.html */
module.exports = {
  /** 每一行的宽度 */
  printWidth: 120,
  /** Tab 键的空格数 */
  tabWidth: 2,
  /** 在对象中的括号之间是否用空格来间隔 */
  bracketSpacing: true,
  /** 箭头函数的参数无论有几个，都要括号包裹 */
  arrowParens: "always",
  /** 换行符的使用 */
  endOfLine: "auto",
  /** 是否采用单引号 */
  singleQuote: false,
  /** 对象或者数组的最后一个元素后面不要加逗号 */
  trailingComma: "none",
  /** 是否加分号 */
  semi: false,
  /** 是否使用 Tab 格式化 */
  useTabs: false
}

prettierignore和eslintignore 类似，忽略以下不需要格式化的文件

# Prettier 会忽略的文件

.DS_Store
node_modules
dist
dist-ssr
*.local
.npmrc

4.环境变量的配置

image.png

项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。
开发环境 (development)
顾名思义，开发使用的环境，每位开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。
测试环境 (stagting)
测试同事干活的环境啦，一般会由测试同事自己来部署，然后在此环境进行测试
生产环境(production)
生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。(正式提供给客户使用的环境。)
注意:一般情况下，一个环境对应一台服务,也有的公司开发与测试环境是一台服务!!!
.env.development配置如下

# 自定义的环境变量（命名必须以 VITE_ 开头）

## 后端接口公共路径（如果解决跨域问题采用反向代理就只需写公共路径）
VITE_BASE_API = '/api/v1'

## 路由模式 hash 或 html5
VITE_ROUTER_HISTORY = 'hash'

## 开发环境地址前缀（一般 '/'，'./' 都可以）
VITE_PUBLIC_PATH = '/'

.env.production

# 自定义的环境变量（命名必须以 VITE_ 开头）

## 后端接口公共路径（如果解决跨域问题采用 CORS 就需要写全路径）
# VITE_BASE_API = 'https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1'
VITE_BASE_API = 'https://www.fastmock.site/mock/761e2dda2b8890ab86c928a74e8f6538/api/v1'

## 路由模式 hash 或 html5
VITE_ROUTER_HISTORY = 'hash'

## 打包路径（就是网站前缀，例如部署到 https://un-pany.github.io/v3-admin-vite/ 域名下，就需要填写 /v3-admin-vite/）
VITE_PUBLIC_PATH = '/v3-admin-vite/'

以获取VITE_BASE_API 为例，我们在service.ts内动态获取baseURL

image.png

配置运行命令package.json

"scripts":{
"dev": "vite --open",
"build:test":"vue-tsc && vite build --mode stagting",
"build:pro": "vue-tsc && vite build --mode production",
"preview":"vite preview""
}

通过import.meta.env获取环境变量
运行pnpm run dev 和 pnpm run build:pro

import.meta.env.VITE_BASE_API 分别为 '/api/v1' 和 'https://www.fastmock.site/mock/761e2dda2b8890ab86c928a74e8f6538/api/v1'，以达到环境区分目的。