Vue.js 官方已经提供了新的脚手架项目以便使用 Vite 来搭建 Vue3 项目

  • create-vue

相比于直接使用 Vite 提供的项目模板,此项目能够更方便的集成 Vue Router、Pinia、 Vitest、Cypress、Eslint 和 Prettier

本文并没有使用 create-vue 项目来生成项目,而是基于 Vite 提供的初始模板来完成

# 项目创建

yarn create vite

# 添加 JSX 支持

yarn add -D @vitejs/plugin-vue-jsx

vite.config.ts 文件应用插件

import vueJsx from "@vitejs/plugin-vue-jsx";
plugins: [vue(), vueJsx()];

# 配置 Eslint

# 配置 Prettier

# 初始化为 Git 仓库

# 配置 commitlint

# 配置 Commitizen

# 配置 husky

# 待整理

yarn create vite
yarn add -D @vitejs/plugin-vue-jsx
// 初始化 ESLint https://eslint.org/docs/latest/user-guide/getting-started 主要用于发现代码的错误
npm init @eslint/config
// 选择 To check syntax and find problems
// 会添加 @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-vue 共 4 个依赖项

// 应用 Prettier https://github.com/prettier/eslint-plugin-prettier 主要用于格式化代码
yarn add -D eslint-plugin-prettier
yarn add -D prettier --exact
yarn add -D eslint-config-prettier

// 应用 @vitejs/plugin-vue-jsx 插件提供 Vue 3 JSX 支持
vite.config.ts
import vueJsx from "@vitejs/plugin-vue-jsx";
plugins: [vue(), vueJsx()];

//eslint 配置 https://eslint.vuejs.org/user-guide/#installation
在 .eslintrc.json 设置 eslint 规则并
配置 "plugin:vue/vue3-recommended"
配置"plugin:prettier/recommended" 来自 https://github.com/prettier/eslint-plugin-prettier

创建 .prettierrc.json 设置 prettierrc 规则

// husky
git init // 使用 husky 的前提是当前目录是一个 git 仓库
yarn add -D husky
npm set-script prepare "husky install"
yarn // 再次执行 yarn 会自动触发此命令

// commitlint
yarn add -D @commitlint/config-conventional @commitlint/cli

// commitizen
yarn add -D commitizen
npx commitizen init cz-conventional-changelog --save-dev --save-exact

vue-router, pinia, vitest ...

更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

ICUXIKA 微信支付

微信支付

ICUXIKA 支付宝

支付宝

ICUXIKA 贝宝

贝宝