从零搭建vue3 + vite + ts 项目必备

Vue 3 + Typescript + Vite 搭建项目必备

从零搭建vue3 + vite + ts 项目必备

This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

参考脚手架 ： https://gitee.com/dishait/tov-template

初始化项目

npm init vite@latest
(1) cd xxx-project
(2) npm install
(3) npm run dev

安装项目规范

npm install eslint --save-dev

#or

yarn add eslint --dev

eslint 初始化配置文件

npx eslint --init

#or

yarn run eslint --int

eslint 问题

No files matching the pattern “./src/*/.js” were found.

解决：src//*.*只能匹配 src 下面一个目录，匹配字符串加上单引号即可 -> './src//*.{js,jsx,vue,ts,tsx}’
注意：eslint 后面的路径最好加上引号，否则在类 Unix 系统（比如 macOS）中会报错说找不到资源。但在 windows 不需要加单引号

配置 git commit hook

husky 使用总结 : https://zhuanlan.zhihu.com/p/366786798

https://github.com/okonet/lint-staged

安装

npx mrm@2 lint-staged

在开发和构建中进行代码规范校验

● https://github.com/vitejs/awesome-vite#plugins
● https://github.com/gxmari007/vite-plugin-eslint

Git commit 提交规范 推荐参考：

● Commit message 和 Change log 编写指南
https://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html

● Git 使用规范流程
https://www.ruanyifeng.com/blog/2015/08/git-use-process.html

● Git 工作流程
https://www.ruanyifeng.com/blog/2015/12/git-workflow.html

统一团队 Git commit 日志标准，便于后续代码 review，版本发布以及日志自动化生成等等。

常用 commit 类型说明：
类型 说明
build 对构建系统或者外部依赖项进行了修改。
ci 对 CI 配置文件或脚本进行了修改。
chore 构建过程或辅助工具的变动。
docs 新增或修改文档。
feat 新功能，比如 feat: login。
fix 修补 bug。
perf 优化相关，比如提升性能、体验。
refactor 重构（即不是新增功能，也不是修改 bug 的代码变动）。
revert 回滚到上一个版本。
style 不影响代码含义的修改，比如空格、格式化、缺失的分号等，注意不是 css 修改。
test 增加测试代码或者修改已存在的测试。

相关工具：
https://zhuanlan.zhihu.com/p/100574040

commitlint 是一个提交验证工具。原理是可以在实际的 git commit 提交到远程仓库之前使用 git 钩子来验证信息。提交不符合规则的信息将会被阻止提交到远程仓库。
npm install --save-dev @commitlint/cli @commitlint/config-conventional

● commitlint：验证 git commit 日志是否符合规范
● Commitizen：辅助编写符合 git commit 规范的工具

安装 vite-plugin-eslint 插件

代码编写过程提示代码错误

安装支持 jsx 语法

npm i -D @vitejs/plugin-vue-jsx

vite.config.ts 导入组件

import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin({
      // 配置选项
      cache: false // 禁用eslint缓存
    }),
    vueJsx({
      // 配置选项
    })
  ]
})

安装 vue-router

npm install vue-router@4

安装 状态管理 vuex or pinia

pinia（推荐）

参考连接

vuex

npm install vuex@next --save

or

npm install pinia --save
# https://www.jianshu.com/p/ae05af8d6f33

vite 模块别名的配置

在 ts 模块中加载 node 核心模块需要安装 node 的类型补充模块：

npm i -D @types/node
npm i -D vue-tsc

vue-tsc 是一个基于 volar 的 vue3 命令行类型检查工具，我们也是可以通过 tsconfig.json 去配置 vue-tsc --noEmit 需要检查的内容和方式。

.scss and .sass

npm install -D sass

.less

npm install -D less

.styl and .stylus

npm install -D stylus

样式目录结构

variables.scss #全局 Sass 变量
mixin.scss #全局 mixin
common.scss #全局公共样式
transition.scss #全局过度动画样式
index.scss #组织统一导出

unocss

提高工作效率
使用说明
说明文档

和服务端交互

npm i axios
● 基于 axios 的二次封装
● 关于接口的类型问题
● 多环境 baseURL
● 跨域处理
● 数据 mock

添加文档注释

举例:

/**
 *
 * @param {number} num1 参数1说明：数字1
 * @param {number} num2 参数2说明：数字2
 * @returns 返回值说明：计算相加的和
 */
function sum(num1, num2) {
  return num1 + num2;
}

sum();

安装 element-plus

npm install element-plus --save

按需导入-自动导入

https://juejin.cn/post/7012446423367024676

unplugin-vue-components

自动按需引入 第三方的组件库组件 和 我们自定义的组件

unplugin-auto-import

自动按需引入 vue\vue-router\pinia 等的 api

  AutoImport({
        dts: './src/auto-imports.d.ts',
        imports: [
          'vue',
          'vue-router',
          {
            // 自定义
            '@vueuse/core': [
              // named imports
              'watchOnce ', // import { watchOnce  } from '@vueuse/core',
              'watchArray', //监听数组的添加和删除
              'watchDebounced', //防抖
              'watchThrottled', //节流
              'useLocalStorage', //响应式的 LocalStorage
              'useSessionStorage', //响应式SessionStorage

              // 起别名
              ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
            ],
            'ant-design-vue': ['message', 'notification'],
            '/@/serve/request': ['get', 'post', 'del', 'put'],
            '/@/libs/utils/download': ['download', 'saveTextAsFile'],
            '/@/serve/index': [['serverAddress', 'baseURL']],
          },
        ],
      }),

unplugin-icons

可以自动按需引入 所使用的图标，而不用手动 import

vite-plugin-style-import

自动按需引入 我们手动引入的组件的 css 样式

npm install -D unplugin-vue-components unplugin-auto-import unplugin-icons vite-plugin-style-import

安装 qs

npm i qs
npm i --save-dev @types/qs

Vite 调试工具

vite-plugin-inspect 插件调试

npm install vite-plugin-inspect -D

icon 包管理器 或者

npm install @element-plus/icons-vue

icon 自动导入

需要：

1. unplugin-icons : https://npmmirror.com/package/unplugin-icons
2. unplugin-auto-import

npm i -D unplugin-icons

自定义图标组件 ： vite-plugin-iconify

https://segmentfault.com/a/1190000041590030
https://github.com/qq15725/vite-plugin-iconify

三种使用方式

  <el-icon>
    <IconEpFold />
  </el-icon>

  <IconEpFold class="v-icon" />

...

  ..xxx.scss样式文件

    .v-icon {
      display: inline-block;
      width: 1em;
      height: 1em;
      font-size: 1em;
    }

    .v-icon>svg {
      width: 100%;
      height: 100%;
    }

  <el-icon><icon-ep-fold /></el-icon>

图标数据

我们使用 Iconify 作为图标数据源（支持 100 多个图标集）。

您有两种安装方式：

安装完整集合
npm i -D @iconify/json
@iconify/json(~120MB) 包括来自 Iconify 的所有图标集，因此您可以安装一次并根据需要使用其中的任何一个（只有您实际使用的图标才会捆绑到生产版本中）。

按图标集安装
如果您只想使用几个图标集而不想下载整个集合，您也可以使用@iconify-json/[collection-id]. 例如，要安装 Element Plus，你可以这样做：

npm i -D @iconify-json/ep
为了提高您的工作流程，还可以 unplugin-icons 通过启用该 autoInstall 选项来处理该安装。

Icons({
// expiremental
autoInstall: true,
})
当您导入它们时，它将安装图标集。将自动检测到正确的包管理器（npm 或 yarn）pnpm。

页面加载进度条

npm i --save nprogress
npm i --save-dev @types/nprogress

tsconfig.json

相关配置

/* 基本选项 */
    "target": "es5",                       // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'
    "module": "commonjs",                  // 指定使用模块: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
    "lib": [],                             // 指定要包含在编译中的库文件
    "allowJs": true,                       // 允许编译 javascript 文件
    "checkJs": true,                       // 报告 javascript 文件中的错误
    "jsx": "preserve",                     // 指定 jsx 代码的生成: 'preserve', 'react-native', or 'react'
    "declaration": true,                   // 生成相应的 '.d.ts' 文件
    "sourceMap": true,                     // 生成相应的 '.map' 文件
    "outFile": "./",                       // 将输出文件合并为一个文件
    "outDir": "./",                        // 指定输出目录
    "rootDir": "./",                       // 用来控制输出目录结构 --outDir.
    "removeComments": true,                // 删除编译后的所有的注释
    "noEmit": true,                        // 不生成输出文件
    "importHelpers": true,                 // 从 tslib 导入辅助工具函数
    "isolatedModules": true,               // 将每个文件作为单独的模块 （与 'ts.transpileModule' 类似）.

    /* 严格的类型检查选项 */
    "strict": true,                        // 启用所有严格类型检查选项
    "noImplicitAny": true,                 // 在表达式和声明上有隐含的 any类型时报错
    "strictNullChecks": true,              // 启用严格的 null 检查
    "noImplicitThis": true,                // 当 this 表达式值为 any 类型的时候，生成一个错误
    "alwaysStrict": true,                  // 以严格模式检查每个模块，并在每个文件里加入 'use strict'

    /* 额外的检查 */
    "noUnusedLocals": true,                // 有未使用的变量时，抛出错误
    "noUnusedParameters": true,            // 有未使用的参数时，抛出错误
    "noImplicitReturns": true,             // 并不是所有函数里的代码都有返回值时，抛出错误
    "noFallthroughCasesInSwitch": true,    // 报告 switch 语句的 fallthrough 错误。（即，不允许 switch 的 case 语句贯穿）

    /* 模块解析选项 */
    "moduleResolution": "node",            // 选择模块解析策略： 'node' (Node.js) or 'classic' (TypeScript pre-1.6)
    "baseUrl": "./",                       // 用于解析非相对模块名称的基目录
    "paths": {},                           // 模块名到基于 baseUrl 的路径映射的列表
    "rootDirs": [],                        // 根文件夹列表，其组合内容表示项目运行时的结构内容
    "typeRoots": [],                       // 包含类型声明的文件列表
    "types": [],                           // 需要包含的类型声明文件名列表
    "allowSyntheticDefaultImports": true,  // 允许从没有设置默认导出的模块中默认导入。

    /* Source Map Options */
    "sourceRoot": "./",                    // 指定调试器应该找到 TypeScript 文件而不是源文件的位置
    "mapRoot": "./",                       // 指定调试器应该找到映射文件而不是生成文件的位置
    "inlineSourceMap": true,               // 生成单个 soucemaps 文件，而不是将 sourcemaps 生成不同的文件
    "inlineSources": true,                 // 将代码与 sourcemaps 生成到一个文件中，要求同时设置了 --inlineSourceMap 或 --sourceMap 属性

    /* 其他选项 */
    "experimentalDecorators": true,        // 启用装饰器
    "emitDecoratorMetadata": true          // 为装饰器提供元数据的支持

    ```

全局注册组件

https://blog.csdn.net/u012961419/article/details/124300061

安装 css3 动画库

官网： https://animate.style/
npm install animate.css

参考连接

全局事件总线

npm install --save mitt

vue.draggable 拖拽组件

官方文档:
https://github.com/SortableJS/Vue.Draggable
https://www.itxst.com/vue-draggable-next/tutorial.html

安装方式:

yarn add vuedraggable@next
npm i -S vuedraggable@next

vite-plugin-svg-icons

安装方式:

npm i -D vite-plugin-svg-icons

vite-plugin-html插件

vite-plugin-html

• HTML 压缩能力
• EJS 模版能力
• 多页应用支持
• 支持自定义entry
• 支持自定义template

npm i vite-plugin-html -D

jsplumb拖拽连线

npm install --save jsplumb

还有antv旗下的x6 antv-X6官网