结合 Vue 3、Vite、TypeScript、Pinia、Vue Router、SCSS、StyleLint、CommitLint、Husky 和 Lint-Staged,让你的开发体验更加顺畅!💻✨
目录
- 环境准备
- 创建项目
- 安装依赖
- [配置 TypeScript](#配置 TypeScript "#%E9%85%8D%E7%BD%AE-TypeScript")
- [设置 Vue Router](#设置 Vue Router "#%E8%AE%BE%E7%BD%AE-Vue-Router")
- [使用 Pinia 状态管理](#使用 Pinia 状态管理 "#%E4%BD%BF%E7%94%A8-Pinia-%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86")
- [SCSS 配置](#SCSS 配置 "#SCSS-%E9%85%8D%E7%BD%AE")
- [ESLint 配置](#ESLint 配置 "#ESLint-%E9%85%8D%E7%BD%AE")
- 代码风格检查与提交规范
- 总结
环境准备
在开始之前,请确保你的开发环境中已安装以下工具:
- Node.js (建议使用 LTS 版本)
- npm 或 yarn
你可以通过以下命令检查 Node.js 和 npm 的版本:
bash
node -v
npm -v
创建项目
首先,我们使用 Vite 创建一个新的 Vue 3 + ts 项目。打开终端,执行以下命令:
bash
npm create vite@latest my-vue-app --template vue-ts
进入项目目录:
bash
cd my-vue-app
安装依赖
接下来,我们需要安装一些必要的依赖。执行以下命令安装核心依赖:
bash
npm install pinia vue-router
然后,为了在开发环境中使用样式和代码风格检查工具,我们需要安装以下开发依赖:
bash
npm install --save-dev sass stylelint stylelint-config-standard husky commitlint @commitlint/config-conventional lint-staged eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin
配置 TypeScript
Vite 默认会为我们配置 TypeScript,但我们可以根据需要进行一些调整。打开 tsconfig.json
文件,确保以下配置存在:
json
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"strict": true,
"jsx": "preserve",
"moduleResolution": "Node",
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"exclude": ["node_modules"]
}
设置 Vue Router
在 src
目录下创建一个 router
文件夹,并在其中创建 index.ts
文件:
typescript
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue'),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
然后在 main.ts
中引入并使用 Vue Router:
typescript
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');
使用 Pinia 状态管理
在 src
目录下创建一个 stores
文件夹,并在其中创建 index.ts
文件:
typescript
import { createPinia } from 'pinia';
const pinia = createPinia();
export default pinia;
然后在 main.ts
中引入并使用 Pinia:
typescript
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import pinia from './stores';
createApp(App).use(router).use(pinia).mount('#app');
SCSS 配置
在 src
目录下创建一个 styles
文件夹,并在其中创建 main.scss
文件:
scss
$primary-color: #42b983;
body {
font-family: Arial, sans-serif;
background-color: $primary-color;
}
在 main.ts
中引入 SCSS 文件:
typescript
import './styles/main.scss';
ESLint 配置
在项目根目录下创建 .eslintrc.js
文件,添加以下内容:
javascript
module.exports = {
root: true,
env: {
node: true,
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended',
'@vue/typescript/recommended',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2021,
sourceType: 'module',
},
rules: {
'vue/multi-word-component-names': 'off', // 关闭组件名称多词规则
'indent': ['error', 2], // 强制使用2个空格缩进
'quotes': ['error', 'single'], // 强制使用单引号
},
};
代码风格检查与提交规范
StyleLint
在项目根目录下创建 .stylelintrc.json
文件,添加以下内容:
json
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": 2,
"string-quotes": "single"
}
}
CommitLint
在项目根目录下创建 commitlint.config.js
文件,添加以下内容:
javascript
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'header-max-length': [2, 'always', 72], // 限制提交信息的最大长度为72个字符
'type-case': [2, 'always', ['lower-case', 'upper-case']],
'type-enum': [
2,
'always',
[
'feat',
'fix',
'docs',
'style',
'refactor',
'merge',
'test',
'chore',
'revert',
'build',
'ci',
'perf'
]
],
}
};
Husky 和 Lint-Staged
初始化 Husky:
bash
npx husky install
添加 Git 提交钩子:
bash
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
接下来,配置 Lint-Staged。在项目根目录下创建 lint-staged.config.js
文件,添加以下内容(可以创建配置文件或者直接在package.json配置 二选一):
javascript
module.exports = {
'*.{js,jsx,ts,tsx,vue}': 'eslint --fix',
'*.scss': 'stylelint --fix',
};
在 package.json 中配置 Lint-Staged
在 package.json
文件中添加以下内容,以便将 Lint-Staged 集成到 Husky 的 pre-commit 钩子中:
json
{
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,ts,tsx,jsx,vue}": [
"eslint --fix",
"prettier --write",
"git add"
],
"package.json": [
"prettier --write",
"git add"
],
"*.md": [
"prettier --write",
"git add"
],
"*.scss": "stylelint --fix"
}
}
总结
恭喜你!🎉 现在你已经成功搭建了一个基于 Vue 3、Vite、TypeScript、Pinia、Vue Router、SCSS、StyleLint、CommitLint、Husky 和 Lint-Staged 的开发环境。
希望这个教程对你有所帮助!如果你有任何问题或建议,请在评论区留言。让我们一起进步!💪