# pnpm
pnpm create vite

# npm
npm init vite@latest

# yarn
yarn create vite

# pnpm
pnpm create vite project-name -- --template vue-ts

# npm 6.x
npm init vite@latest project-name --template vue-ts

# npm 7+, 需要额外的双横线：
npm init vite@latest project-name -- --template vue-ts

# yarn
yarn create vite project-name --template vue-ts

pnpm i @types/node --save-dev

{
	"compilerOptions": {
		"typeRoots": [
			//	要包含的类型声明文件路径列表
			"node_modules/@types",
			"src/types"
		],
		"target": "esnext",
		"useDefineForClassFields": true,
		"module": "esnext",
		"moduleResolution": "node",
		"strict": true,
		"jsx": "preserve",
		"sourceMap": true,
		"resolveJsonModule": true,
		"esModuleInterop": true,
		"lib": ["esnext", "dom"],
		"baseUrl": "./",
		"paths": {
			//模块名到基于 baseUrl的路径映射的列表（配置别名）
			"@": ["src"],
			"@/*": ["src/*"]
		}
	},
	"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
	resolve: {
		//设置别名
		alias: {
			'@': path.resolve(__dirname, 'src'),
		},
	},
	plugins: [vue()],
	server: {
		port: 8080, //启动端口
		hmr: {
			host: '127.0.0.1',
			port: 8080,
		},
		// 设置 https 代理
		proxy: {
			'/api': {
				target: 'your https address',
				changeOrigin: true,
				rewrite: (path: string) => path.replace(/^\/api/, ''),
			},
		},
	},
})

interface ImportMetaEnv {
	readonly VITE_APP_TITLE: string
	// 更多环境变量...
}

		"dev": "vite --config ./config/vite.config.dev.ts",
		"build": "vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts",
		"report": "cross-env REPORT=true pnpm build",	/*设置环境变量process.env.REPORT为'true'且执行pnpm build  !若系统没有cross-env 命令可以全局装一下*/
		"preview": "vite preview",

yarn add --dev rollup-plugin-visualizer

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
    	emptyOutDir: true,
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        },
      },
    },
  },
})

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" />

defaults and supports es6-module and supports es6-module-dynamic-import, not opera > 0, not samsung > 0, not and_qq > 0

import legacyPlugin from '@vitejs/plugin-legacy'
export default defineConfig({
	plugins: [
		legacyPlugin({
			targets: ['chrome 52'], // 需要兼容的目标列表，可以设置多个
			additionalLegacyPolyfills: ['regenerator-runtime/runtime'], // 面向IE11时需要此插件
		}),
	],
})

pnpm install postcss-preset-env -D

import postcssPresetEnv from 'postcss-preset-env'
export default defineConfig({
	plugins: [vue()],
	css: {
		postcss: {
			plugins: [postcssPresetEnv],
		},
	},
})

$ pnpm i -D vite-babel-plugin

import babel from 'vite-babel-plugin'

export default {
	plugins: [babel()],
}

pnpm i eslint eslint-plugin-vue eslint-config-airbnb-base eslint-plugin-import eslint-import-resolver-typescript -D

pnpm install @typescript-eslint/parser -D

pnpm install @typescript-eslint/eslint-plugin -D

module.exports = {
	parser: 'vue-eslint-parser',

	parserOptions: {
		parser: '@typescript-eslint/parser',
		ecmaVersion: 2020,
		sourceType: 'module',
		ecmaFeatures: {
			jsx: true,
		},
	},
	env: {
		browser: true,
		node: true,
		'vue/setup-compiler-macros': true,
	},
	plugins: ['@typescript-eslint'],
	extends: [
		'airbnb-base',
		'plugin:vue/vue3-recommended',
		'plugin:import/recommended',
		'plugin:import/typescript',
		'plugin:@typescript-eslint/recommended',
		// 'prettier', //解决prettier和eslint的冲突
		'plugin:prettier/recommended', //解决prettier和eslint的冲突
	],

	rules: {
		// override/add rules settings here, such as:
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-var': 'off',
		semi: ['error', 'never'], //强制不使用分号
		// 'quotes': [2, 'single'],//强制使用单引号
		'no-trailing-spaces': 2, //不允许行末空格
		'no-plusplus': 'off', // 允许使用++
		'no-await-in-loop': 'error', // 禁止在循环中使用await
		'no-unused-vars': 'error', //禁止出现未使用的变量
	},
}

node_modules/
dist/
index.html
/*.json

{
    ...
    "scripts": {
        ...
        "eslint:comment": "使用 ESLint 检查并自动修复 src 目录下所有扩展名为 .js 和 .vue 的文件",
        "eslint": "eslint --ext .js,.vue,.ts,.jsx --ignore-path .gitignore --fix src",
    }
    ...
}

pnpm i prettier eslint-config-prettier eslint-plugin-prettier -D  //解决prettier和eslint的冲突

module.exports = {
	// 一行最多 80 字符
	printWidth: 120,
	// 使用 4 个空格缩进
	tabWidth: 4,
	// 使用 tab 缩进，而使用空格
	useTabs: true,
	// // 行尾需要有分号
	semi: false,
	// 使用单引号代替双引号
	singleQuote: true,
	// 对象的 key 仅在必要时用引号
	quoteProps: 'as-needed',
	// jsx 不使用单引号，而使用双引号
	jsxSingleQuote: false,
	// 末尾使用逗号
	trailingComma: 'all',
	// 大括号内的首尾需要空格 { foo: bar }
	bracketSpacing: true,
	// jsx 标签的反尖括号需要换行
	bracketSameLine: false,
	// 箭头函数，只有一个参数的时候，不需要括号
	arrowParens: 'avoid',
	// 每个文件格式化的范围是文件的全部内容
	rangeStart: 0,
	rangeEnd: Infinity,
	// 不需要写文件开头的 @prettier
	requirePragma: false,
	// 不需要自动在文件开头插入 @prettier
	insertPragma: false,
	// 使用默认的折行标准
	proseWrap: 'preserve',
	// 根据显示样式决定 html 要不要折行
	htmlWhitespaceSensitivity: 'css',
	// 换行符使用 lf
	endOfLine: 'auto',
}

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

src/**/*.scss
src/**/*.css
/*不知为啥prettier自动修复完缩进后，stylelint插件会说不对，所以先让prettier不格式化scss和css问件忽略*/

module.exports = {
    ...

    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier',//解决prettier和eslint的冲突
        'plugin:prettier/recommended'//解决prettier和eslint的冲突
    ],

    ...
};

	"scripts": {
		……
		"prettier": "prettier --write .",
	},

pnpm i -D stylelint stylelint-config-standard stylelint-config-rational-order  stylelint-config-prettier

module.exports = {
	extends: ['stylelint-config-standard', 'stylelint-config-rational-order', 'stylelint-config-prettier'],
	defaultSeverity: 'error',
	plugins: ['stylelint-order'],
	rules: {
		indentation: 4,
		'at-rule-no-unknown': [
			true,
			{
				ignoreAtRules: ['plugin'],
			},
		],
		'rule-empty-line-before': [
			'always',
			{
				except: ['after-single-line-comment', 'first-nested'],
			},
		],
		'selector-pseudo-class-no-unknown': [
			true,
			{
				ignorePseudoClasses: ['deep'],
			},
		],
	},
}

module.exports = {
	extends: 'stylelint-config-standard',
	rules: {
		indentation: 4,
	},
}

  "scripts": {
    "lint:style": "stylelint \"src/*.{css,scss}\"",
    "fix:style": "stylelint --fix \"src/*.{css,scss}\""
  }

npm i -D stylelint-scss stylelint-config-standard-scss

module.exports = {
	extends: ['stylelint-config-standard-scss', ……],
  ……
}

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true,
    "source.fixAll.prettier": true
  },

pnpm install -D  @commitlint/config-conventional @commitlint/cli  commitizen  cz-conventional-changelog

{
  ...
  "scripts": {
    "commit:comment": "引导设置规范化的提交信息",
    "commit":"git-cz",
  },

  //如果没有自定义规范则用默认的
      "config": {
        "commitizen": {
            "path": "./node_modules/cz-conventional-changelog"
        }
    },

  //如果有自定义提交规范的话
  "config": {
      "commitizen": {
        "path": "node_modules/cz-customizable" //将原来commit配置,变更为自定义配置
      }
  },
  ...
}

module.exports = {
	extends: ['@commitlint/config-conventional', 'cz'],

	//下面这些是自定义的，可以都不要
	rules: {
		'type-enum': [
			2,
			'always',
			[
				'feature', // 新功能（feature）
				'bug', // 此项特别针对bug号，用于向测试反馈bug列表的bug修改情况
				'fix', // 修补bug
				'ui', // 更新 ui
				'docs', // 文档（documentation）
				'style', // 格式（不影响代码运行的变动）
				'perf', // 性能优化
				'release', // 发布
				'deploy', // 部署
				'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
				'test', // 增加测试
				'chore', // 构建过程或辅助工具的变动
				'revert', // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)
				'merge', // 合并分支， 例如： merge（前端页面）： feature-xxxx修改线程地址
				'build', // 打包
			],
		],
		// <type> 格式 小写
		'type-case': [2, 'always', 'lower-case'],
		// <type> 不能为空
		'type-empty': [2, 'never'],
		// <scope> 范围不能为空
		'scope-empty': [2, 'never'],
		// <scope> 范围格式
		'scope-case': [0],
		// <subject> 主要 message 不能为空
		'subject-empty': [2, 'never'],
		// <subject> 以什么为结束标志，禁用
		'subject-full-stop': [0, 'never'],
		// <subject> 格式，禁用
		'subject-case': [0, 'never'],
		// <body> 以空行开头
		'body-leading-blank': [1, 'always'],
		'header-max-length': [0, 'always', 72],
	},
}

module.exports = {
	types: [
		{ value: 'feature', name: 'feature:  增加新功能' },
		{ value: 'bug', name: 'bug:      测试反馈bug列表中的bug号' },
		{ value: 'fix', name: 'fix:      修复bug' },
		{ value: 'ui', name: 'ui:       更新UI' },
		{ value: 'docs', name: 'docs:     文档变更' },
		{ value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
		{ value: 'perf', name: 'perf:     性能优化' },
		{ value: 'refactor', name: 'refactor: 重构(既不是增加feature，也不是修复bug)' },
		{ value: 'release', name: 'release:  发布' },
		{ value: 'deploy', name: 'deploy:   部署' },
		{ value: 'test', name: 'test:     增加测试' },
		{ value: 'chore', name: 'chore:    构建过程或辅助工具的变动(更改配置文件)' },
		{ value: 'revert', name: 'revert:   回退' },
		{ value: 'build', name: 'build:    打包' },
	],
	// override the messages, defaults are as follows
	messages: {
		type: '请选择提交类型:',
		customScope: '请输入您修改的范围(可选):',
		subject: '请简要描述提交 message (必填):',
		body: '请输入详细描述(可选，待优化去除，跳过即可):',
		footer: '请输入要关闭的issue(待优化去除，跳过即可):',
		confirmCommit: '确认使用以上信息提交？(y/n/e/h)',
	},
	allowCustomScopes: true,
	skipQuestions: ['body', 'footer'],
	subjectLimit: 72,
}

# 1.安装
pnpm i husky lint-staged -D

# 2.生成 .husky 的文件夹
npx husky install

# 3.添加 hooks，会在 .husky 目录下生成一个 pre-commit 脚本文件
npx husky add .husky/pre-commit "npx --no-install lint-staged"

# 4.添加 commit-msg
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

{
  ...
  	"scripts": {
		"lint-staged": "npx lint-staged",
		"prepare": "husky install"
	},
	"lint-staged": {
		"*.{js,ts,jsx,tsx,vue}": [
			"prettier --write",
			"eslint --fix"
		],
		"*.{scss,less,css}": [
			"stylelint --fix"
		],
		"*.{html,json,yaml,md}": [
			"prettier --write"
		]
	},
  ...
}

pnpm i @vueuse/core

  # .scss and .sass
 pnpm i -D sass

 # .less
 pnpm i -D less

 pnpm i axios

 pnpm add echarts --save
 pnpm add -D @types/echarts

 pnpm i vue-router pinia --save

import { createRouter, createWebHistory } from 'vue-router'
import NProgress from 'nprogress' // 配置progress bar
import 'nprogress/nprogress.css'

import { betterTodosRoutes, bbsRoutes } from './routes'
import createRouteGuard from './guard'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const router = createRouter({
	history: createWebHistory(),
	routes: [
		{
			path: '/',
			redirect: '/betterTodos/home',
		},
		{
			path: '/betterTodos',
			name: 'betterTodos',
			redirect: '/betterTodos/home',
			component: () => import('@/layout/betterTodos/index.vue'),
			children: betterTodosRoutes,
		},
		{
			path: '/bbs',
			name: 'bbs',
			component: () => import('@/layout/bbs/index.vue'),
			children: bbsRoutes,
		},
		{
			path: '/login',
			name: 'login',
			component: () => import('@/views/login/index.vue'),
			meta: {
				requiresAuth: false,
			},
		},
		{
			path: '/:pathMatch(.*)*',
			name: 'notFound',
			component: () => import('@/views/not-found/index.vue'),
		},
	],
	scrollBehavior() {
		return { top: 0 }
	},
})

createRouteGuard(router)

export default router

/**自动注册路由的入口文件 */
import { RouteRecordRaw } from 'vue-router'
import getLayoutsRoutes from './layoutsRoutes'
import autoloadModuleRoutes from './modules'

//根据环境变量判断选用哪种路由自动注册方式
let routes: RouteRecordRaw[] = []
if (import.meta.env.VITE_IS_AUTOLOAD === 'true') {
	routes = getLayoutsRoutes()
} else {
	routes = autoloadModuleRoutes()
}
export default routes

/*直接根据layouts里的文件和views里的文件自动注册路由*/
import { RouteRecordRaw } from 'vue-router'

const layouts = import.meta.globEager('@/layouts/*.vue')
const views = import.meta.globEager(`@/views/*/*.vue`)
function getLayoutsRoutes() {
	const layoutRoutes: RouteRecordRaw[] = []
	Object.entries(layouts).forEach(([filePath, module]) => {
		const fileName = filePath.replace(/.+layouts\/|\.vue/gi, '')
		const route = configRoute(fileName, module)
		route.children = getChildrenRoutes(fileName)
		layoutRoutes.push(route)
	})
	return layoutRoutes
}

/*下面这两个函数就是为上面那个函数服务的*/
function getChildrenRoutes(dirName: string) {
	const childrenRoutes: RouteRecordRaw[] = []
	Object.entries(views).forEach(([filePath, module]) => {
		if (filePath.includes(dirName)) {
			const fileName = filePath.replace(/.+views\/|\.vue/gi, '')
			childrenRoutes.push(configRoute(fileName, module))
		}
	})
	return childrenRoutes
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function configRoute(fileName: string, module: { [key: string]: any }) {
	const route: RouteRecordRaw = {
		path: `/${fileName}`,
		name: fileName,
		component: module.default,
	}
	return Object.assign(route, module.default?.route) //如果模块有route对象，则将其里面的属性添加到（或覆盖掉）这里的route中
}
export default getLayoutsRoutes

import { RouteRecordRaw } from 'vue-router'
import layoutRoutes from './autoload/layoutsRoutes'

const routes: RouteRecordRaw[] = [
	{
		path: '/',
		name: 'home',
		component: () => import('@/views/home.vue'),
	},
	...layoutRoutes,
]

const routes = import.meta.env.VITE_IS_AUTOLOAD === 'true' ? getLayoutsRoutes() : [] //根据环境变量判断是否自动加载路由
export default routes

<script>
//使该模块暴露出route对象
export default {
	route: { path: '/a/:id', meta: { auth: true } },
}
</script>

import type { RouteRecordRaw } from 'vue-router'

/* 加载bbs的子路由 */
const bbsModules = import.meta.globEager('./bbs-modules/*.ts')
const bbsRoutes: RouteRecordRaw[] = []
Object.keys(bbsModules).forEach(key => {
	const defaultModule = bbsModules[key].default
	if (!defaultModule) return
	const moduleList = Array.isArray(defaultModule) ? [...defaultModule] : [defaultModule]
	bbsRoutes.push(...moduleList)
})

/* 加载mall的子路由 */
const mallModules = import.meta.globEager('./mall-modules/*.ts')
const mallRoutes: RouteRecordRaw[] = []

Object.keys(mallModules).forEach(key => {
	const defaultModule = mallModules[key].default
	if (!defaultModule) return
	const moduleList = Array.isArray(defaultModule) ? [...defaultModule] : [defaultModule]
	mallRoutes.push(...moduleList)
})

/* 加载betterTodos的子路由 */
const betterTodosModules = import.meta.globEager('./betterTodos-modules/*.ts')
const betterTodosRoutes: RouteRecordRaw[] = []
console.log(betterTodosModules)
Object.keys(betterTodosModules).forEach(key => {
	const defaultModule = betterTodosModules[key].default
	if (!defaultModule) return
	const moduleList = Array.isArray(defaultModule) ? [...defaultModule] : [defaultModule]
	betterTodosRoutes.push(...moduleList)
})

export { bbsRoutes, mallRoutes, betterTodosRoutes }

/**
 * 让menu和tabbar组件用watch去单独监听路由会浪费渲染性能。使用发布订阅模式去进行分发管理。
 */
import mitt, { Handler } from 'mitt'
import type { RouteLocationNormalized } from 'vue-router'

const emitter = mitt()

const key = Symbol('ROUTE_CHANGE')

let latestRoute: RouteLocationNormalized

export function emitRouteChange(to: RouteLocationNormalized) {
	emitter.emit(key, to) // 触发事件
	latestRoute = to
}

// eslint-disable-next-line no-unused-vars
export function registerRouteChangeEvent(handler: (route: RouteLocationNormalized) => void, immediate = true) {
	emitter.on(key, handler as Handler) // 注册事件：当emitter.emit(key)时就会执行这个事件
	if (immediate && latestRoute) {
		handler(latestRoute)
	}
}

export function removeRouteListener() {
	emitter.off(key)
}

import type { Router } from 'vue-router'
import { emitRouteChange } from '@/utils/route-listener'

function setupPageGuard(router: Router) {
	router.beforeEach(async to => {
		emitRouteChange(to) // 触发route change
	})
}

/** 暴露出这个函数在router目录的index.ts文件中创建守卫 */
export default function createRouteGuard(router: Router) {
	setupPageGuard(router)
}

import { createPinia } from 'pinia'
import useAppStore from './modules/app'

const pinia = createPinia()

export { useAppStore }
export default pinia

import store from './store'
app.use(store)

pnpm i -D mockjs @types/mockjs vite-plugin-mock

import { ConfigEnv, UserConfigExport, mergeConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import baseConig from './vite.config.base'

export default ({ command }: ConfigEnv): UserConfigExport =>
	mergeConfig(
		{
			mode: 'development',
			server: {
				open: true,
				fs: {
					strict: true,
				},
			},
			plugins: [
				viteMockServe({
					// default
					mockPath: 'mock',
					localEnabled: command === 'serve',
				}),
			],
		},
		baseConig,
	)

import axios, { AxiosRequestConfig } from 'axios'
import { ResponseData } from '@/apis/axios/types'
import { getToken, removeToken } from '@/utils/storage/token-operator'
import router from '@/router'

export default class Axios {
	private instance

	constructor(config: AxiosRequestConfig) {
		this.instance = axios.create(config)
		this.interceptorsRequest()
		this.interceptorsResponse()
	}

	public async request<
		ResponseDataResult,
		T = ResponseData<ResponseDataResult>, // 这里的泛型为啥这样定义，需要结合axios的request方法的类型定义去理解
	>(config: AxiosRequestConfig): Promise<T> {
		// 异步方法必须返回一个Promise对象
		// 做好传入参数的类型声明和返回值的类型声明
		try {
			const response = await this.instance.request<T>(config)
			return response.data // ！！直接返回response里的data里的内容
		} catch (error) {
			return Promise.reject(error) // 怎么处理这个错误比较合理呢？？？
		}
	}

	private interceptorsRequest() {
		this.instance.interceptors.request.use(
			config => {
				// eslint-disable-next-line no-param-reassign
				config.headers = {
					Authorization: `Bearer${getToken()}`,
				}
				return Promise.resolve(config)
			},
			error => {
				return Promise.reject(error)
			},
		)
	}

	private interceptorsResponse() {
		this.instance.interceptors.response.use(
			response => {
				// 2xx 范围内的状态码都会触发该函数。
				return Promise.resolve(response)
			},
			error => {
				switch (error.response.status) {
					case 401: // token失效了
						removeToken()
						router.push({ name: 'login' })
						break
					case 422:
						break
					default:
						break
				}
				// 超出 2xx 范围的状态码都会触发该函数。
				return Promise.reject(error)
			},
		)
	}
}

// 实例化一个axios出来使用
import Axios from '@/apis/axios/Axios'

const apis = new Axios({
	baseURL: `${import.meta.env.VITE_API_BASE_URL}/api`,
	timeout: 5000,
	headers: {},
})
export default apis

import apis from '@/apis/axios/index'

export interface infoDataResult {
	name: string
	age: number
}
interface loginDataResult {
	token: string
}
export interface ILoginData {
	account: string
	password: string
}
const userApis = {
	info() {
		return apis.request<infoDataResult>({
			// 泛型里传递的是返回的数据data里的result的类型
			url: '/info',
		})
	},
	login(params: ILoginData) {
		return apis.request<loginDataResult>({
			url: '/login',
			method: 'post',
			data: params,
		})
	},
}
export default userApis

function autoloadGlobalComponent(app: App) {
	const components = import.meta.globEager('@/components/global/**/*.vue')
	Object.entries(components).forEach(([filePath, component]) => {
		const componentName = filePath.replace(/.+global\/|\.vue/gi, '')
		app.component(componentName, component.default)
	})
}

pnpm i -D unplugin-vue-components@^0.17.21
#下载其他版本可能会导致自动生成的类型声明文件不奏效，因为里面写的是declear module ‘@/runtime/vue’，而这个版本行是因为其自动生成的类型声明文件写的是declear module ‘vue’

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
	plugins: [
		vue(),
		Components({
			//自动加载的组件目录，默认值为 ['src/components']
			dirs: ['src/components'],
			//组件名称包含目录，防止同名组件冲突
			directoryAsNamespace: true,
			//指定类型声明文件，为true时在项目根目录创建
			dts: 'types/components.d.ts',
		}),
	],
})

import { Plugin } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default function (plugins: Plugin[]) {
	plugins.push(
		Components({
			dirs: ['src/components'],
			directoryAsNamespace: true,
			//为true时在项目根目录自动创建
			dts: 'types/components.d.ts',
			//引入element plus自动组件支持
			resolvers: [ElementPlusResolver()],
		}),
	)
}

<el-button type="primary" size="default">houdunren.com</el-button>

<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />

import { ref, computed } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

const count = ref(0)
const doubled = computed(() => count.value * 2)

pnpm i -D unplugin-auto-import

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
	plugins: [
		vue(),
		AutoImport({
			imports: ['vue', 'vue-router'], //自动引入vue和vue-router的api
			//为true时在项目根目录自动创建
			dts: 'src/types/auto-imports.d.ts',
		}),
	],
})

const user = ref('123')

import { Plugin } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default function (plugins: Plugin[]) {
	plugins.push(
		AutoImport({
			//引入element plus自动api支持
			resolvers: [ElementPlusResolver()],
			imports: ['vue', 'vue-router'],
			//为true时在项目根目录自动创建
			dts: 'types/auto-imports.d.ts',
		}),
	)
}

ElMessage.success('houdunren.com')

<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />

pnpm i vee-validate@next @vee-validate/rules @vee-validate/i18n yup

<script setup lang="ts">
/**通过组件的方式去使用validate */
import { defineRule, Form, Field, configure } from 'vee-validate'
import { required, email } from '@vee-validate/rules'
import { localize } from '@vee-validate/i18n'
import zh_CN from '@vee-validate/i18n/dist/locale/zh_CN.json'
import { ref } from 'vue'
const account = ref<string>('ss')
const emailRule = (value: string) => {
	//自定义规则
	return /@/.test(value) ? '正确' : '错误'
}
configure({
	generateMessage: localize('zh_CN', zh_CN),
})
const onSubmit = (data: object) => {
	console.log(data)
}
</script>

<template>
	<!-- 通过组件去使用vee-validate -->
	<Form @submit="onSubmit">
		<!-- Field必须有name属性 -->
		<Field v-slot="{ field, errorMessage }" name="account" label="账号" :rules="email" :validate-on-input="true">
			<input v-bind="field" v-model="account" />
			<P>{{ errorMessage }}</P>
		</Field>
		<button type="submit">提交</button>
	</Form>
</template>

<style lang="scss" scoped></style>

<script setup lang="ts">
import { defineRule, configure, useField, useForm } from 'vee-validate'
import { required, email } from '@vee-validate/rules'
import { localize } from '@vee-validate/i18n'
import zh_CN from '@vee-validate/i18n/dist/locale/zh_CN.json'
import * as yup from 'yup' //注意yup没有默认导出
defineRule('email', email) //利用rule库里已有的规则来定义全局规则
defineRule('required', required) //利用rule库里已有的规则来定义全局规则
configure({
	generateMessage: localize('zh_CN', zh_CN), //配置语言
})
const { handleSubmit, errors } = useForm({
	//在form里定义所有字段的规则
	initialValues: {
		username: 'ss',
		password: '',
	},
	validationSchema: {
		// username: yup.string().required('必填').email('邮箱格式不正确'), //使用yup去编写规则
		username: {
			email, //调用自己定义的规则
			required, //调用自己定义的规则
		},

		password: {
			required: true, //调用vee-validate里内置规则
		},
	},
})
const { value: usernameValue } = useField('username', { label: '用户名' }) //定义有几个field
const { value: passwordValue } = useField('password', { label: '密码' })

const onSubmit = handleSubmit(data => {
	console.log(data)
})
</script>

<template>
	<form @submit="onSubmit">
		<input v-model="usernameValue" type="text" />
		<p v-show="errors.username">{{ errors.username }}</p>
		<input v-model="passwordValue" type="text" />
		<p v-show="errors.password">{{ errors.password }}</p>
		<button type="submit">提交</button>
	</form>
</template>

<style lang="scss" scoped></style>

import * as veeValidate from 'vee-validate'
import rules from '@vee-validate/rules'
import { localize } from '@vee-validate/i18n'
import zh_CN from '@vee-validate/i18n/dist/locale/zh_CN.json'
import * as yup from 'yup' //yup也是提供一些定义好的规则的，跟@vee-validate/rules一样，所以其实是二者选其一就可以了，yup更强大
veeValidate.configure({
	//配置要写在定义规则的上面，否则中文会有问题
	generateMessage: localize('zh_CN', zh_CN), //配置语言
	validateOnInput: true, //配置是否在输入时进行验证
})
Object.keys(rules).forEach(key => {
	//把所有规则都定义好
	veeValidate.defineRule(key, rules[key])
})
const modules = { yup, ...veeValidate }
export default modules

<script setup lang="ts">
import userApis from '@/apis/user'
import v from '@/utils/validate' // 就是刚刚封装好的那个包
import { setToken } from '@/utils/storage/token-operator'

const { useForm, yup, useField } = v
const phoneRegExp =
	/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/
const { handleSubmit, errors } = useForm({
	initialValues: {
		account: '',
		password: '',
	},
	validationSchema: {
		account: yup.string().test({
			name: 'account',
			exclusive: true,
			message: '格式不正确',
			test: value => {
				// 复合校验
				if (value) {
					return phoneRegExp.test(value) || yup.string().email().isValid(value)
				}
				return false
			},
		}),
		password: yup.string().min(3, '密码位数不能小于3位数').label('密码'),
	},
})
const { value: account } = useField('account')
const { value: password } = useField('password')
const onSubmit = handleSubmit(async data => {
	try {
		const {
			result: { token }, // 解构再解构
		} = await userApis.login(data)
		setToken(token)
	} catch (err) {
		// 处理错误
		// 例如arco-design-pro的处理方法：errorMessage.value = (err as Error).message;
	} finally {
		// setLoading(false)
	}
})
</script>

<template>
	<form @submit="onSubmit">
		<input v-model="account" type="text" placeholder="Email or phone" />
		<p>{{ errors.account }}</p>
		<input v-model="password" type="password" placeholder="Password" />
		<p>{{ errors.password }}</p>
		<button type="submit">Login</button>
	</form>
</template>

<style lang="scss" scoped></style>

pnpm install @icon-park/vue-next --save

import { install } from '@icon-park/vue-next/es/all'
import { createApp } from 'vue'

const app = createApp({})

// Install
install(app) // use default prefix 'icon', eg: icon is People, name is icon-people.
install(app, 'icon') // use custom prefix 'icon', eg: icon is People, name is icon-people.

app.mount('#app')

import * as icon from '@icon-park/vue-next'

<component :is="menu.icon ? icon[menu.icon] : ''"></component>
<component :is="icon['DashboardOne']"></component>
<component :is="icon['Home']"></component>

import { IconType } from '@icon-park/vue-next/es/all'

interface Menu {
	title?: string
	icon?: IconType
	isActive?: boolean
	route?: string
}

pnpm install animate.css --save

import 'animate.css'

<h1 class="animate__animated animate__bounce">An animated element</h1>

<router-view v-slot="{ Component }">
		<!--过渡组件添加动画效果-->
		<Transition
			appear
			mode="out-in"  <!--先出后进模式，不然可能会产生bug-->
			enter-active-class="animate__animated animate__bounceIn"
			leave-active-class="animate__animated animate__bounceOut"
		>
			<component :is="Component"></component>
		</Transition>
	</router-view>

pnpm i gsap

//封装的动画组件
<script setup lang="ts">
import gsap from 'gsap'
import { RendererElement } from 'vue'

interface IAnimateLinkProps {
	tag?: string
	duration?: number
	delay?: number
}
const props = withDefaults(defineProps<IAnimateLinkProps>(), {
	tag: '',
	duration: 0.5,
	delay: 0.2,
})
const beforeEnter = (el: RendererElement) => {
	gsap.set(el, {
		opacity: 0,
	})
}

const enter = (el: RendererElement) => {
	gsap.to(el, {
		// to表示设置动画
		opacity: 1,
		duration: props.duration,
		delay: el.dataset.index * props.delay,
	})
}
</script>

<template>
	<div class="animateList-container">
		<TransitionGroup :tag="props.tag" appear name="list" @before-enter="beforeEnter" @enter="enter">
			<slot></slot>
		</TransitionGroup>
	</div>
</template>

<style lang="scss" scoped>
.animateList-container {
	position: relative;
}
</style>

//使用这个封装的动画组件
<GlobalListAnimateList tag="ul" :duration="5" :delay="2">
		<li v-for="(item, index) of [1, 2, 1, 2, 1, 2]" :key="index" :data-index="index">{{ item }}</li>
	</GlobalListAnimateList>

:root[theme='black'] {
	--color: #000;
}
:root[theme='white'] {
	--color: #fff;
}

const setDocumentTheme = (theme = 'white') => {
	const docElm = document.documentElement
	if (!docElm.hasAttribute('theme')) {
		docElm.setAttribute('theme', theme)
	} else {
		docElm.removeAttribute('theme')
	}
}