时间戳

首页 > 技术文章 > Vite2+Vue3+TS+AntDesignVuev3开发框架搭建

Vite2+Vue3+TS+AntDesignVuev3开发框架搭建

wangpenghui522 2022-04-23 12:31 原文

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

参考husky+commitlint配置步骤

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>

推荐阅读