Vue3+Vite+Ts+Antd2.x项目搭建

NPM

npm init @vitejs/app

Yarn

yarn create @vitejs/app

项目构建（Ts版）

npm 6.x

npm init @vitejs/app vue-admin-pro --template vue-ts

npm 7+, 需要额外的双横线:

npm init @vitejs/app vue-admin-pro -- --template vue-ts

yarn

yarn create @vitejs/app vue-admin-pro --template vue-ts

支持的模板预设包括：

vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts

项目结构

├── node_modules                                       安装的依赖包
├── dist                                               生成打包后文件
├── public                                             中的表态资源会被复制到输出目录(dist)中
│   └── favicon.ico
├── src
│   ├── assets                                         放置一些静态资源，例如图片，图标，字体
│       └── logo.png
│   ├── components                                     公共组件
│       └── HelloWorld.vue
│   ├── App.vue                                        路由组件的顶层路由
│   ├── main.ts                                        Vue 入口文件
│   └── shims-vue.d.ts
├── .gitignore 
├── index.html
├── package-lock.json                                  npm包配置文件、依赖包小版本信息
├── package.json                                       npm包配置文件、依赖包信息
├── README.md                                          项目说明
├── tsconfig.json                                      typescript 配置
└── vite.config.ts

运行

npm run dev

$\color{LightSeaGreen}{欲要利其事,必先利其器}$

安装依赖

NPM

npm install vue-i18n@next 
npm install vue-router@4
npm install vuex@next --save
npm install ant-design-vue@next --save
npm install axios --save
npm install nprogress --save
npm install less less-loader --save-dev

项目结构（Vue-I18n、Vue-Router、Vuex、Ant Design）

├── node_modules                                       安装的依赖包
├── dist                                               生成打包后文件
├── public                                             中的表态资源会被复制到输出目录(dist)中
│   └── favicon.ico
├── src
│   ├── assets                                         放置一些静态资源，例如图片，图标，字体
│       └── logo.png
│   ├── components                                     公共组件
│       └── HelloWorld.vue
│   ├── locales                                        国际化
│       └── index.ts
│   ├── plugins                                        存放第三方插件
│       └── index.ts
│   ├── router                                         路由配置
│       └── index.ts
│   ├── store                                          Vuex状态管理
│       └── index.ts                                   自动装载模块
│   ├── views                                          页面级组件
│       ├── About.vue
│       └── Home.vue     
│   ├── App.vue                                        路由组件的顶层路由
│   ├── main.ts                                        Vue 入口文件
│   └── shims-vue.d.ts
├── .gitignore                                         Git忽略规则
├── index.html
├── package-lock.json                                  npm包配置文件、依赖包小版本信息
├── package.json                                       npm包配置文件、依赖包信息
├── README.md                                          项目说明
├── tsconfig.json                                      typescript 配置
└── vite.config.ts

配置路由

// router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home.vue"

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "@/views/About.vue")
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router

整合路由

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
const app = createApp(App);
app.use(router).mount("#app")

配置 Vite

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
const path = require("path");

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Ant Design of Vue

按需加载

// plugins/antd.ts
import type { App } from "vue";
import { ConfigProvider, Button } from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
export function setupAntd(app: App<Element>) {
  app.use(ConfigProvider).use(Button);
}
// plugins/index.ts
export { setupAntd } from "../plugins/antd"

.gitignore 配置

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
package-lock.json

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

前端自动化

Elint规范 (代码检查工具)

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

描述：

eslint: EsLint的核心代码

@typescript-eslint/parser：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码

@typescript-eslint/eslint-plugin：这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范

添加配置文件

npx eslint --init

√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · node
√ What format do you want your config file to be in? · JavaScript

资料

EsLint Rules

.eslintrc.js 配置

module.exports = {
    env: {
        es2021: true,
        node: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/essential',
        'plugin:@typescript-eslint/recommended'
    ],
    parserOptions: {
        ecmaVersion: 12,
        parser: '@typescript-eslint/parser',
        sourceType: 'module',
    },
    plugins: ['vue', '@typescript-eslint'],
    rules: {},
}

.eslintignore 配置

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

Prettier美化（前端代码格式化工具)

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

描述：

prettier：prettier插件的核心代码

eslint-config-prettier：解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效

eslint-plugin-prettier：将prettier作为ESLint规范来使用

新建配置文件

// prettier.config.js
module.exports = {
    printWidth: 80,             // 超过最大值换行
    tabWidth: 2,                // 缩进字节数
    useTabs: false,             // 缩进不使用tab，使用空格
    semi: false,                // 句尾添加分号
    singleQuote: true,          // 使用单引号代替双引号
    trailingComma: 'none',      // 在对象或数组最后一个元素后面是否加逗号
    bracketSpacing: true,       // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    jsxBracketSameLine: true,   // 在jsx中把'>' 是否单独放一行
    arrowParens: 'avoid',       // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    insertPragma: false,        // Prettier可以在文件的顶部插入一个 @format的特殊注释，以表明改文件已经被Prettier格式化过了
    endOfLine: 'auto',          // 结尾是 \n \r \n\r auto
}

将Prettier添加到EsLint中

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/essential',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'prettier/@typescript-eslint'
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: ['vue', '@typescript-eslint'],
  rules: {}
}

描述：

prettier/@typescript-eslint：使得@typescript-eslint中的样式规范失效，遵循prettier中的样式规范

plugin:prettier/recommended：使用prettier中的样式规范，且如果使得ESLint会检测prettier的格式问题，同样将格式问题以error的形式抛出

新增命令

// package.json
"scripts": {
    "dev": "vite",
    "build": "vuedx-typecheck . && vite build",
    "serve": "vite preview",
    "lint:eslint": "eslint \"{src}/**/*.{vue,ts,tsx}\" --fix",
    "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,ts,tsx,css,less,scss,vue,html,md}\""
 }

执行

npm run lint:prettier
npm run lint:eslint

前端代码风格自动化

npm install husky lint-staged @commitlint/config-conventional @commitlint/cli --save-dev

Vue3+Vite+Ts+Antd2.x项目搭建

项目构建（Ts版）

支持的模板预设包括：

项目结构

安装依赖

配置路由

整合路由

配置 Vite

Ant Design of Vue

前端自动化

Elint规范 (代码检查工具)

描述：

资料

Prettier美化（前端代码格式化工具)

描述：

描述：

新增命令

执行

前端代码风格自动化

推荐阅读更多精彩内容