项目骨架搭建

一、背景

• vscode
  • 安装Vue Language Features插件，禁用vue2对应的vuter插件
  • 安装Typescript Vue Plugin
• node > 16
• npm > 7
• vite
• Vue3 + TS
• ESLint
• StyleLint （CSS、scss、less规范）
• Husk （git时的一些hook配置，为了提交规范的代码）

二、项目骨架搭建步骤

1、前往vue3官网，创建Vue3项目

$ npm init vue@latest

注意：此时并不代表你选择了npm包管理器，选择具体哪个包管理器，是在首次安装node_modules的时候

本次项目使用pnpm包管理器

$ pnpm i

2、集成ESlint

集成ESLint一般和prettier使用，也可以使用ESLint自带的代码风格规范。本次项目没有使用开发者自定义配置的.eslintrc.js和.prettierrc.js。而是借助第三方插件，该插件内置了ESLint的常用配置项。采用了ESLint的To check syntax, find problems, and enforce code style（检查语法、发现问题并强制执行代码风格）

2.1、 安装VSCode插件

ESLint

2.2、安装ESLint插件

// @antfu/eslint-config 是antfu这个人封装好的一套ESLint插件，内置了"To check syntax, find problems, and enforce code style"。所以不需要再使用.eslintrc.js 和 prettierrc的配置了// @antfu/eslint-config基于eslint
$ pnpm i eslint @antfu/eslint-config -D

@antfu/eslint-config

2.3、项目根目录新增.eslintrc

{"extends": "@antfu","rules": {// 关掉保存文件后， 
内容
  分行显示"vue/singleline-html-element-content-newline" : "off"}
}

2.4、.vscode目录下，新建settings.json

{// 禁用prettier插件"prettier.enable": false,// 禁用保存文件自动格式化"editor.formatOnSave": false,"editor.codeActionsOnSave": {"source.fixAll":true,"source.fixAll.eslint": true,},
}

或者在VScode工具中的setting,json添加以上内容

2.5、 在package.json新增eslint启动相关的命名

"lint:eslint": "eslint src/**/*.{ts,tsx,js,jsx,vue} --fix",

3、集成stylelint

3.1、安装相关依赖

$ pnpm add sass postcss postcss-html stylelint stylelint-config-standard stylelint-config-standard-scss stylelint-config-standard-vue stylelint-scss -D

3.2、项目根目录新增.stylelintrc和.stylelintignore

.stylelintrc

{"extends": ["stylelint-config-standard","stylelint-config-standard-scss","stylelint-config-standard-vue/scss"],"plugins": ["stylelint-scss"],"rules": {"selector-class-pattern": ["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",{"message": "Expected class selector to be kebab-case"}],"declaration-empty-line-before": null,"no-descending-specificity": true,"color-hex-length": ["long","short"],"at-rule-no-unknown": null}
}

.stylelintignore

dist/
node_modules/

3.3、在setting.json中新增配置

{"editor.codeActionsOnSave": {"source.fixAll.stylelint": true},// 配置stylelint检查的文件类型范围"stylelint.validate": ["css","less","postcss","scss","sass","vue"],"stylelint.enable": true,"css.validate": false,"less.validate": false,"scss.validate": false,"typescript.tsdk": "node_modules\\typescript\\lib"
}

3.4、在package.json 新增stylelint校验命令

"lint:stylelint": "stylelint src/**/*.{css,scss,vue} --fix"

4、集成husky

4.1、安装husky并添加启动命令"prepare": “husky install”

$ npx husky-init '&&' pnpm install

项目根目录下，生成了.husky目录

4.2、安装lint-staged，出发git hook

pnpm i lint-staged -D

4.3、在package.json中添加

"lint-staged": {"src/**/*.{ts,tsx,js,jsx,vue}": "eslint --fix","src/**/*.{css,scss,vue}": "stylelint --fix"
},

4.4、在pre-commit 文件下更改默认的提交命令 npm test 如下：

npx lint-staged --allow-empty $1

5、补充

5.1、.editorconfig

.editorconfig 为了多人开发时，兼容不同的开发工具

1. 安装VScode插件：EditorConfig for VS Code
2. 在项目根目录下创建.editorconfig，内容如下

# http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

5.2、package.json 补充

{"name": "reportal","version": "0.0.0","private": true,"engines": {"node": ">= 16"},"scripts": {"dev": "vite","build": "run-p type-check build-only","preview": "vite preview","build-only": "vite build",// pnpm lint 时，同时run了type-check lint:eslint lint:stylelint三种命令"lint": "run-p type-check lint:eslint lint:stylelint","type-check": "vue-tsc --noEmit","lint:eslint": "eslint src/**/*.{ts,tsx,js,jsx,vue} --fix","lint:stylelint": "stylelint src/**/*.{css,scss,vue} --fix",// 安装了husky 新增的"prepare": "husky install",// 项目中只允许使用pnpm"preinstall": "npx only-allow pnpm"},"dependencies": {...},"devDependencies": {...},// 为了让lint-staged出发git hook"lint-staged": {"src/**/*.{ts,tsx,js,jsx,vue}": "eslint --fix","src/**/*.{css,scss,vue}": "stylelint --fix"}
}

6、集成element-plus

elemet-plus官网

6.1、安装

$ pnpm i element-plus

6.2、在main.ts中完整引入element-plus

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'import 'element-plus/dist/index.css'
const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

6.3、在tsconfig.json中，添加如下配置

"compilerOptions": {// 显示  element-plus 中的组件类型  及其 属性提示"types": ["element-plus/global"],},

7、搭建项目目录

env.d.ts本来在项目目录下，将这个文件如果移到types文件夹下，需要更改tsconfig.json的配置

"include": ["types/**.d.ts", "src/**/*", "src/**/*.vue"],

分离vite.config.ts中的配置的时候，需要在tsconfig.node.json文件进行如下说明

"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*","vite/**/*.ts"],

8、配置自动引入组件【个人不大喜欢使用】

自动引入组件，即是写上组件名，保存文件，不需要在具体文件上写对应的import语句了

8.1、安装依赖

pnpm install -D unplugin-vue-components unplugin-auto-import

8.2、在vite/plugins文件夹下新建components.ts和auto-import.ts

components.ts

import components from 'unplugin-vue-components/vite'
// 使用src下的components  不用再import
export default function setComponents() {return components({dirs: ['src/components'],include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/],dts: 'types/components.d.ts',})
}

auto-import.ts

// 找不到模块“unplugin-auto-import”或其相应的类型声明。
// import AutoImport from 'unplugin-auto-import'
// 解决
import AutoImport from 'unplugin-auto-import/vite'
export default function setAutoImport() {return AutoImport({// 使用'vue', 'vue-router', 'pinia'时，不再需要导入了imports: ['vue', 'vue-router', 'pinia'],dts: 'types/auto-imports.d.ts',})
}

8.3、在vite/plugins/index.ts中引用

import type { PluginOption } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from './auto-import'
import components from './components'
export default function setVitePlugins() {const plugins: PluginOption[] = [vue(), vueJsx()]plugins.push(AutoImport())plugins.push(components())return plugins
}