教你如何用vite搭建一个企业级Vue3+TypeScript项目，并配置一套最基础的项目工程环境

一只囡狗
483 阅读4分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

技术栈

在搭建项目前，先确定好所用的技术栈

查看并更新node版本

查看node版本

node -v

如果不是最新的版本，建议更新到最新

nvm install stable

用vite搭建基础框架

用vite的好处不用多说了 参考官网➡️vitejs.dev/guide/why.h…

# my-vue-app 可以改成自己的项目名
pnpm create vite my-vue-app --template vue-ts

进入对应目录，安装相关依赖，就可以正常启动项目了

# 进入目录
cd my-vue-app
# 安装依赖
pnpm install
# 启动项目
pnpm run dev

到这里，Vue3 + TypeScript 的基本骨架搭建完毕，为了让开发体验更好，团队开发效率更高，保证代码质量。我们还需要额外配置一些依赖。

配置ESlint+Prettier确保代码规范

为什么ESlint和Prettier都要配置呢，首先我们要明白他们是做什么的

ESlint

  • 可以做简单的代码风格检测和限制
  • 可以对 js 语法进行检测限制

但是ESlint有一定局限性只能检测 js，ts，无法检测和限制 css 的代码风格，所以还需要配置Prettier

Prettier

  • 可以对代码风格进行检测和限制
  • 可以检测和限制 js，ts，css 等多种类型文件和语言

Prettier不能对代码语法进行检测和限制，但是可以控制整个项目的代码风格，团队开发的时候，保证代码风格的一致。

综上，ESlint限制语法，保证语法不出错，Prettier 限制风格，统一团队的代码风格。

1.配置ESlint

# 安装
pnpm i eslint -D

ESLint 安装成功后，执行 npx eslint --init，然后按照终端操作提示完成一系列设置来创建配置文件。

可以按照下图配置 image.png 操作完后，根目录下会生成.eslintrc.js 配置文件。

2.配置Prettier

# 安装
pnpm i prettier -D

安装好之后，在项目根目录创建.prettierrc.cjs 下面是我常用的配置，大家可以根据自己的代码风格配置，可参考官网进行配置 Options

module.exports = {
  // 一行最多 120 字符
  printWidth: 100,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用 tab 缩进，而使用空格
  useTabs: false,
  // 行尾不需要有分号
  semi: false,
  // 使用单引号代替双引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // 禁止使用尾逗号
  trailingComma: 'none',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // 箭头函数，函数体一个参数的时候禁止使用括号
  arrowParens: 'avoid'
}

3.解决ESlint和Prettier的冲突

配置好Prettier后 会发现它会和ESlint产生冲突 这里引入两个工具eslint-plugin-prettier 和 eslint-config-prettier。

  • eslint-plugin-prettier 将 Prettier 的规则设置到 ESLint 的规则中。
  • eslint-config-prettier 关闭 ESLint 中与 Prettier 中会发生冲突的规则。（默认是先eslint格式化，再Prettier格式化）
# 安装
pnpm i eslint-plugin-prettier eslint-config-prettier -D

安装好之后，只需要在.eslintrc.cjs中的extends里添加"plugin:prettier/recommended"，注意这一行要加在最后

module.exports = {
  ...
  extends: [
    ...
    'plugin:prettier/recommended' // 添加 prettier 插件
  ],
  ...
}

4.保存自动格式化

将设置中的 editor.formatOnSave 勾选

image.png 配置参考：ESlint+Prettier的安装配置

组件按需自动导入

插件：unplugin-vue-components

这个插件可以按需自动导入src/components路径中的组件（也可以自己设置路径）

1.安装unplugin-vue-components

# 安装unplugin-vue-components
pnpm i unplugin-vue-components -D

2.在vite.config.ts中配置

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
  plugins: [
    ...
    Components({
      include: [/\.vue$/, /\.vue\?vue/],
      dts: '.typings/components.d.ts', //在根目录新建一个.typings文件夹，所有的TypeScript类型定义文件(文件名后缀为.d.ts)都放在这
      dirs: ['src/components'] //默认情况下，此插件将导入src/components路径中的组件。这里可以自己设置
    })
  ]
})

3.自动导入UI组件

还可以自动导入Vuetify、Ant Design Vue和Element Plus等流行的 UI 库的组件

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import {
  AntDesignVueResolver,
  ElementPlusResolver,
  VantResolver,
} from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    ...
    Components({
    ...
      resolvers: [
        AntDesignVueResolver(),
        ElementPlusResolver(),
        VantResolver(),
      ],
    })
  ]
})

配置参考：unplugin-vue-components的安装配置

API自动导入

插件：unplugin-auto-import

这个插件可以为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API。

1.安装unplugin-auto-import

# 安装unplugin-auto-import
pnpm i -D unplugin-auto-import

2.在vite.config.ts中配置

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({
  plugins: [
    ...
    AutoImport({ // 自动按需引入依赖
      imports: ['vue'],
      dts: '.typings/auto-imports.d.ts',
    }),
  ]
})

配置好之后 不需要再写import { computed, ref } from 'vue'等语句，该插件会帮助你按需自动导入vue，vue-router，pinia的api，开发体验更好。

为了正确提示自动导入的 API 的类型，注意在 tsconfig.json中的include中加上.typings文件夹，

{
  "include": [
    ...
    ".typings/**/*.d.ts",
    ".typings/**/*.ts"
  ],
}

3.解决no-undef的错误

配置到这个地方后，eslint可能会出现no-undef的错误。

官方建议

💡使用 TypeScript 时，我们建议直接禁用 no-undef规则，因为 TypeScript 已经检查了它们，您无需担心这一点。

首先使eslintrc.enabled，这样会生成一个.eslintrc-auto-import.json文件。

注意，一旦生成配置文件之后，最好把enable关掉，即改成false。否则这个文件每次会在重新加载的时候重新生成，这会导致eslint有时会找不到这个文件。

当需要更新配置文件的时候，再重新打开吧。

AutoImport({
  ...
  eslintrc: {
    enabled: true
  }
}),

再更新eslintrc

// .eslintrc.js
module.exports = {
  extends: [
    './.eslintrc-auto-import.json',
  ],
}

这样no-undef的报错就没有了

配置参考：unplugin-auto-import的安装配置

Svg Icon

插件：vite-plugin-svg-icons

1.安装vite-plugin-svg-icons

# 安装
pnpm install vite-plugin-svg-icons -D

2.在vite.config.ts中配置

import { resolve } from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
    ...
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(process.cwd(), './src/icons')]
    }),
  ]
})

3.在 src/main.ts 内引入注册脚本

import 'virtual:svg-icons-register'

4.在组件使用

/src/components/SvgIcon.vue

<template>
  <svg aria-hidden="true">
    <use :href="symbolId" :fill="color" />
  </svg>
</template>

<script lang="ts">
export default defineComponent({
  name: 'SvgIcon',
  props: {
    prefix: {
      type: String,
      default: 'icon'
    },
    name: {
      type: String,
      required: true
    },
    color: {
      type: String,
      default: '#333'
    }
  },
  setup(props) {
    const symbolId = computed(() => `#${props.prefix}-${props.name}`)

    return { symbolId }
  }
})
</script>

main.ts

import SvgIcon from './components/SvgIcon.vue' // svg component

createApp(App).component('SvgIcon', SvgIcon).mount('#app')

然后就可以在项目的任何地方愉快使用啦～

5.使用方法

把svg图放在src/icons目录下

比如src/icons/common/triangle.svg

然后就可以在项目任意处使用

<SvgIcon name="common-triangle" />

配置参考：vite-plugin-svg-icons的安装配置

结语

配置到这里，就已经可以愉快地进行开发了。

后面还有Commitlint,GitHub Action,Axios和Vue-Router的配置。因为内容比较多，会单独写几篇来讲。

最后给大家提供可以直接使用的模板：github.com/NanciWu/nan… （还在更新中）

avatar
文章
阅读
粉丝