Vite2+Vue3+TS+AntDesignVue3开发框架搭建
1 使用 vite cli 快速创建项目
yarn create vite project-name --template vue-ts
2 在.vscode--> extensions.json中添加推荐的扩展
{
"recommendations": ["johnsoncodehk.volar", "streetsidesoftware.code-spell-checker"]
}
3 修改主页index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<link rel="icon" href="./favicon.ico" />
<title>vite2-vue3</title>
</head>
</html>
4 修改.gitignore
node_modules
dist
dist-ssr
*.local
.DS_Store
/.vscode/tasks.json
/.vscode/launch.json
/.idea
.tags1
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.eslintcache
*.local
*.zip
*.rar
/src/typings/httpTypes/*
4 配置提交校验
# commit-msg这个名称不能变,更改之后提交时的校验就不再执行配置的工作流
yarn add husky -D && yarn husky install && npx husky add .husky/commit-msg
5 配置stylelint功能
yarn add -D stylelint stylelint-config-prettier stylelint-config-standard stylelint-config-recess-order stylelint-less
yarn add -D stylelint@latest stylelint-config-standard@latest stylelint-order@latest stylelint-config-recess-order@latest
module.exports = {
extends: ['stylelint-order', 'stylelint-config-standard', 'stylelint-config-recess-order'],
customSyntax: 'postcss-less',
rules: {
indentation: 2,
'at-rule-no-unknown': [true, { ignoreAtRules: ['mixin', 'extend', 'content', 'include'] }],
'no-empty-source': null, // null是关闭规则的意思--less文件内容可以为空
'no-descending-specificity': null, //禁止特异性较低的选择器在特异性较高的选择器之后重写
'font-family-no-missing-generic-family-keyword': null, // 关闭必须设置通用字体的规则
// id选择器为了兼容#__vconsole, 修改短横线命名
'selector-id-pattern': '^([#_a-z][_a-z0-9]*)(-[a-z0-9]+)*$',
// class选择器为了兼容css module,将规则修改为同时支持短横线和小驼峰
'selector-class-pattern': '(^([#_a-z][a-z0-9]*)(-[a-z0-9]+)*$)|(^[a-z][a-zA-Z0-9]+$)',
// url地址不加引号
'function-url-quotes': null,
'property-no-unknown': []
//...
}
}
6 配置eslint校验
yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-define-config eslint-plugin-prettier vue-eslint-parser
注意eslint-define-config不要使用最新版，因为最新版对node的版本要求太高，如果生产环境有多个项目，且node版本较低，就不要激进升级。
7 配置prettier
yarn add -D prettier
{
"format:check": "prettier --check ./src/**/*.{vue,js,jsx,ts,tsx}",
"format:write": "prettier --write ./src/**/*.{vue,js,jsx,ts,tsx}",
}
8 配置dotenv
yarn add -D dotenv
"scripts": {
"gen:env": "node ./genLocalEnv.ts",
"serve": "vite preview",
"start": "vite --mode dev",
"build": "tsc && vite build --mode prod",
"lint:check": "eslint --debug --ext .vue, .js,.jsx,.ts,.tsx ./src",
"lint:js": "eslint --fix --debug --ext .vue,.js,.jsx,.ts,.tsx ./src",
},
9 vscode的volar扩展 将大写的组件名，一个单词的组件名高亮为红色，看着不爽，可以将组件命名成多个单词，用横杠相连。
10 路径别名问题
参考 项目中vite1.0升级到vite2.0，vite.config.js 配置报错解决方案整理
11. less中引用样式函数报错
参考使用 vite2 + vue3 + ant-design-vue2 报错：[vite] Internal server error: Inline JavaScript is not enabled.
12 UI库
ant-design-vue已经推出v3版，前往查看，ant-design-vue 菜单和日历控件默认展示英文，需要汉化(注意：ant-design-vue的版本要与dayjs版本兼容)
<template>
<a-config-provider :locale="locale">
<router-view />
</a-config-provider>
</template>
<script lang="ts" setup>
// antd-design-vue菜单默认为英文,需要汉化
import zhCN from 'ant-design-vue/es/locale/zh_CN';
// 日期选择框要单独函数
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
const locale = zhCN;
</script>
