Vue3: 如何以 Vite 创建，以 Vue Router, Vuex, Ant Design 开始应用

• 本文代码： https://github.com/ikuokuo/start-vue3
• 在线演示： https://ikuokuo.github.io/start-vue3/ 👀
  

Vite 创建 Vue 3 项目

yarn create vite-app my-site
cd my-site
yarn
yarn dev

运行输出：

❯ yarn dev
yarn run v1.22.10
warning package.json: No license field
$ vite
vite v1.0.0-rc.4
[vite] Optimizable dependencies detected:
vue

  Dev server running at:
  > Local:    http://localhost:3000/
  > Network:  http://192.168.1.100:3000/

访问网址：

与 Vue 2 的差异

详见： Migration Guide

Vite 配置

vite.config.ts:

import {
    resolve } from "path";

function pathResolve(dir: string) {
   
  return resolve(__dirname, ".", dir);
}

module.exports = {
   
  alias: {
   
    "/@/": pathResolve("src"),
  },
  optimizeDeps: {
   
    include: ["@ant-design/icons-vue"],
  },
};

详见： Vite - Config File

前提准备

eslint-plugin-vue

yarn add -D eslint eslint-plugin-vue

.eslintrc.js:

module.exports = {
   
  extends: [
    // add more generic rulesets here, such as:
    // "eslint:recommended",
    "plugin:vue/vue3-recommended",
    // "plugin:vue/recommended" // Use this if you are using Vue.js 2.x.
  ],
  rules: {
   
    // override/add rules settings here, such as:
    "vue/no-multiple-template-root": "off",
  },
};

TypeScript

yarn add -D typescript

详见：

• Vue3 - TypeScript
• Vite - TypeScript

Vue Router

yarn add vue-router@next

Vuex

yarn add vuex@@next

Ant Design Vue

yarn add ant-design-vue@next
# impor